How to Build a Slider Without JavaScript

You don’t need to use JavaScript to add a slider on a page anymore!

In our web development agency, we discovered it is quite simply possible to create it with HTML and CSS just by using radio inputs and labels.

Implementation

Add a wrapper with radio inputs and slides in order to have two slides:

• you have to add two inputs
• input for the first slide has to have checked attribute added
• you have to add the same “name” to all inputs so that only one can be checked at the same time
• you can add an image, text or both together inside the slide

HTML:

<div class="c-css-slider">
   <input class="c-css-slider__input" checked type='radio' name='slider' id='slide1'/>
   <input class="c-css-slider__input" type='radio' name='slider' id='slide2'/>
   <div class="c-css-slider__slides-wrapper">
      <ul class="c-css-slider__slides">
         <li class="c-css-slider__slide">
             <img src="./static/img/pic-01.png" alt="Pic 1"/>
         </li>
         <li class="c-css-slider__slide">
            <img src="./static/img/pic-02.png" alt="Pic 2"/>
         </li>
      </ul>
   </div>
</div>

CSS:

.c-css-slider {
   position: relative;
}

/* Slides inputs
========================================================================== */

.c-css-slider__input {
   display: none;
}

/* Slides wrapper
========================================================================== */

.c-css-slider__slides-wrapper {
   position: relative;
   overflow: hidden;

   width: 100%;
}

/* Slides
========================================================================== */

.c-css-slider__slides-wrapper .c-css-slider__slides {
   display: flex;
   padding: 0;

   width: 200%; // 300% for 3 slides, etc.

   line-height: 0;

   transition: all 800ms cubic-bezier(.770,.000,.175,1.000);
}

#slide1:checked ~ .c-css-slider__slides-wrapper .c-css-slider__slides {
   margin-left: 0;
}

#slide2:checked ~ .c-css-slider__slides-wrapper .c-css-slider__slides {
   margin-left: -100%; // next slide will have margin-left: -200%
}

/* Slide
========================================================================== */

.c-css-slider__slide {
   width: calc(100% / 2); // calc(100% / 3) for three slides
}

.c-css-slider__slide img {
   display: block;

   width: 100%;
   max-width: 100%;
   height: auto;
}

Add navigation

• you have to add two sets of labels for two slides – one for navigation arrows and the second one for pagination
• remember to add the ID of slide to label’s “for” attribute
• you can add SVG icons or html elements inside the labels

HTML:

<div class="c-css-slider"><input id="slide1" class="c-css-slider__input" checked="checked" name="slider" type="radio"> <input id="slide2" class="c-css-slider__input" name="slider" type="radio">
<div class="c-css-slider__slides-wrapper">
<ul class="c-css-slider__slides">
<li class="c-css-slider__slide"><figure><img src="./static/img/pic-01.png" alt="Pic 1"></figure></li>
<li class="c-css-slider__slide"><figure><img src="./static/img/pic-02.png" alt="Pic 2"></figure></li>
</ul>
</div>
<!-- Navigation arrows -->
<div class="c-css-slider__arrows">
<div class="c-css-slider__arrow-left"><figure><img src="./static/img/arrow-left.png" alt="Arrow left"></figure></div>
<div class="c-css-slider__arrow-right"><figure><img src="./static/img/arrow-right.png" alt="Arrow right"></figure></div>
<div class="c-css-slider__arrow-left"><figure><img src="./static/img/arrow-left.png" alt="Arrow left"></figure></div>
<div class="c-css-slider__arrow-right"><figure><img src="./static/img/arrow-right.png" alt="Arrow right"></figure></div>
</div>
<!-- Pagination -->
<div class="c-css-slider__pagination"> </div>
</div>

CSS:

.c-css-slider__arrows,
.c-css-slider__arrows .c-css-slider__arrow,
.c-css-slider__slides-wrapper,
.c-css-slider__pagination,
.c-css-slider__pagination .c-css-slider__bullet {
   transition: all .5s ease-out;
}

/* Pagination
========================================================================== */

.c-css-slider__pagination {
   position: absolute;
   z-index: 5;
   bottom: 22px;
   left: 50%;

   display: flex;

   height: 10px;

   transform: translateX(-50%);
   text-align: center;

   align-items: center;
   justify-content: center;
}

.c-css-slider__pagination .c-css-slider__bullet {
   display: flex;

   width: 10px;
   height: 10px;
   margin: 0 4px;

   cursor: pointer;

   border-radius: 100%;
   background-color: $color-white;

   flex-shrink: 0;
}

#slide1:checked ~ .c-css-slider__pagination .c-css-slider__bullet:nth-child(1),
#slide2:checked ~ .c-css-slider__pagination .c-css-slider__bullet:nth-child(2) {
   background-color: $color-red;
}

/* Navigation
========================================================================== */

.c-css-slider__arrows {
   position: absolute;
   top: 50%;
   left: 50%;

   width: 100%;

   transform: translate(-50%, -50%);
}

.c-css-slider__arrows .c-css-slider__arrow {
   display: none;

   width: 64px;
   height: 32px;

   cursor: pointer;
   transition: opacity .2s ease-out;

   flex-shrink: 0;
   justify-content: center;
   align-items: center;

   &:hover {
       opacity: .8;
   }
}

.c-css-slider__arrow-right,
.c-css-slider__arrow-left {
   .o-icon {
       font-size: 16px;

       fill: $color-white;
   }
}

#slide1:checked ~ .c-css-slider__arrows .c-css-slider__arrow:nth-child(2) {
   display: flex;
   float: right;

   .c-css-slider__arrow-right {
       display: flex;
   }
   .c-css-slider__arrow-left {
       display: none;
   }
}

#slide2:checked ~ .c-css-slider__arrows .c-css-slider__arrow:nth-child(1) {
   display: flex;
   float: left;

   .c-css-slider__arrow-left {
       display: flex;
   }
   .c-css-slider__arrow-right {
       display: none;
   }
}

Advantages:

• you don’t have to add any plugin or write JS code
• it works with navigation arrows and pagination bullets
• easy to implement
• you can save website weight and improve loading speed

Disadvantages:

• you have to add styles to each slide so you have to know the exact number of slides
• it uses id’s so you should be careful if you want to add more than one slider on one page
• you can change a slide only by clicking on an arrow or pagination bullet (no touch gestures support)

Summary:

You don’t always need JavaScript to add something interactive on your page, like a slider. Pure CSS slider is a nice alternative. If your priority is the highest page load speed, this is a solution for you!