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 for a real life project and its been fun. jQuery **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 (jQuery) JavaScript $(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?
