Simple Slider (Carousel With Pure CSS)

A carousel is a superb instance of a potential CSS-only interactive function. Whereas carousels (aka sliders) are often constructed with JavaScript, if we take away the complicated options, they’re merely scrollable parts with an overflow; precisely what CSS is made for.

You is perhaps pondering “CSS is used for styling whereas JavaScript is used for interactivity, that’s simply the best way the online works.”

Nevertheless, contemplating the truth that CSS is loaded on a webpage quicker than JavaScript, and CSS additionally causes much less reflow on a web page (which improves efficiency), it’s truthful to say we must always use CSS for interactivity wherever potential.

1. Structure With HTML

The structure of our simple slider is easy: we’ll create a carousel-container div to carry the carousel-slide parts. 

1

 class="carousel-container">

2

  
 class="carousel-slide">1

3

  ...

4

That’s all we want so let’s transfer on to the styling

2. Carousel Behaviour with CSS

As soon as we’ve got our carousel slides arrange, we’ll type the carousel to have the next options:

1. Scrollable content material
2. Snap to subsequent slide
3. Progress bar indicating slide progress

Scrollable Content material

For the scrollable content material, we’ll use the display:flex and overflow-x: auto properties. We’ll additionally type slides so we are able to see 3 slides on the desktop display screen and 1 slide on cell.

1

.carousel-container {

2

  show: flex;

3

  overflow-x: auto;

4

}

5

6

.carousel-slide {

7

  flex: 1 0 30%;

8

}

9

10

@media (max-width: 600px) {

11

  .carousel-slide {

12

    flex: 1 0 90%;

13

  }

14

}

Snap to Slide

Subsequent, to realize the snapping impact on the slides, we’ll use the CSS scroll-snap properties. The scroll snap properties enable us outline “snapping” factors on a component (the purpose of the component that we need to be totally seen as soon as scrolling). Our up to date code appears to be like like this:

1

.carousel-container {

2

  show: flex;

3

  overflow-x: auto;

4

  scroll-snap-type: x necessary;

5

}

6

7

.carousel-slide {

8

  flex: 1 0 30%;

9

  scroll-snap-align: heart;

10

}

11

12

@media (max-width: 600px) {

13

  .carousel-slide {

14

    flex: 1 0 90%;

15

  }

16

}

Elective: CSS-Solely Progress Bar

To maintain inline with our CSS-only interactivity, we are able to reap the benefits of native browser options to create a progress bar for our carousel. We’ll do that by styling the carousel container scrollbar to provide the looks of a progress bar. That is what the code appears to be like like:

1

.carousel-container::-webkit-scrollbar {

2

  peak: 8px;

3

}

4

5

.carousel-container::-webkit-scrollbar-thumb {

6

  background: #29AB87;

7

}

8

9

.carousel-container::-webkit-scrollbar-track {

10

  background: #b1b3b399;

11

}

12

13

.carousel-container::-webkit-scrollbar-track-piece:begin {

14

  background: #29AB87;

15

}

Let’s take a look at the properties we’re utilizing:

• ::webkit-scrollbar: the whole scrollbar component 
• ::webkit-scrollbar-thumb: the draggable bar on the scrollbar
• ::webkit-scrollbar-track: the trail that the scrollbar thumb is on
• ::webkit-scrollbar-track-piece:begin: the trail of the observe not coated by the scrollbar thumb, the :begin selector targets solely the trail behind the scrollbar thumb

Within the diagram above, we are able to see what elements of the scrollbar are being focused. By making the -webkit-scrollbar-thumb and ::webkit-scrollbar-track-piece:begin the identical color, the scrollbar gives the look of being stuffed in because it’s being scrolled, thus making a progress bar.

And since our progress bar is definitely a scrollbar, it may also be used to scroll by way of the carousel as an extra function: it’s a win/win!

That’s all there may be to our simple slider! We have constructed a scrollable container with a nifty snapping function and even added a progress bar utilizing solely CSS:

3. Extra Options With JavaScript

Since we’ve gotten the fundamental function of the carousel out of the best way, we are able to go on so as to add much more options, utilizing JavaScript this time.

A kind of options is utilizing arrows to deal with the carousel navigation. In a earlier tutorial, we appeared into constructing a carousel with JavaScript (lower than 14 strains of code!), so we are able to mix that tutorial with this one so as to add much more options to our simple slider.

That is what our mixed carousel appears to be like like:

Only for enjoyable, on this demo the code has been refactored to make use of even fewer strains of JavaScript, so that is what our up to date carousel arrow operate appears to be like like:

1

const carousel = doc.querySelector(".carousel-container");

2

const slide = doc.querySelector(".carousel-slide");

3

4

operate handleCarouselMove(optimistic = true) {

5

  const slideWidth = slide.clientWidth;

6

  carousel.scrollLeft = optimistic ? carousel.scrollLeft + slideWidth : carousel.scrollLeft - slideWidth;

7

}

Then we move that operate to our HTML arrows:

1

 class="carousel-arrow carousel-arrow--prev" onclick="handleCarouselMove(false)">

2

  ‹

3

4

5

 class="carousel-arrow carousel-arrow--next" onclick="handleCarouselMove()">

6

  ›

7

And with that, we’ll name it a day on our modded-up carousel!