Simple Slider

just a simple slider

by Glynne Turner

HTML

<section class="splash">
<div id="img0" class="active splash-img" style="background-image:url( https://www.aquatint.co.uk/wp-content/uploads/2020/04/https___images.prismic.io_aquatint_4dddb86bc0ccc9cbb0c37e1d7ceb671c8872effc_promotional-items.jpg)" data-img="0"> </div>

<div id="img1"  class=" hide  splash-img" style="background-image:url( https://www.aquatint.co.uk/wp-content/uploads/2020/04/https___images.prismic.io_aquatint_9f151ce2143b640bbda2c6cb6d5b3fa751ee4ee3_promotionalitems.jpg)" data-img="1"> </div>

<div id="img2"  class=" hide  splash-img" style="background-image:url( https://www.aquatint.co.uk/wp-content/uploads/2020/04/https___images.prismic.io_aquatint_570a111f5461bb1c29c63ea53380cf14473e8ace_cambridgeaudio.jpg)" data-img="2"> </div>
</section>

CSS

*{padding:0; margin:0}
 .splash{height:40vh; width:100vw; overflow:hidden; min-height:100px}
 
 .splash-img{ width:100%w;height:100%;  top:0; left:0; background-size: cover; background-position:center}
 .hide {display:none}

JavaScript

var limit = 3
function theslider(){
	active = parseInt($('.active').attr('data-img'));
  next = parseInt(active + 1);
  if(next==limit){next =0}
   
   $('#img'+active).fadeOut(1000).removeClass('active');
   $('#img'+next).fadeIn(1000).addClass('active');
 setTimeout(function(){ theslider(); }, 3000);

}
$(document).ready(function(){
 setTimeout(function(){ theslider(); }, 3000);
   
})