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 src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
<meta charset=utf-8 />
<title>Hello world !!</title>
  <style type="text/css">
    .slider-wrap {
      height:200px;
      overflow:hidden;
      width:500px;
    }
    .slider {
      height:200px;
      margin:0;
      padding:0;
      position:relative;
  }
    .slider img{
      display:block;
      float:left;
      height:200px;
      list-style:inline ;
      margin:0;
      padding:0;
      width:500px;
      overflow:hidden;
  }
    #navigation li {
      list-style:none ;
      display:inline;
      cursor:pointer;
      padding:5px;
      border:1px solid #000;
      background:#3f3f3f;
      color:#fff;
    }
    </style>
​
</head>
<body>
  
  
<div class="slider-wrap">
  <div class="comix" style="width: 1500px;">
    <img src="http://www.staging.newslaundry.com/wp-content/themes/newslaundry_new_design/images/logo3.png">
     <img src="http://pagead2.googlesyndication.com/simgad/1624678127307863859">
    <img src="http://resources2.news.com.au/images/2012/10/23/1226501/426670-peter-gabriel-so-album-cover.jpg">
​
</div>  
​
  
<div id="navigation">
  <ol>
    <li class="page">1</li>
    <li class="page">2</li>
    <li class="page">3</li>
    <li class="page">4</li>
  </ol>
</div>
​
  
</body>
</html>
 
$(document).ready(function(){
   var sliderwidth = 500;
  $('#navigation li').bind('click',function() {
   $('.slider').animate({left:"-" + sliderwidth * $(this).index() },1000);
  });
});
Output

This bin was created anonymously and its free preview time has expired (learn why). — Get a free unrestricted account

Dismiss x
public
Bin info
anonymouspro
0viewers