cassandra-d
3/9/2017 - 8:40 PM

Image Slider

Image Slider

  // Create variables
  var currentIndex = 0,
    items = $('.slider__container .slider__item'),
    toggle = $('.slider__toggles ul li'),
    itemAmt = items.length;
  
  // Create cycling function
  function cycleItems() {
    var item = $('.slider__container .slider__item').eq(currentIndex);
    var toggle = $('.slider__toggles ul li').eq(currentIndex);
    item.addClass('active');
    toggle.addClass('active');
  }
  
  // Add this auto slide function if you would like your slides to have a timed auto slide
  var autoSlide = setInterval(function() {
    items.removeClass('active');
    toggle.removeClass('active');
    currentIndex += 1;
    if (currentIndex > itemAmt - 1) {
      currentIndex = 0;
    }
    cycleItems();
  }, 6000);
  
  // Right click function
  $('.toggle__right').on('click', function(event) {
    event.preventDefault();
    clearInterval(autoSlide); // Remove this line if no auto slide
    items.removeClass('active');
    toggle.removeClass('active');
    currentIndex += 1;
    if (currentIndex > itemAmt - 1) {
      currentIndex = 0;
    }
    cycleItems();
  });
  
  // Left click function
  $('.toggle__left').on('click', function(event) {
    event.preventDefault();
    clearInterval(autoSlide); // Remove this line if no auto slide
    items.removeClass('active');
    toggle.removeClass('active');
    currentIndex -= 1;
    if (currentIndex < 0) {
      currentIndex = itemAmt - 1;
    }
    cycleItems();
  });


  /* Toggles */
  $('.slider__toggles ul li').on('click', function(event){
    event.preventDefault();
    var slide = $(this).attr('data-slide');

    /* Remove class active */
    $('.slider__toggles ul li').removeClass('active');
    $('.slider__container .slider__item').removeClass('active');

    /* Add class active to this toggle and the event that it is associated with */
    $(this).addClass('active');
    $('.slider__container .slider__item[data-slide='+slide+']').addClass('active');

    /* Change current index to this toggle/event */
    currentIndex = slide - 1;
    cycleItems();
  });