Skip welcome & menu and move to editor
Welcome to JS Bin
File
Add library
Share
Login or Register
Blog
Help
Load cached copy from
  • Run with JS
  • Save
  • Share
  • …
 
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/normalize/2.0.1/normalize.css">
<link href='http://fonts.googleapis.com/css?family=Rationale' rel='stylesheet' type='text/css'>
<meta name="description" content="CSS Slider">
<meta charset=utf-8>
<title>CSS Slider</title>
</head>
<body>
  <div class="container">
    
    <input type="radio" name="slides" id="slide1" checked>
    <input type="radio" name="slides" id="slide2">
    <input type="radio" name="slides" id="slide3">
    <input type="radio" name="slides" id="slide4">
    <input type="radio" name="slides" id="slide5">
    <input type="radio" name="slides" id="slide6">
    
    <div class="slider">
      
      <div class="captions">
        <div class="c2">Aventador</div>
        <div class="c3">Charger</div>
        <div class="c4">M3</div>
        <div class="c5">Aventador</div>
        <div class="c6">Gtr</div>
      </div>
      
      <div class="img img1">
        <div class="frag frag1"></div>
        <div class="frag frag2"></div>
        <div class="frag frag3"></div>
        <div class="frag frag4"></div>
        <div class="frag frag5"></div>
        <div class="frag frag6"></div>
      </div>
      <div class="img img2">
        <div class="frag frag1"></div>
        <div class="frag frag2"></div>
        <div class="frag frag3"></div>
        <div class="frag frag4"></div>
        <div class="frag frag5"></div>
        <div class="frag frag6"></div>
      </div>
      <div class="img img3">
        <div class="frag frag1"></div>
        <div class="frag frag2"></div>
        <div class="frag frag3"></div>
        <div class="frag frag4"></div>
        <div class="frag frag5"></div>
        <div class="frag frag6"></div>
      </div>
      <div class="img img4">
        <div class="frag frag1"></div>
        <div class="frag frag2"></div>
        <div class="frag frag3"></div>
        <div class="frag frag4"></div>
        <div class="frag frag5"></div>
        <div class="frag frag6"></div>
      </div>
      <div class="img img5">
        <div class="frag frag1"></div>
        <div class="frag frag2"></div>
        <div class="frag frag3"></div>
        <div class="frag frag4"></div>
        <div class="frag frag5"></div>
        <div class="frag frag6"></div>
      </div>
      <div class="img img6">
        <div class="frag frag1"></div>
        <div class="frag frag2"></div>
        <div class="frag frag3"></div>
        <div class="frag frag4"></div>
        <div class="frag frag5"></div>
        <div class="frag frag6"></div>
      </div>
    </div><!-- /.slider -->
    
    <div class="side-controls">
        <label for="slide1"></label>
        <label for="slide2"></label>
        <label for="slide3"></label>
        <label for="slide4"></label>
        <label for="slide5"></label>
        <label for="slide6"></label>
     </div>
    
    <div class="controls">
        <label for="slide1"></label>
        <label for="slide2"></label>
        <label for="slide3"></label>
        <label for="slide4"></label>
        <label for="slide5"></label>
        <label for="slide6"></label>
    </div>
    
  </div><!-- /.container -->
  <script src="http://cdnjs.cloudflare.com/ajax/libs/prefixfree/1.0.6/prefixfree.min.js"></script>
</body>
</html>
​
Output

You can jump to the latest bin by adding /latest to your URL

Dismiss x
public
Bin info
soraxpro
0viewers