A CodePen by Maux Webmaster. Another Responsive Slider with CSS3 without JS - Another Responsive Slider with CSS3 without JS Inspired by 'CSScience'. Original creation by Ian Hansson. --- (https://twitter.com/teapoted) Example Page: --- (http://csscien

index.html

<div class="content">
  <h1>Another Responsive Slider with CSS3 without JS</h1>
  <input type="radio" id="slide1" name="slider" checked>
    <input type="radio" id="slide2" name="slider">
    <input type="radio" id="slide3" name="slider">
    <input type="radio" id="slide4" name="slider">
    <input type="radio" id="slide5" name="slider">
  <div class="slides">
    <div class="overflow">
      <div class="inner">
        <article><img src="http://lorempixel.com/640/480/sports/1" alt=""></article>
        <article><img src="http://lorempixel.com/640/480/sports/2" alt=""></article>
        <article><img src="http://lorempixel.com/640/480/sports/3" alt=""></article>
        <article><img src="http://lorempixel.com/640/480/sports/4" alt=""></article>
        <article><img src="http://lorempixel.com/640/480/sports/5" alt=""></article>
      </div>
    </div>
  </div>
  <div class="controls">
    <label for="slide1"></label>
    <label for="slide2"></label>
    <label for="slide3"></label>
    <label for="slide4"></label>
    <label for="slide5"></label>
  </div>
</div>

script.js

/*

Another Responsive Slider with CSS3 without JS

Inspired by 'CSScience'.

Original creation by Ian Hansson.
--- (https://twitter.com/teapoted)

Example Page:
--- (http://csscience.com/responsiveslidercss3/)

*/

style.less

.rounded(@radius:"5px"){
  -webkit-border-radius:~"@{radius}";
  -moz-border-radius:~"@{radius}";
	border-radius:~"@{radius}";
}
.boxShadow(@args:"none"){
	-webkit-box-shadow:~"@{args}";
	-moz-box-shadow:~"@{args}";
	box-shadow:~"@{args}";
}
.textShadow(@args:"none"){
	-webkit-text-shadow:~"@{args}";
	-moz-text-shadow:~"@{args}";
	text-shadow:~"@{args}";
}
.transitions (@prop:all,@time:.5s,@timing:linear,@delay:0s){
	-webkit-transition:@prop @time @timing @delay;
	-moz-transition:@prop @time @timing @delay;
	-ms-transition:@prop @time @timing @delay;
	-o-transition:@prop @time @timing @delay;
	transition:@prop @time @timing @delay;
}
/********************************************/
*,*:after,*:before{
  -webkit-box-sizing:border-box;
  -moz-box-sizing:border-box;
  -ms-box-sizing:border-box;
  box-sizing:border-box;
}
html,body{
  background:#333;
  border:0;
  color:#000;
  font:14px/1.5em sans-serif;
  height:100%;
  margin:0;
  outline:0 none;
  padding:0;
  position:relative;
  text-align:justify;
  vertical-align:baseline;
  width:100%;
  word-wrap:break-word;
  z-index:0;
}
.content{
  background:#fff;
  margin:0 auto;
  padding:5px;
  width:70%;
}
h1{
  font:bold 24px/1.5 sans-serif;
  margin:0;
  padding:0;
  text-align:center;
  .textShadow("0 2px 1px rgba(0,0,0,.5)");
}
input{display:none;}
.slides{
  background:#f5f5f5;
  .rounded;
  .boxShadow("0 0 10px rgba(0,0,0,.75)");
  margin:10px;
  padding:1%;
  .transitions;
  .overflow{
    overflow:hidden;
    width:100%;
    .inner{
      line-height:0;
      width:500%;
      .transitions;
      article{
        float:left;
        width:20%;
        img{
          width:100%;
        }
      }
    }
  }
}
.controls{
  text-align:center;
  label{
    background:#aaa;
    .rounded("100%");
    cursor:pointer;
    display:inline-block;
    margin:0 5px;
    height:15px;
    width:15px;
  }
}
#slide1:checked{
  ~.slides .inner{
    margin-left:0%;
  }
  ~.controls>label:nth-of-type(1){
    background:#333;
  }
}
#slide2:checked{
  ~.slides .inner{
    margin-left:-100%;
  }
  ~.controls>label:nth-of-type(2){
    background:#333;
  }
}
#slide3:checked{
  ~.slides .inner{
    margin-left:-200%;
  }
  ~.controls>label:nth-of-type(3){
    background:#333;
  }
}
#slide4:checked{
  ~.slides .inner{
    margin-left:-300%;
  }
  ~.controls>label:nth-of-type(4){
    background:#333;
  }
}
#slide5:checked{
  ~.slides .inner{
    margin-left:-400%;
  }
  ~.controls>label:nth-of-type(5){
    background:#333;
  }
}