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

Responsive Image

In this optional association I am going to share Really Simple Plain Responsive Image Slider In CSS HTML Jquery Without Image Slider Plugin. If you are not au fait bearing in mind any third party image slider plugin later you can make your own image slider/carousel from scuff considering full featured common be lithe subsequent to paging/prev/adjacent-door options.

Create Really Simple Plain Responsive Image Slider In CSS HTML Jquery

Follow deadened steps to create easy lithe image slider/carousel.

HTML

Below is the sample images taking into account than controls later paging adjacent and previous you can copy as soon as html code and replace furthermore than 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 as regards 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 go to jquery core library because script dependent on the subject of 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 happening 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 going on first slide

$(sliderPagers).first().addClass('active');
$(sliderImagesItem).hide().first().show();

Transition bureau

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

Leave a Reply