Как я могу сделать карусель со следующим и предыдущим изображением?

Question

Фокусировка основного изображения следующим и предыдущим изображениями в небольшом представлении.

Answer 1

Это может быть легко достигнуто (без jQuery) следующим образом:

const images = [
  "https://images.theconversation.com/files/304244/original/file-20191128-178107-9wucox.jpg?ixlib=rb-1.1.0&q=45&auto=format&w=496&fit=clip",
  "https://bigcats.be/images/resized/750x-header-cat.jpg",
  "https://cdn.the-scientist.com/assets/articleNo/66820/aImg/34883/bird-article-s.png"
];

const left = document.getElementById("carousel-left");
const middle = document.getElementById("carousel-middle");
const right = document.getElementById("carousel-right");

let currentIndex = 0;

function focusImage() {
  const leftSrc = currentIndex - 1 < 0 ? images.length -1 : currentIndex -1;
  const middleSrc = currentIndex;
  const rightSrc = currentIndex + 1 >= images.length ? 0 : currentIndex + 1;
  left.src = images[leftSrc];
  middle.src = images[middleSrc];
  right.src = images[rightSrc];
}

function previous() {
  currentIndex = currentIndex - 1 < 0 ? images.length - 1 : currentIndex -1;
  focusImage();
}

function next() {
  currentIndex = currentIndex + 1 >= images.length ? 0 : currentIndex +1;
  focusImage();
}

focusImage();

left.addEventListener("click", previous);
right.addEventListener("click", next);

#carousel-container {
  width: 100%;
  height: 250px;
  background-color: lightgray;
  display: flex;
  flex-direction: row;
  justify-content: space-around;
}

img {
  border: 1px solid;
}

.carousel-side {
  width: 100px;
  height: 100px;
  margin-top: 75px;
}

#carousel-middle {
  width: 200px;
  height: 200px;
  margin-top: 25px;
}

<div id="carousel-container">
  <img id="carousel-left" class="carousel-side">
  <img id="carousel-middle">
  <img id="carousel-right" class="carousel-side">
</div>

<button onclick="previous()">previous</button>
<button onclick="next()">next</button>

Answer 2

Добро пожаловать в переполнение стека. Прежде всего, вы должны представить код, который вы уже пробовали для нас, чтобы помочь вам, когда вы застряли в чем-то.

Так как в этом случае я понял, что вы ищете, я предлагаю вам использовать плагин «Slick slider» для достижения этой цели.

Вот ссылка на кодовую ручку, чтобы проверить результат : Ссылка на решение

Оставьте этот параметр включенным в JS:

centerMode: true