JavaScript прекратить горизонтальную прокрутку на последнем div

Question

Привет. Я пытаюсь создать объект, похожий на карусель, в котором вы можете нажимать влево и вправо для просмотра между предыдущим и следующим изображениями, используя только HTML, CSS и JavaScript. Вот код:

const container = document.querySelector(".container");
const lefty = document.querySelector(".lefty");
let translate = 0;

lefty.addEventListener("click", function() {
  translate += 200;
  container.style.transform = "translateX(" + translate + "px" + ")";
});

const righty = document.querySelector(".righty");
righty.addEventListener("click", function() {
  translate -= 200;
  container.style.transform = "translateX(" + translate + "px" + ")";
});

.outer {
  overflow-x: hidden;
  overflow-y: hidden;
}

.container {
  display: flex;
  transition: transform .4s ease-in;
}

.inner {
  flex: 0 0 25%;
  height: 100px;
  margin: 10px;
}

.paddle {
  position: absolute;
  top: 50px;
  bottom: 0;
  width: 30px;
  height: 20px;
}

.lefty {
  left: 0;
  z-index: 1;
}

.righty {
  right: 0;
  z-index: 1;
}

<button class="lefty paddle" id="left-button"></button>
<div class="outer" id="content">
  <div class="container">
    <div class="inner" style="background:red"></div>
    <div class="inner" style="background:green"></div>
    <div class="inner" style="background:blue"></div>
    <div class="inner" style="background:yellow"></div>
    <div class="inner" style="background:orange"></div>
  </div>
</div>
<button class="righty paddle" id="right-button"></button>

Единственная проблема, с которой я столкнулся, заключается в том, что вы можете прокручивать последний цветовой блок Div. Возможно ли, что вы не можете прокрутить мимо первого и последнего div?

CodePen https://codepen.io/laurentkosc1990/pen/eYNXaxG

Answer 1

может быть, это будет работать для вас

const container = document.querySelector(".container");
const visibleWidth = container.offsetWidth; // visible width of container
const fullWidth = container.scrollWidth; //width of container incliding hidden part
const innerDivWidth = document.querySelector(".inner").offsetWidth+20;// margin 10px from both sides

const lefty = document.querySelector(".lefty");
let translate = 0;

lefty.addEventListener("click", function() {

  if(translate<0){
    translate += innerDivWidth;
    container.style.transform = "translateX(" + translate + "px" + ")";
  }

});

const righty = document.querySelector(".righty");
righty.addEventListener("click", function() {
  
  //here is my calculation, look carefully, you will get it

 if((translate + fullWidth) > visibleWidth){
   translate -= innerDivWidth;
   container.style.transform = "translateX(" + translate + "px" + ")";
  }

});

// btw translation rate should be according to inner div's width 
// otherwise last div will not show properly 

.outer {
  overflow-x: hidden;
  overflow-y: hidden;
}

.container {
  display: flex;
  transition: transform .4s ease-in;
}

.inner {
  flex: 0 0 25%;
  height: 100px;
  margin: 10px;
}

.paddle {
  position: absolute;
  top: 50px;
  bottom: 0;
  width: 30px;
  height: 20px;
}

.lefty {
  left: 0;
  z-index: 1;
}

.righty {
  right: 0;
  z-index: 1;
}

<button class="lefty paddle" id="left-button"></button>
<div class="outer" id="content">
  <div class="container">
    <div class="inner" style="background:red"></div>
    <div class="inner" style="background:green"></div>
    <div class="inner" style="background:blue"></div>
    <div class="inner" style="background:yellow"></div>
    <div class="inner" style="background:orange"></div>
  </div>
</div>
<button class="righty paddle" id="right-button"></button>

Answer 2

Существует множество подходов к решению этой проблемы. В этом примере я определяю максимальное и минимальное значение, которое вы можете преобразовать, и проверьте его, чтобы остановить карусель. Либо это могут быть фиксированные значения, либо они могут быть динамическими c, что позволяет свободно добавлять и удалять внутренние модули.

stati c

let minX = -400
let maxX = 0

dynamici c

//number of inner classes times length, negate the visible classes 
let minX = (inn.length * -200) + 600

const container = document.querySelector(".container");
const inn = document.getElementsByClassName('inner');
const lefty = document.querySelector(".lefty");
let translate = 0;

//let minX = -400
//number of inner classes times length, negate the visible classes 
let minX = (inn.length * -200) + 600
let maxX = 0

lefty.addEventListener("click", function() {
    if(translate >= maxX){
      return;
    }
    translate += 200;
    container.style.transform = "translateX(" + translate + "px" + ")";
});

const righty = document.querySelector(".righty");
righty.addEventListener("click", function() {
    if(translate <= minX){
      return;
    }
    translate -= 200;
    container.style.transform = "translateX(" + translate + "px" + ")";
});

.outer {

  overflow-x: hidden;
    overflow-y: hidden;

}

.container {
  display: flex;
  transition: transform .4s ease-in;
}

.inner {
  flex: 0 0 25%;
  height: 100px;
    margin:10px;
}
.paddle {
    position: absolute;
    top: 50px;
    bottom: 0;
    width: 30px;
    height:20px;
}
.lefty {
    left: 0;
  z-index:1;
}
.righty{
    right: 0;
  z-index:1;
}

<button class="lefty paddle" id="left-button"></button>
<div class="outer" id="content">
  <div class="container">
    <div class="inner" style="background:red"></div>
    <div class="inner" style="background:green"></div>
    <div class="inner" style="background:blue"></div>
    <div class="inner" style="background:yellow"></div>
    <div class="inner" style="background:orange"></div>
  </div>
</div>
<button class="righty paddle" id="right-button"></button>