CODEWITHSUNDEEP
javascriptjqueryhtmlcssslideshow
RachJenn
RachJenn

Reputation: 119

Create an autoscroll slider

I've found this accordion slider which fits my needs, see demo, but it doesn't start sliding automatically. 

$(document).ready(function(){

  activePanel = $("#accordion div.panel:first");
  $(activePanel).addClass('active');

  $("#accordion").delegate('.panel', 'click', function(e){
    if( ! $(this).is('.active') ){
        $(activePanel).animate({width: "44px"}, 300);
        $(this).animate({width: "848px"}, 300);
        $('#accordion .panel').removeClass('active');
        $(this).addClass('active');
        activePanel = this;
    };
  });
});

and here's all the code on jsfiddle if it helps (although even after changing the widths it's not displaying right): http://jsfiddle.net/wamcbrf3/

I've tried adding this which hasn't helped: 

autoPlay: {
   enabled: true,
   delay: 1500
}

I'm a jquery newbie so any pointers would be much appreciated, thanks

Upvotes: 2

Views: 159

Answers (1)

Alvaro Montoro
Alvaro Montoro

Reputation: 29735

I have fixed some missing HTML and the widths so I could see the slider correctly in my screen (reduced all widths by 400px). Still there were a couple of things missing from the fiddle:

  • You didn't include jQuery.
  • There was only one panel, so no possible sliding.

After fixing these 2 things, the slider is working fine (you can see it here: http://jsfiddle.net/wamcbrf3/1/)

For the autoplay, I have created a small function:

function animatePanels() {
    // select the next active panel
    nextPanel = $("#accordion div.panel.active").next();
    // if the length is 0: we were at the last panel, so select the first one instead
    if (nextPanel.length == 0) { nextPanel = $("#accordion div.panel:first"); } 
    // click on the panel to trigger the animation
    $(nextPanel).click();
}

Then, you just need to call the function at the end $(document).ready(...) with a setInterval to have the animation start automatically (change 2500 for the time that you want in milliseconds):

setInterval("animatePanels()", 2500);

You can see a running example on this jsfiddle: http://jsfiddle.net/wamcbrf3/4/

Upvotes: 2

Related Questions