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

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.

<div class="slider">
    <ul class="js__slider__images slider__images">
      <li class="slider__images-item"><img class="slider__images-image" src="http://placeimg.com/800/450/animal" /></li>
      <li class="slider__images-item"><img class="slider__images-image" src="http://placeimg.com/800/450/sport" /></li>
      <li class="slider__images-item"><img class="slider__images-image" src="http://placeimg.com/800/450/nature" /></li>
      <li class="slider__images-item"><img class="slider__images-image" src="http://placeimg.com/800/450/people" /></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>
</div>

CSS

Add CSS on page for styling font and images slider

<style>
.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; }
 
body {
  background: #EF629F;
  background: linear-gradient(to right, #EF629F, #EECDA3);
  font-family: Avenir, 'Proxima Nova', sans-serif;
  font-weight: normal;
  line-height: 1.5;
}
 
ul, ol, div {
  margin: 0;
  padding: 0;
}
 
img { max-width: 100%; }
 
h1 {
  color: #fff;
  font-size: 18px;
  font-weight: normal;
  letter-spacing: 4px;
  text-transform: uppercase;
}
 
.wrapper { padding: 30px; margin-top:150px; }
 
.header {
  margin: auto;
  max-width: 800px;
  text-align: center;
  color: #fff;
}
 
.header a { color: #fff; }
 
.slider {
  margin: 30px auto 0;
  padding: 30px;
  background: white;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
}
</style>



JS

Now add jquery core library because script dependent on jquery

<script  src="https://code.jquery.com/jquery-3.2.1.min.js" integrity="sha256-hwg4gsxgFZhOsEEamdOYGBf13FyQuiTwlAQgxVSNgt4="   crossorigin="anonymous"></script>

Create pager list items

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

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.