Simple jQuery lightweight slider

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>

{loadposition position-9}

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.

Download