Beautiful Simple lightweight slider using CSS and jQuery. Demo and Download the zip (*.zip).
Lightweighted jQuery slider
HTML Snippet
<div class="wrapper">
<header class="header">
<h1>Really simple jQuery slider</h1>
</header>
<div class="slider">
<ul class="js__slider__images slider__images">
<li class="slider__images-item"><img class="slider__images-image" src="https://unsplash.it/800/450?image=830" /></li>
<li class="slider__images-item"><img class="slider__images-image" src="https://unsplash.it/800/450?image=1028" /></li>
<li class="slider__images-item"><img class="slider__images-image" src="https://unsplash.it/800/450?image=981" /></li>
<li class="slider__images-item"><img class="slider__images-image" src="https://unsplash.it/800/450?image=1026" /></li>
<li class="slider__images-item"><img class="slider__images-image" src="https://unsplash.it/800/450?image=741" /></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>
<footer class="footer">
<p>For when 'really simple' is all you need</p>
</footer>
</div>
CSS Snippet
body {
margin: 0;
position: relative;
}
.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 {
margin-top: 30px;
color: #fff;
font-size: 18px;
font-weight: normal;
letter-spacing: 4px;
text-transform: uppercase;
}
.wrapper {
padding: 30px;
}
.header,
.footer {
margin: auto;
max-width: 800px;
text-align: center;
color: #fff;
}
.header a,
.footer a {
color: #fff;
}
.footer {
margin-top: 30px;
}
.slider {
margin: 30px auto 0;
padding: 30px;
background: white;
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
}
jQuery Snippet
// create pager list items
var sliderImage = $('.slider__images-image');
sliderImage.each(function (index) {
$('.js__slider__pagers').append('<li>'+(index+1)+'</li>');
});
// set up vars
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();
}
});
// 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();
});
// slider timing
function sliderTiming() {
sliderTarget = $(sliderPagersActive).index();
sliderTarget === lastElem ? sliderTarget = 0 : sliderTarget = sliderTarget+1;
sliderResponse(sliderTarget);
}
// slider autoplay
var timingRun = setInterval(function() {
sliderTiming();
}, sliderSpeed);
function resetTiming() {
clearInterval(timingRun);
timingRun = setInterval(function() {
sliderTiming();
}, sliderSpeed);
}
Find the demo below
See the Pen Really simple jQuery slider by Ben Wellby (@benwellby) on CodePen.
Leave a Reply