Image Slider

saffslider.js

var currentSlide = 0;
var length = 0;
var transition = 1000;
var changeDelay = 5000;
var isLooping = true;
var timer;
var mainSlider;

// Hide Method
function hideImage(slider) {
  slider.find('.saffslider__slide').fadeOut();
};

// Show Method
function showImage(slider) {
  var slide = slider.find('.saffslider__slide').eq(currentSlide);
  slide.fadeIn(transition);
};

// Nav generation method
function generateNav(slider){
  slider.prepend( $( `<div class="saffslider__controls"></div>` ) );
  slider.find('.saffslider__controls').append($(`<div class="saffslider__left-button"><i class="fa fa-angle-left" aria-hidden="true"></i></div>`));
  slider.find('.saffslider__slide').each(function(){
    slider.find('.saffslider__controls').append($(`<div class="saffslider__point"></div>`));
  });
  slider.find('.saffslider__controls').append($(`<div class="saffslider__right-button"><i class="fa fa-angle-right" aria-hidden="true"></i></div>`));
};

// Rendering points method
function renderPoints(slider) {
  var points = slider.find('.saffslider__point').removeClass('selected');
  points.eq(currentSlide).addClass('selected');
};

// Change state method
function changeState(slider, direction) {
  hideImage(slider);
  if(direction == 'right'){
    currentSlide++;
    if(currentSlide > slider.find('.saffslider__slide').length-1)
      currentSlide = 0;
  }
  if(direction == 'left'){
    currentSlide--;
    if(currentSlide < 0)
      currentSlide = slider.find('.saffslider__slide').length-1;
  }
  renderPoints(slider);
  showImage(slider);
};

// Timer start/stop methods
function timerCreate(slider){
  this.x = setInterval(function(){
    changeState(slider,'right');
  }, changeDelay);
};
function stopTimer(timer) { // to be called when you want to stop the timer
  clearInterval(timer.x);
}

// Main initialization
(function( $ ){
  $.fn.myfunction = function(params) {
    mainSlider = this;
    transition = params.transition;
    changeDelay = params.changeDelay;
    isLooping = params.isLooping;
    generateNav(mainSlider);
    changeState(mainSlider);
    timer = new timerCreate(mainSlider);

    // Turn Left Click Event
    mainSlider.find('.saffslider__left-button').click(function(){
      changeState(mainSlider,'left');
      stopTimer(timer);
        if(isLooping)timer = new timerCreate(mainSlider);
    });

    // Turn Right Click Event
    mainSlider.find('.saffslider__right-button').click(function(){
      changeState(mainSlider,'right');
      stopTimer(timer);
        if(isLooping)timer = new timerCreate(mainSlider);
    });

    // Points Click Event
    mainSlider.find('.saffslider__point').click(function(){
      currentSlide = $(this).index()-1;
      changeState(mainSlider);
      stopTimer(timer);
        if(isLooping)timer = new timerCreate(mainSlider);
    });
  }; 
  
})( jQuery );