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>
<meta charset=utf-8 />
<title>JS Bin</title>
<style>li{list-style-type:none;}</style>  
</head>
  <body>
    <ul class="show">
          <li><img src="http://dummyimage.com/300x200/000/fff&text=1"></li>
          <li><img src="http://dummyimage.com/300x200/000/fff&text=2"></li>
          <li><img src="http://dummyimage.com/300x200/000/fff&text=3"></li>
    </ul>
    <button class="next">next ></button>
  </body>
  
  <script class="jsbin" src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
  <script>
  $('.show').each(function(){
  var $this = $(this);
          $this.children('li').hide().eq(0).show();
          
          var activeli = $this.find('li');
​
          activeli.click(function() {
                  var $this = $(this);
                  var $next = $this.next();
                  if ($next.length === 0) {
                          $next = $this.parent().children(':first');
                  }
                  $this.hide();
                  $next.show();
          });
​
          $('.next').click(function() {
                  activeli.click();
          });
​
  });
</script>
</html>
Output

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

Dismiss x
public
Bin info
anonymouspro
0viewers