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.
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.