CassDucheseau
3/9/2017 - 8:40 PM

Image Slider

Image Slider

      /* Event Slider */
      var currentIndex = 0,
        items = $('.event-slider__container .event-slider__item'),
        toggle = $('.event-slider__toggles ul li'),
        itemAmt = items.length;

      function cycleItems() {
        var item = $('.event-slider__container .event-slider__item').eq(currentIndex);
        var toggle = $('.event-slider__toggles ul li').eq(currentIndex);
        item.addClass('active');
        toggle.addClass('active');
      }

      var autoSlide = setInterval(function() {
        items.removeClass('active');
        toggle.removeClass('active');
        currentIndex += 1;
        if (currentIndex > itemAmt - 1) {
          currentIndex = 0;
        }
        cycleItems();
      }, 6000);

      $('.toggle__right').on('click', function(event) {
        event.preventDefault();
        clearInterval(autoSlide);
        items.removeClass('active');
        toggle.removeClass('active');
        currentIndex += 1;
        if (currentIndex > itemAmt - 1) {
          currentIndex = 0;
        }
        cycleItems();
      });

      $('.toggle__left').on('click', function(event) {
        event.preventDefault();
        clearInterval(autoSlide);
        items.removeClass('active');
        toggle.removeClass('active');
        currentIndex -= 1;
        if (currentIndex < 0) {
          currentIndex = itemAmt - 1;
        }
        cycleItems();
      });


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

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

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

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