CODEWITHSUNDEEP
javascriptjqueryhtmlcss
Augus
Augus

Reputation: 495

Jquery div slider + menu

At the moment I need to make an slider for an <div>. But due to the size of most plugins I am trying to create my own jquery script because I only need the basics. But to be honest I'm really a beginner in jQuery and could use some help.

At the moment i got an <div> as container (overflow:hidden and 250px width), in that <div> I got an other <div> which needs to move from right to the left (width 2500px). I want that div on the $(document).ready function to animate with steps of 250px to the left and with an interval of 5 seconds. But after spending the whole morning trying to figure out where to start I'm still stuck.

Besides I would want the following options:

  1. That after the inner <div> is totaly to the left, it fades back to its original position.
  2. An way to create "dots" to navigate to an certain position, and when navigated to that position the slides starts animating from that position.

I know this is an big (hard?) question, but even a litle bit of help would be very much appriciated.

Upvotes: 1

Views: 924

Answers (3)

Roko C. Buljan
Roko C. Buljan

Reputation: 206078

jsBin demo

HTML:

<div id="slider">    
  <div id="slider_cont">
    <div id="slide">
       <!-- wide content here -->
    </div>    
  </div>  
  <div id="dots"><!--leave empty--></div> 
</div>

CSS:

#slider_cont{
  width:250px;
  height:180px;
  position:relative;
  background:#eee;
  overflow:hidden;
}
#slide{
  position:absolute;
  left:0;
  width:2500px;
  height:180px;
}
.dot{
  cursor:pointer;
  background:#444;
  width:10px;
  height:10px;
  margin:4px 2px;
  position:relative;
  float:left;
  border-radius:10px;
}
.dot.active{
  background:#49a;
}

jQuery:

var steps = 10,  // SET DESIRED n OF STEPS
    delay = 3500,// SET DESIRED DELAY
    galW = $('#slider_cont').width(),
    c = 0,      // counter
    intv;       // interval

// generate dots
for(i=0;i<steps;i++){
 $('#dots').append('<div class="dot" />'); 
}
$('#dots .dot').eq(c).addClass('active');

// ANIMATIONS function
function anim(){
  c=c%steps; // reset counter to '0' if greater than steps
  $('#slide').stop().animate({left: '-'+galW*c},800);
  $('#dots .dot').removeClass('active').eq(c).addClass('active');
}

// AUTO SLIDE function
function auto(){
  intv = setInterval(function(){
    c++; anim();
  },delay);
}
auto(); // kick auto slide

// PAUSE slider on mouseenter
$('#slider').on('mouseenter mouseleave',function(e){
  var evt = e.type=='mouseenter'? clearInterval(intv) : auto();
});

// CLICK dots to animate
$('#dots').on('click','.dot',function(){
  c=$(this).index(); anim();
});

Hope I commented well the code, ask if you have questions

Upvotes: 1

Kapil Sharma
Kapil Sharma

Reputation: 10417

Updated your JSFiddle with correct program

fiddle demo

Upvotes: 1

Chris
Chris

Reputation: 26878

Here's a demo I created which matches your requirements: little link. The jQuery/JavaScript is fully commented for reference, but if any part needs extra elaboration I'd be glad to explain more!

Upvotes: 3

Related Questions