html/css-only slider

html-css-only-slider.markdown

html/css-only slider

Based on http://codepen.io/robdodson/pen/rCGvJ Mine isn't ie8 compatible.

A Pen by Glenn Cueto on CodePen.

License.

index.html

<h1>HTML/CSS-only Slider</h1>
<div id="slider">
  
  <input checked="" type="radio" name="slider" id="slide1" selected="false"/>
  <input type="radio" name="slider" id="slide2" selected="false"/>
  <input type="radio" name="slider" id="slide3" selected="false"/>
  <input type="radio" name="slider" id="slide4" selected="false"/>
  
  <div id="slides">
    <div class="inner">
      <img src="http://placehold.it/350x200/234345&text=img 1" alt="slide 1"/>
      <img src="http://placehold.it/350x200/663399&text=img 2" alt="slide 2"/>
      <img src="http://placehold.it/350x200/654321&text=img 3" alt="slide 3"/>
      <img src="http://placehold.it/350x200/990000&text=img 4" alt="slide 4"/>
    </div>
  </div>
  
  <label for="slide1"></label>
  <label for="slide2"></label>
  <label for="slide3"></label>
  <label for="slide4"></label>
</div>

script.js

/*
  Based on http://codepen.io/robdodson/pen/rCGvJ
  Mine isn't ie8 compatible.
*/

style.scss

* { box-sizing: border-box; }
body {
  background: #EAF0FB;
  font-family: "Helvetica Neue", Helvetica, sans-serif;
}
h1 {
  text-align: center;
  font-weight: 200;
  color: #222;
}

$numslides: 4;

#slider {
  max-width: 350px;
  margin: 0 auto;
  
  input {
    display: none;
  }
  
  label {
    background: #bbb;
    display: inline-block;
    cursor: pointer;
    width: 10px;
    height: 10px;
    border-radius: 2px;
  }
}

#slides {
  width: 100%;
  overflow: hidden;
  
  .inner {
    width: $numslides * 100%;
    transition: all 700ms cubic-bezier(0.770, 0.000, 0.175, 1.000);
  }
  
  img {
    width: 100% / $numslides;
    float: left;
  } 
}

@for $i from 1 through $numslides {
  #slide#{$i}:checked ~ #slides .inner {
    margin-left: ($i - 1) * -100%;
  }
}

@for $i from 1 through $numslides {
  #slide#{$i}:checked ~ label[for="slide#{$i}"] {
    background: #333;
  }
}