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>
<script class="jsbin" src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
<meta charset=utf-8 />
<title>demo by roXon</title>
<!--[if IE]>
  <script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
<style>
  article, aside, figure, footer, header, hgroup, 
  menu, nav, section { display: block; }
  body{font: normal 16px/1.2em Arial, Helvetica, sans-serif;color:#444;background:#aaa;}
  *{margin:0;padding:0;}
  ul{list-style:none;}
  a{text-decoration:none;color:#666;}
  
  
  .slide_gallery{
    position:relative;
    margin:15px auto;
    width:500px;
    padding:0 50px; /* padding for arrows*/
    background:#fff;
  }
  .slider_wrapper{
    position:relative;
    width:500px;
    height:300px;
    background:#eee;
    overflow:hidden;
  }
  .slider{
    position:absolute;
    width:99999px;
    left:0;
  }
  .slide{
    position:relative;
    float:left;
    width:500px;
    height:300px;
  }
  .btn{
    cursor:pointer;
    position:absolute;
    width:50px;
    height:100%;
    background:url(http://i.stack.imgur.com/tuKVp.gif) no-repeat center center;
  }
  .btn_left{
    left:0px;
    /* remove this after you replace image*/
        -moz-transform: scaleX(-1);
        -o-transform: scaleX(-1);
        -webkit-transform: scaleX(-1);
        transform: scaleX(-1);
        filter: FlipH;
        -ms-filter: "FlipH";
  }
  .btn_right{
    right:0px;
  }
  
  
  
  
 
</style>
</head>
<body>
​
<div class="slide_gallery">
  
  <div class="btn btn_left"></div>
  <div class="btn btn_right"></div>
  
  <div class="slider_wrapper">
    <ul class="slider">
       <li class="slide">
           <h3>Heading1</h3>
           <div>"Lorem ipsum </div>
       </li>
       <li class="slide">
           <h3>Heading2</h3>
           <div>"Lorem ipsum 2</div>
       </li>
       <li class="slide">
           <h3>Heading3</h3>
           <div>"Lorem ipsum 3</div>
       </li>
       <li class="slide">
           <h3>Heading4</h3>
           <div>"Lorem ipsum 4</div>
       </li>
    </ul>
  </div>
  
</div>
​
  
  
</body>
</html>
Output 300px

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

Dismiss x
public
Bin info
anonymouspro
0viewers