1

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.

mmmmmm
  • 32,227
  • 27
  • 88
  • 117
Augus
  • 495
  • 1
  • 8
  • 24

3 Answers3

3

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!

Chris
  • 26,544
  • 5
  • 58
  • 71
  • I currently got this: http://jsfiddle.net/hpXfR/7/ with the help of @Kapil Sharma but im curious about your pagination part.. which i don't understand completely. Could you explain that a bit further? – Augus Sep 04 '12 at 11:12
  • @Augus I updated the demo with more comments + a commented paragraph in the end that explains how we got our `left` formula. Tell me if you need more details! :) – Chris Sep 04 '12 at 11:23
  • I learned alot from you example, very much appreciated. But in the end i tried the answer of @roko which works great. – Augus Sep 04 '12 at 12:04
1

Updated your JSFiddle with correct program

fiddle demo

Roko C. Buljan
  • 196,159
  • 39
  • 305
  • 313
Kapil Sharma
  • 10,135
  • 8
  • 37
  • 66
  • Cool thanks to you i now got this: http://jsfiddle.net/hpXfR/7/, im curious to the paganation part of @Abody97 answer, but you helpt me alot!. – Augus Sep 04 '12 at 11:10
1

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

Community
  • 1
  • 1
Roko C. Buljan
  • 196,159
  • 39
  • 305
  • 313