Making a responsive slider with SCSS

Intro

We are going to create a slider that automatically adjusts animation keyframes based on number of items to rotate through items, using only HTML5 and SCSS. Below example demonstrates desired outcome.

 

Breakdown

Let's make make our initial HTML structure as following.

// .scene is a wrapper for .slider
<div class="scene">
   // .slider contains all the items.
  <div class="slider">
    // .item selects each item
    // Duplicate the first item, then append it to the end
    // to generate infinite animation effect.
    <div class="item item-1">1</div>
    <div class="item item-2">2</div>
    <div class="item item-3">3</div>
    <div class="item item-1">1</div>
  </div>
</div>

 

Let's style it with SCSS as following,

// background color for slider and each items
$slider:#FFF493;
$primary:#87E892;
$secondary:#A1E3FF;
$tertiary:#B187E8;

// Store each color to SCSS list
$color-list: $primary, $secondary, $tertiary;

// Total number of items
$total: 3;
// $total + extra .item
$total-extra: $total + 1;

// Use max-width to make it responsive
// Set appropriate height
// Set overflow to hidden to hide overflowing portion of .slider
.scene{
  max-width:300px;
  height:150px;
  overflow:hidden;
}

// Set background-color using scss variable, which is declared at the top.
// Set display to flex to align elements to horizon axis
// Set width to 100%, it means 100% of the width of parent, which is width of .scene in this case.
// Multiply width by $total-extra
// Set height to 100% to match the height of parent.
.slider {
  background-color: $slider;
  display: flex;
  width: 100% * $total-extra;
  height: 100%;
}

// Set flex to 1 to divide width of each .item equally. 
// Set font-size to appropriate size.
// set color to #fff.
// Rest properties are for centering text
.item{
  flex:1;
  font-size:2rem;
  color:#fff;
  display:flex;
  justify-content:center;
  align-items:center;
}

// Use SCSS @for loop to assign each color in $color-list to each .item.
@for $i from 1 through $total{
  .item-#{$i}{
    background-color: nth($color-list, $i);
  }
}

 

When flex on .slider and overflow on .scene are not used, it would look like this in the browser.

Set display on .scene to flex, it would look like this in the browser.

Set overflow to hidden to hide overflowing portion of .scene, it looks like this in the browser.

Let's set @keyframes to make slider iterate itself.

// .slider will translate by amount of $translate
// @keyframes slider has two phase pause and slide
// pause phase will have 90% fo total time, and slide phase will have 10% of total time.
// $pause is time required for .item to be paused
// $slide is time required for .item to slide
// $current will stack value of keyframes during iteration.
$translate: 100% / $total-extra;
$pause: 90% / ($total);
$slide: 10% / ($total);
$current: 0%;
@keyframes slider {
  @for $i from 1 through $total {
    // start phase
    @if $i - 1 == 0 {
      #{$current} {
        transform: translateX(0);
      }
    }
    
    // config pause phase
    $current: $current + $pause !global;
    #{$current} {
      transform: translateX($translate * -($i - 1));
    }

    // config slide phase
    @if $i < $total {
      $current: $current + $slide !global;
      #{$current} {
        transform: translateX($translate * -$i);
      }
       // end phase
    }  @else {
      100% {
        transform: translateX($translate * -$i);
      }
    }
  }
}

 

Conclusion

When new .item is appended to .slider, configuring $total will generate @keyframes accordingly.

CodePen

See the Pen Responsive Slider by thesoundfromthesky (@thesoundfromthesky) on CodePen.