CODEWITHSUNDEEP
javascript
Person
Person

Reputation: 2269

How to stop slider on the last slide

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

Upvotes: 0

Views: 869

Answers (1)

Neji Soltani
Neji Soltani

Reputation: 1511

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>

Upvotes: 1

Related Questions