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/jquery.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1/jquery-ui.min.js"></script>
<meta charset=utf-8 />
<title>Demo by roXon</title>
</head>
<body>
  
​
<div id="gallery">
​
  <div id="slider">
    <div class="box">
        1 Slider Content Will Go Here
    </div>
    <div class="box">
        2 Slider Content Will Go Here
    </div>
    <div class="box">
        3 Slider Content Will Go Here
    </div>
    <div class="box">
        4 Slider Content Will Go Here
    </div>
    <div class="box">
        5 Slider Content Will Go Here
    </div>   
  </div>
  
  <div id="prev"></div>
  <div id="next"></div>
  
  <div id="nav_btns">
    <div id="scroller"></div>
    <ul>
      <li>FIRST ITEM</li>
      <li>SECOND ITEM</li>
      <li>THIRD ITEM</li>
      <li>FOURTH ITEM</li>
      <li>FIFTH ITEM</li>  
    </ul>
  </div>
</div>
  
  
</body>
</html>
​
 
// Gallery by roXon 2012.
​
var $sl = $('#slider'),
    slW = $sl.outerWidth(true),
    slN = $sl.children().length,
    c = 0,
    W = slW/slN,
    int,
    dragging=false;
$('#scroller, #nav_btns li').width(W);
​
function move(){
  c=c==-1?slN-1:c%slN;
  $sl.stop().animate({scrollLeft: slW*c},1000);
  if(dragging===false){
    $('#scroller').stop().animate({left: W*c},500);
  }
}
​
$('#prev, #next').click(function(e){
  var btn=this.id==='next'?c++:c--;
  move();
});
$('#nav_btns li').click(function(){
  c= $(this).index();
  move();
});
​
var cChanged = c; // while dragging chech for c val changed before doing animations!
$("#scroller").draggable({
    containment:'parent',
    drag: function(){       
        dragging=true;
        var stopPos = $(this).position().left;
        c = (Math.abs(stopPos/W).toFixed(0));
        if(c!=cChanged){            
            move(); // animate just if we're not dragging over the same place
            cChanged = c;
        }       
    },
    stop: function(){
        dragging=false;
        move();
    }
});
​
function auto(){
  int = setInterval(function(){
    $('#next').click();
  },3500); // SET HERE THE DELAY
}
auto();
​
$('#gallery').on('mouseenter mouseleave',function(e){
  var evt= e.type=='mouseenter' ? clearInterval(int) : auto(); 
});
Output

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

Dismiss x
public
Bin info
anonymouspro
0viewers