How to stop slider on the last slide

Question

I'm trying to make a carousel and I'm kind of stuck on stopping it from scrolling when the last slide is reached.

So far I have this JS code

var width = 130; //width of one slide
var position = 0;


var carousel = document.getElementById('carousel');
var list = carousel.querySelector('ul');

carousel.querySelector('.prev').onclick = function() {
  position = Math.min(position + width, 0)
  console.log(position)
  list.style.marginLeft = position + 'px';
};

carousel.querySelector('.next').onclick = function() {
  position = position - width
  console.log(position)
  list.style.marginLeft = position + 'px';
};

So I'm taking width of one slide and based on that change margin of container.

When scrolling left I solved the problem by setting position to 0 with Math.min .This way when I 'm on the first slide it doesn`t scroll left.

But I'm not sure how to do the same when on my last slide.

Link to working exmaple

Answer 1

Here's what you want , I just added a test comparing the position and the size of all the sliders.

 var width = 130; var carousel = document.getElementById('carousel'); var list = carousel.querySelector('ul'); var position = 0; var carouselwidth = document.getElementsByClassName('gallery')[0].offsetWidth; //number of silder var nbslider = list.getElementsByTagName("li").length; //number of silder per page var nbsliderp = carouselwidth / width console.log(nbsliderp); //size of silders per page var szsliderp = nbsliderp * width; carousel.querySelector('.prev').onclick = function() { position = Math.min(position + width, 0) console.log(position) list.style.marginLeft = position + 'px'; }; carousel.querySelector('.next').onclick = function() { //console.log((position - szsliderp) + (nbslider * width)) if (((position - szsliderp) + (nbslider * width)) > 0) { position = position - width //console.log(position) list.style.marginLeft = position + 'px'; } }; 

 body { padding: 10px; } .carousel { position: relative; width: 398px; padding: 10px 40px; background: #eee; } .carousel img { width: 130px; height: 130px; margin-right: 2px; display: block; } .arrow { position: absolute; top: 60px; padding: 0; font-size: 24px; line-height: 24px; color: #444; display: block; } .arrow:focus { outline: none; } .arrow:hover { background: #ccc; cursor: pointer; } .prev { left: 7px; } .next { right: 7px; } .gallery { width: 390px; overflow: hidden; } .gallery ul { height: 130px; width: 9999px; margin: 0; padding: 0; list-style: none; transition: margin-left 250ms; font-size: 0; } .gallery li { display: inline-block; } 

 <div id="carousel" class="carousel"> <button class="arrow prev"></button> <div class="gallery"> <ul class="images"> <li><img src="https://cdn.houseplans.com/product/o2d2ui14afb1sov3cnslpummre/w1024.jpg?v=15"></li> <li><img src="https://cdn.houseplans.com/product/o2d2ui14afb1sov3cnslpummre/w1024.jpg?v=15"></li> <li><img src="https://cdn.houseplans.com/product/o2d2ui14afb1sov3cnslpummre/w1024.jpg?v=15"></li> <li><img src="https://cdn.houseplans.com/product/o2d2ui14afb1sov3cnslpummre/w1024.jpg?v=15"></li> <li><img src="https://cdn.houseplans.com/product/o2d2ui14afb1sov3cnslpummre/w1024.jpg?v=15"></li> <li><img src="https://cdn.houseplans.com/product/o2d2ui14afb1sov3cnslpummre/w1024.jpg?v=15"></li> </ul> </div> <button class="arrow next">></button> </div>