CODEWITHSUNDEEP
javascriptjquery
RandomJoe
RandomJoe

Reputation: 5

Converting a manual slideshow to automatic

I followed a tutorial and created a simple manual loop slideshow. I'm trying to make it so it changes the slide automatically even if the prev/next buttons aren't clicked. I tried a crude approach by setting a delay between automatic click events on the "next" button but for some reason it clicks it only once and stops. My js knowledge is very limited and can't figure it out, any input is appreciated. This is the script so far: 

$(function() {

  var ul = $(".slider ul");
  var slide_count = ul.children().length;
  var slide_width_pc = 100.0 / slide_count;
  var slide_index = 0;

  var first_slide = ul.find("li:first-child");
  var last_slide = ul.find("li:last-child");

  last_slide.clone().prependTo(ul);

  first_slide.clone().appendTo(ul);

  ul.find("li").each(function(indx) {
    var left_percent = (slide_width_pc * indx) + "%";
    $(this).css({"left":left_percent});
    $(this).css({width:(100 / slide_count) + "%"});
  });

  ul.css("margin-left", "-100%");

  $(".slider .prev").click(function() {
    console.log("prev button clicked");
    slide(slide_index - 1);
  });

  $(".slider .next").click(function() {
    console.log("next button clicked");
    slide(slide_index + 1);
  });

  function slide(new_slide_index) {

    var margin_left_pc = (new_slide_index * (-100) - 100) + "%";

    ul.animate({"margin-left": margin_left_pc}, 400, function() {

      if(new_slide_index < 0) {
        ul.css("margin-left", ((slide_count) * (-100)) + "%");
        new_slide_index = slide_count - 1;
      }
      else if(new_slide_index >= slide_count) {
        ul.css("margin-left", "-100%");
        new_slide_index = 0;
      }

      slide_index = new_slide_index

    });

  }

});

Upvotes: 0

Views: 99

Answers (2)

Louys Patrice Bessette
Louys Patrice Bessette

Reputation: 33933

Here is an approach to make it sliding automatically...
But if user clicks on prev/next, it holds the automatic feature for a defined "idle" time.

It need two lines added to your click handlers:

var autoEnabled = true;               // ADDED

$(".slider .prev").click(function() {
  console.log("prev button clicked");
  slide(slide_index - 1);
  autoEnabled = false;                // ADDED
  disabledCount = 0;                  // ADDED
});

$(".slider .next").click(function() {
  console.log("next button clicked");
  slide(slide_index + 1);
  autoEnabled = false;                // ADDED
  disabledCount = 0;                  // ADDED
});

And this to cyclically slide or check if it can re-enable itself.

// ----------------- Automatic sliding interval with "idle time" to re-enable on user click

var idleTime = 5000;        // Time without manual click to re-enable automatic sliding.
var autoSlideDelay = 1000;  // Time between each slide when automatic.
var disabledCount = 0;

var autoSlide = setInterval(function(){

  if(autoEnabled || disabledCount >= idleTime/autoSlideDelay ){
    disabledCount = 0;
    autoEnabled = true;
    slide(slide_index + 1);
  }else{
    disabledCount++;
  }
},autoSlideDelay);

Upvotes: 1

Todor Simeonov
Todor Simeonov

Reputation: 806

var break_auto_slide = false;
function auto_silde()
{
    if(break_auto_slide)
    {
        break_auto_slide = false;
        return;
    }
    slide(slide_index + 1);
    setTimeout(auto_silde,1000 /* time in ms*/);
}

setTimeout will call the function in a specified timeout in milliseconds.

Variable break_auto_slide - set it to true to stop the automatic slide. Next time the function is called it will return without setting a new timer and will reset this variable so auto mode can be turned on again.

Upvotes: 0

Related Questions