Really Simple Plain Responsive Image Slider In CSS HTML Jquery Without Image Slider Plugin

by

In this post I am going to share Really Simple Plain Responsive Image Slider In CSS HTML Jquery Without Image Slider Plugin. If you are not familiar with any third party image slider plugin then you can create your own image slider/carousel from scratch with full featured common function like paging/prev/next options.
image-slider


Create Really Simple Plain Responsive Image Slider In CSS HTML Jquery

Follow below steps to create simple responsive image slider/carousel.

HTML

Below is the sample images with controls like paging next and previous you can copy following html code and replace with your own images.


    
    
      
    • 
      
    • 
      
    • 
      
    • 
    

    
 Prev
      
    
      

      Next

CSS

Add CSS on page for styling font and images slider



JS

Now add jquery core library because script dependent on jquery

Create pager list items

var sliderImage = $('.slider__images-image');
sliderImage.each(function (index) {
    $('.js__slider__pagers').append('
  • '+(index+1)+'
    • ');
});

    Set up variables

    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();
    }
});

    Configure 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();
});

    Add Slider timing

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

    Add slider autoplay

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

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

    See live demo and download source code.

    DEMO | DOWNLOAD

    Follow Official Repository for future updates.



    Published by Rohit