如何使用下一张和上一张图片制作轮播？

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

欢迎来到 Stack Overflow。首先，您应该提供您已经尝试过的代码，以便我们在您遇到困难时帮助您。

在这种情况下，我明白你在寻找什么，我建议你使用 "Slick slider" 插件来实现这一点。

这里是codepen link 供您查看结果: Solution link

在 JS 中保持此设置：

centerMode: true

如何使用下一张和上一张图片制作轮播？

How can I make a carousel with the next and previous image?

html

css

jquery

responsive