A Pen by Nick Moreton.

Fluid-No-JS-LESS-Slider.markdown

Fluid No-JS LESS Slider

Using checkbox hack and LESS loop to output CSS in order to 'place' previous and next slides, based on total number of slides

A Pen by Nick Moreton on CodePen.

License.

index.html

<h1>Fluid No-JS LESS Slider</h1>
<p>Slider built using the CSS checkbox hack and LESS loops to control colours and slide positioning</p>
<div class="slider">
 <!-- 'fa' classes are for Font Awesome icons http://fontawesome.io -->
  <input type="radio" id="control-1" name="slider-control" checked>
    <label for="control-1" class="fa fa-circle-o"></label>
    <label for="control-1" class="fa fa-circle"></label>
  <input type="radio" id="control-2" name="slider-control">
     <label for="control-2" class="fa fa-circle-o"></label>
    <label for="control-2" class="fa fa-circle"></label>
  <input type="radio" id="control-3" name="slider-control">
     <label for="control-3" class="fa fa-circle-o"></label>
    <label for="control-3" class="fa fa-circle"></label>
  <input type="radio" id="control-4" name="slider-control">
     <label for="control-4" class="fa fa-circle-o"></label>
    <label for="control-4" class="fa fa-circle"></label>
  <input type="radio" id="control-5" name="slider-control">
     <label for="control-5" class="fa fa-circle-o"></label>
    <label for="control-5" class="fa fa-circle"></label>
    
    
  <div class="slide" id="slide-1">
    <label for="control-5" class="fa fa-chevron-left fa-4x previous"></label>
    <label for="control-2" class="fa fa-chevron-right fa-4x next"></label>
  </div>
  
  <div class="slide" id="slide-2">
    <label for="control-1" class="fa fa-chevron-left fa-4x previous"></label>
    <label for="control-3" class="fa fa-chevron-right fa-4x next"></label>
  </div>
  
  <div class="slide" id="slide-3">
    <label for="control-2" class="fa fa-chevron-left fa-4x previous"></label>
    <label for="control-4" class="fa fa-chevron-right fa-4x next"></label>
  </div>
    
  <div class="slide" id="slide-4">
    <label for="control-3" class="fa fa-chevron-left fa-4x previous"></label>
    <label for="control-5" class="fa fa-chevron-right fa-4x next"></label>
  </div>
    
  <div class="slide" id="slide-5">
    <label for="control-4" class="fa fa-chevron-left fa-4x previous"></label>
    <label for="control-1" class="fa fa-chevron-right fa-4x next"></label>
  </div>
    
</div>
  
  

script.js

/* For automation, remove comments - animation cycles through and checks radio buttons. Slider pauses and plays on mouseenter/mouseleave

$(document).ready(function(){
  var time = 4000;
  var index = 1;
  var count = $('.slide').length;
  function slide() {
        if (index > count)
            index = 1;
        $("#control-"+index).click();
        index++;
    }
  
  var slider = setInterval(slide,time);
  
  $('.slider').mouseenter(function(){
    clearInterval(slider);
    slider = null;
  });
  
  $('.slider').mouseleave(function(){
    slider = setInterval(slide,time);
  });

});

*/

style.less

//LESS
//Match number of slides
@slides: 5;
// Set up 'spin' degree for a range of colours
@degree: 360/@slides;
// Set up base color
@base: #ff0000;
// Loop for main slide
.i-loop (@i) when (@i > 0) {
  // Background color of each slide
  #slide-@{i}{
    background: spin(@base,(@i * @degree));
  }
  // Dot colour
  #control-@{i} ~ label[for="control-@{i}"] {
    color: spin(@base,(@i * @degree));
  }
  // Show full dot when checked
  #control-@{i}:checked ~ label[for="control-@{i}"].fa-circle {
    display:inline-block;
  }
  // Hide hollow dot
  #control-@{i}:checked ~ label[for="control-@{i}"].fa-circle-o {
    display:none;
  }
  
  // Show 'checked' slide 
  input[type=radio]#control-@{i}:checked ~ div#slide-@{i}   {
      left:0;
    }
  // Loop for all previous slides up to @i variable
  @maxj: @i - 1;
  .j-loop (@j) when (@j > 0 ) {
    //Place slides off to the left
    input[type=radio]#control-@{i}:checked ~ div#slide-@{j} {
      left:((@i - @j) * -100%);
    }

    .j-loop(@j - 1);
  }
  .j-loop (0) {}
  .j-loop(@maxj);

  // Loop for all 'next' slides from @i up to total @slides
  @maxk: @slides;
  .k-loop (@k) when (@k > @i ) {
    // place slides off to the right
    input[type=radio]#control-@{i}:checked ~ div#slide-@{k} {
      left:((@k - @i) * 100%);
    }

    .k-loop(@k - 1);
  }
  .k-loop (0) {}
  .k-loop(@maxk);
  
  .i-loop(@i - 1);
}
.i-loop (0) {}
.i-loop(@slides);

// See http://stackoverflow.com/questions/17011090/how-do-i-create-nested-loops-with-less-css for more information on nested loops


// CSS

* {
  box-sizing:border-box;
}

body {
  text-align:center;
  padding-bottom:30px;
}

input[type=radio] {
   position: absolute;
   top: -9999px;
   left: -9999px;
}

label { 
  margin: 10px 0;
  cursor: pointer;
}

.slider {
  // Width can be changed, slides will automatically resize
  width:100%;
  margin:auto;
  height:400px;
  overflow:hidden;
  position:relative;
}
.slide {
  width:100%;
  height:400px;
  position:absolute;
  transition: left ease-in-out 500ms;
  color:white;
}

.previous {
  float:left;
  margin-top:160px;
  display:block;
  opacity:0;
  transition: opacity ease-in-out 300ms;
}

.slide:hover > .previous {
  opacity:0.6;
}


.previous:hover{
  opacity:1 !important;
}

.next {
  float:right;
  margin-top:160px;
  display:block;
  opacity:0;
  transition: opacity ease-in-out 300ms;
}

.slide:hover > .next {
  opacity:0.6;
}

.next:hover{
  opacity:1 !important;
}

.fa-circle {
  display:none;
}