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.
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.
|
CSS
Add CSS on page for styling font and images slider
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(' |
‘);
});
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.
Follow Official Repository for future updates.
