Simple Plain Responsive Image Slider In jQuery

A very simple yet full-featured jQuery responsive image slider/carousel that makes it possible to fade through a list of images with pager/prev/next controls.

How to use it:

1. Create the image list and slider controls on the web page.

<div class="slider">  

  <ul class="js__slider__images slider__images">
    <li class="slider__images-item">
      <img class="slider__images-image" src="1.jpg">
    </li>
    <li class="slider__images-item">
      <img class="slider__images-image" src="2.jpg">
    </li>
    <li class="slider__images-item">
      <img class="slider__images-image" src="3.jpg">
    </li>
    <li class="slider__images-item">
      <img class="slider__images-image" src="4.jpg">
    </li>
    <li class="slider__images-item">
      <img class="slider__images-image" src="5.jpg">
    </li>
  </ul>

  <div class="slider__controls">
    <span class="slider__control js__slider__control--prev slider__control--prev">Prev</span>
    <ol class="js__slider__pagers slider__pagers"></ol>
    <span class="slider__control js__slider__control--next slider__control--next">Next</span>
  </div>

</div>

2. The core CSS styles for the image slider.

.slider { max-width: 800px; }

.slider__images {
  opacity: 0;
  visibility: hidden;
  position: relative;
  top: 0px;
  left: 0px;
  list-style-type: none;
  transition: opacity .4s ease-in, visibility .4s ease-in;
}

.slider__images.loaded {
  opacity: 1;
  visibility: visible;
}

.slider__images-item {
  position: absolute;
  top: 0px;
  left: 0px;
}

.no-js .slider__images-item:first-of-type { position: relative; }

.no-js .slider__images-item:not(:first-of-type) { display: none !important; }

.slider__images-image { display: block; }

.slider__controls {
  margin-top: 30px;
  user-select: none;
  text-align: center;
}

.slider__control {
  display: inline-block;
  color: #829995;
  cursor: pointer;
}

.slider__control--prev { margin-right: 10px; }

.slider__control--next { margin-left: 10px; }

.slider__pagers {
  display: inline-block;
  margin: 0;
  padding: 0;
  list-style-type: none;
}

.slider__pagers li {
  display: inline-block;
  margin: 0 5px;
  cursor: pointer;
  color: #829995;
  padding: 0 10px;
}

.slider__pagers li.active { color: #333; }

3. Place the needed jQuery JavaScript library at the end of the html document.

<script src="//code.jquery.com/jquery-1.12.4.min.js"></script> 

4. The main JavaScript (jquery script) to enable the image slider.

// create pager list items
var sliderImage = $('.slider__images-image');

sliderImage.each(function (index) {
    $('.js__slider__pagers').append('<li>'+(index+1)+'</li>');
});

// set up vars
var sliderPagers       = 'ol.js__slider__pagers li',
    sliderPagersActive = '.js__slider__pagers li.active',
    sliderImages       = '.js__slider__images',
    sliderImagesItem   = '.slider__images-item',
    sliderControlNext  = '.slider__control--next',
    sliderControlPrev  = '.slider__control--prev',
    sliderSpeed        = 5000,
    lastElem           = $(sliderPagers).length-1,
    sliderTarget;

// add css heigt to slider images list
function checkImageHeight() {
    var sliderHeight = $('.slider__images-image:visible').height(); 
    $(sliderImages).css('height', sliderHeight+'px');
};

sliderImage.on('load', function() {
    checkImageHeight();
    $(sliderImages).addClass('loaded')
});
$(window).resize(function(){
    checkImageHeight();
});

// set up first slide
$(sliderPagers).first().addClass('active');
$(sliderImagesItem).hide().first().show();

// transition function
function sliderResponse(sliderTarget) {
    $(sliderImagesItem).fadeOut(300).eq(sliderTarget).fadeIn(300);
    $(sliderPagers).removeClass('active').eq(sliderTarget).addClass('active');
}

// pager controls
$(sliderPagers).on('click', function() {
    if ( !$(this).hasClass('active') ) {
        sliderTarget = $(this).index();
        sliderResponse(sliderTarget);
        resetTiming();
    }
});

// next/prev controls
$(sliderControlNext).on('click', function() {
    sliderTarget = $(sliderPagersActive).index();
    sliderTarget === lastElem ? sliderTarget = 0 : sliderTarget = sliderTarget+1;
    sliderResponse(sliderTarget);
    resetTiming();
});
$(sliderControlPrev).on('click', function() {
    sliderTarget = $(sliderPagersActive).index();
    lastElem = $(sliderPagers).length-1;
    sliderTarget === 0 ? sliderTarget = lastElem : sliderTarget = sliderTarget-1;
    sliderResponse(sliderTarget);
    resetTiming();
});

// slider timing
function sliderTiming() {
    sliderTarget = $(sliderPagersActive).index();
    sliderTarget === lastElem ? sliderTarget = 0 : sliderTarget = sliderTarget+1;
    sliderResponse(sliderTarget);
}

// slider autoplay
var timingRun = setInterval(function() {
    sliderTiming();
}, sliderSpeed);

function resetTiming() {
    clearInterval(timingRun);
    timingRun = setInterval(function() {
      sliderTiming();
    }, sliderSpeed);
}

---

This awesome jQuery plugin is developed by benwellby. For more Advanced Usages, please check the demo page or visit the official website.