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>JS Bin</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{
    background:#444;
    font-family:Arial, Verdana, Helvetica, sans-serif;
  }
  
  #gallery{
    width:700px;
    height:490px;
    position:relative;
    margin:20px auto;
    background:#eee;
    overflow:hidden;
  }
  #slider{
    position:absolute;
  }
  #slider img{
    position:relative;
    float:left;
  }
  #nav{
    width:700px;
    z-index:2;
    position:absolute;
    top:305px;
    text-align:center;
  }
  #nav li{
    cursor:pointer;
    display:inline;
    background:#ddd;
    padding:10px;
    margin:1px;
    border-bottom:1px solid #999;
    -moz-border-radius-topleft: 6px;
-moz-border-radius-topright: 6px;
-moz-border-radius-bottomright: 0px;
-moz-border-radius-bottomleft: 0px;
-webkit-border-radius: 6px 6px 0px 0px;
border-radius: 6px 6px 0px 0px; 
  }
  #nav li.active{
    background:#eee;
    border-bottom:1px solid #eee;
  }
  
  #info{
    position:absolute;
    top:350px;
    height:140px;
    width:700px;
    background:#eee;
    border-top:1px solid #999;
​
  }
  div.info{
    position:relative;
    float:left;
    width:650px;
    padding:10px 25px;
    height:120px;
  }
  
  
</style>
</head>
<body>
  
  <div id="gallery">
    <div id="slider">
      <img src="http://dummyimage.com/700x350/9ae/fff&text=1">
      <img src="http://dummyimage.com/700x350/e44/fff&text=2">
      <img src="http://dummyimage.com/700x350/878/fff&text=3">
    </div>
    
    
  <div id="nav">
    <ul>
      <li class="active">Go to slide 1</li>
      <li>Go to slide 2</li>
      <li>Go to slide 3</li>
    </ul>
  </div>
    
    <div id="info">
      <div class="info"><h3>Info panel 1</h3></div>
      <div class="info"><h3>Info panel 2</h3></div>
      <div class="info"><h3>Info panel 3</h3></div>
       
    </div>
    
    
  </div>
  
​
  
</body>
</html>
Output

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

Dismiss x
public
Bin info
anonymouspro
0viewers