Слайдер с частичным просмотром пред и след слайда js

Question

Хочу сделать слайдер в котором по середине будет активный элемент, а по бокам части видны слайды пред. или след. сделал слайдер,который полность перелистывает слайд и оставляет только один элемент активный. прошу помощи слайдер вида

слайдер делал по видео, новичок в этом деле, прошу помощи

let items = document.querySelectorAll('.item');

let currentItem = 0;
let isEnable = true;

function changeCurrentItem(n) {
  currentItem = (n + items.length) % items.length;

}

function hideItem(direction) {
  isEnable = false;
  items[currentItem].classList.add(direction);
  items[currentItem].addEventListener('animationend', function() {
    this.classList.remove('active', direction);
  })
}

function showItem(direction) {
  items[currentItem].classList.add('next', direction);

  items[currentItem].addEventListener('animationend', function() {
    this.classList.remove('next', direction);
    this.classList.add('active');
    isEnable = true;
  })
}

function previousItem(n) {
  console.log(n)
  hideItem('to-right');
  changeCurrentItem(n - 1);
  showItem('from-left');
  console.log(n)
}

function nextItem(n) {
  hideItem('to-left');
  changeCurrentItem(n + 1);
  showItem('from-right');
}



document.querySelector('.control.left').addEventListener('click',
  function() {
    if (isEnable) {
      previousItem(currentItem)
      console.log(currentItem)
    }
  });

document.querySelector('.control.right').addEventListener('click',
  function() {
    if (isEnable) {
      nextItem(currentItem)
      console.log(currentItem)
    }
  });

.carousel {
  position: relative;
}

.slider {
  position: absolute;
  width: 100%;
  text-align: center;
}

.item {
  display: none;
  position: relative;
  margin: 0 30px;
  animation: 1s ease-in-out;
}

.item.active {
  display: block;
  margin: 0 30px;
}

.item-container {
  position: relative;
  width: 100%;
  overflow: hidden;
}

.next {
  display: block;
  position: absolute;
  top: 0;
  width: 100%;
}

.control {
  cursor: pointer;
  margin-right: 10px;
  position: absolute;
  top: 0;
  bottom: 0;
}

.control.left {
  left: 0;
  right: auto;
}

.control.right {
  left: auto;
  right: 0;
}

.to-left {
  display: block;
  animation-name: left;
}

.to-right {
  animation-name: right;
  animation-direction: reverse;
}

.from-left {
  animation-name: left;
  animation-direction: reverse;
}

.from-right {
  animation-name: right;
}

@keyframes left {
  from {
    left: 0;
  }
  to {
    left: -50%;
  }
}

@keyframes right {
  from {
    left: 50%;
  }
  to {
    left: 0;
  }
}

<div class="carousel">
  <div class="slider">
    <div class="item-container">
      <div class="item" style='border:1px solid #ccc;'>
        <img id="img_1" src="./images/Rectangle%2023.png" alt="Japan" class="image-slider">
      </div>
      <div class="item " style='border:1px solid #ccc;'>
        <img id="img_2" src="./images/Rectangle%2024.png" alt="USA" class="image-slider">
      </div>
      <div class="item active" style='border:1px solid #ccc;'>
        <img id="img_3" src="./images/Rectangle%2025.png" alt="USA" class="image-slider">
      </div>
    </div>
    <div class="control left">
      <div class="arrow left">&lt;</div>
    </div>
    <div class="control right">
      <div class="arrow right">&gt;</div>
    </div>
  </div>

</div>

БЛОГ НА HUSL

Слайдер с частичным просмотром пред и след слайда js

Ответы (0 шт):