CODEWITHSUNDEEP
javascriptjqueryslider
Krystian
Krystian

Reputation: 987

make timeline-slider looping

I am wondering how to loop this auto-slide function? Its for this timeline here: https://bm-translations.de/#sprachrichtungen

I tried with if condition to check if next slide has items, but maybe because I am a beginner, its not working. 

function timeLineAutoPlay() {
  var current = 0;

  setInterval(function() {
    current++;
    var current_elem = $($('.events a')[current - 1]);

    if (current == 11) {
      timeLineAutoPlay();
    }

    $($('.events a')[current]).trigger('click');

    if ((current + 1) % 4 == 0) {
      $('.next').trigger('click');
    }
  }, 8000);
}

timeLineAutoPlay();

Slider is frome here: https://codyhouse.co/gem/horizontal-timeline/

2nd problem: If I click on a date, the next autoslide isnt the date after. Do you know how to adjust this code?

Tried this, but its not working:

timelineComponents['eventsWrapper'].on('click', 'a', function(event){
    current = items.length;
}

Upvotes: 0

Views: 652

Answers (2)

sphire
sphire

Reputation: 596

The modulo operator is useful for wrapping at a specific number and creating a loop:

Edit: Included example for manual slider control.
Edit 2: Fixed typo in function call

// The interval id for the auto-slider if currently running.
var intervalId;
// The current slide index
var current = 0;
// Query document for the DOM nodes
var items = $('.events a');

// Clicks on `a` will bubble up to their `li` element and then to `div.events`.
// We can use this to listen to the click on li and then see which one was
// targeted.
$('.events').on('click', 'li', function(event) {
  // If the third `li` was clicked, there are 2 in front of it so 2 is the index
  // of the item that was clicked.
  var count = $(this).prevAll('li').length;

  // Update the current item based on the clicked element.
  current = count;

  // Reset the interval so the next slide does not occur immediately after the
  // user has clicked.
  if (intervalId != null) {
    // Clear previous auto-play
    clearInterval(intervalId);
    // And start a new one which will first trigger 8000ms from now.
    intervalId = timeLineAutoPlay();
  }
});

function timeLineAutoPlay() {
  // Return the interval id so that we can can cancel it later.
  return setInterval(function() {
    // Increment `current` but wrap at `items.length`, thus looping through the
    // list of items.
    //
    // E.g. for 4 items; items.length === 4:
    //   current : 0 -> 1 -> 2 -> 3 -> 0 -> 1 -> ...
    current = (current + 1) % items.length;

    // Get the item at the current index
    var item = items.eq(current);

    // This would lead to multiple interval loops being spawned whenever we
    // reach 11. That seems unintentional.
    //
    // if (current == 11) {
    //   timeLineAutoPlay();
    // }

    item.trigger('click');
  }, 8000);
}

// Start the initial auto-slide and store the id
intervalId = timeLineAutoPlay();

Upvotes: 1

Thaw
Thaw

Reputation: 861

Something like the following:

setInterval(function(){
    var current_elem = $($('.events a')[current]);

    if(!current_elem.hasClass("selected")){
        $(".events a").each( function(index, elem) {
            if($(this).hasClass("selected")){
                current = index;
            }   
        });  
    }

    current++;

    if(current >= $('.events a').length) {
        current = 0;
    }

    $($('.events a')[current]).trigger('click');
}, 7000);

Upvotes: 0

Related Questions