How Neat?

I’m working on a site for one of my clients and I implemented something I feel is cool and thought I should share.It’s my first time working with so much jQuery for a real life project and its been fun.

**What I did:**I created A slider that looks like this

(on a desktop)

(on mobile)

How I did it:(HTML)

<!--A container div--><div clas='slider'><!--A LIST--><ul class='slides'><!--IMAGES--><li class='slide'> <img class='slide_images' src='image1' alt=''></li><li class='slide'><img class='slide_images' src='image2' alt=''></li><li clas='slide'><img class='slide_images' src='image3' alt=''></li></li><li clas='slide'><img class='slide_images' src='image4' alt=''></li></ul>

</div>

(CSS)

/*CONTAINER DIV */.slider {width: 100%;/* full width for a desktop*/height: 600px;overflow: hidden;

}

/* LIST STYLING */.slides {width: 400%; /* Because we have four images */height: 100%;margin: 0;padding: 0;}

/* CHILD LIST */.slide {list-style-type: none;float: left;height: 619px;display: block;position: relative;width: 25%; /* Beacause 25% of 400% is 100% == full width */}

/* EACH IMAGE */

.slide_images {width: 100%;height: 100%;z-index: -1;}

And the JavaScript (jQuery)

$(function(){

const slider = $('.slider');

const slides = slider.find('.slides');

const slide = slides.find('li');

const sliderWidth = $(window).width();

const slidesWidth = $(slides).width() - sliderWidth;

let sliderLength = 0;

const slideShow = () =>{

$(slides).animate({'margin-left': '-=' +sliderWidth}, 2000, () => {

sliderLength++;

if (sliderLength === 4) {

$(slides).css('margin-left', 0);

sliderLength = 0;

}

}

let interval;

function playSlideShow () {

interval = setInterval(slideShow, 5000);

}

playSlideShow();

});

How do you make your image slider responsive?