Javascript 单击时，swiper.js“自定义上一个和下一个”按钮不起作用

我已经为“上一个”和“下一个”创建了自定义箭头。但当我点击任何一个按钮时，它都不会移动到下一张或上一张幻灯片。我是不是遗漏了什么。我在文件里也没找到任何东西。

---

如何实现这一点，因为我到处都在搜索，但没有找到解决方案。希望从这里出发。

您不需要在

中嵌套两次导航道具：

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

body {
  background: #fff;
  font-family: Helvetica Neue, Helvetica, Arial, sans-serif;
  font-size: 14px;
  color: #000;
  margin: 0;
  padding: 0;
}

.swiper-container {
  position: relative;
  width: 100%;
  padding-top: 50px;
  padding-bottom: 150px;
}

.swiper-slide {
  width: 180px;
  height: 180px;
  margin: 0 30px;
}

img {
  width: 100%;
  height: 100%;
  border-radius: 50%;
}

.swiper-slide-active .round-item {
  opacity: 1;
  transform: scale(1.24);
  margin-top: 20px;
}

.round-item {
  width: 100%;
  height: 100%;
  opacity: 0.2;
  box-sizing: border-box;
  overflow: hidden;
  margin-top: 25px;
}

.swiper-container-3d .swiper-slide-shadow-left,
.swiper-container-3d .swiper-slide-shadow-right {
  background-image: none !important;
}

.review-swiper-button-next {
  position: absolute;
  width: 20px;
  height: 20px;
  background-image: url(./images/next.png);
  background-repeat: no-repeat;
  background-size: 100% auto;
  background-position: center;
  right: 97px;
  top: 0;
  cursor: pointer;
}

.review-swiper-button-prev {
  position: absolute;
  width: 20px;
  height: 20px;
  background-image: url(./images/previous.png);
  background-repeat: no-repeat;
  background-size: 100% auto;
  background-position: center;
  left: 27px;
  top: 0;
  cursor: pointer;
}

航行={{
nextEl:“.下一步查看开关按钮”，
prevEl:“.查看开关按钮prev”，
}}

您是否尝试将SlideContent div添加到Swiper div中？

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

body {
  background: #fff;
  font-family: Helvetica Neue, Helvetica, Arial, sans-serif;
  font-size: 14px;
  color: #000;
  margin: 0;
  padding: 0;
}

.swiper-container {
  position: relative;
  width: 100%;
  padding-top: 50px;
  padding-bottom: 150px;
}

.swiper-slide {
  width: 180px;
  height: 180px;
  margin: 0 30px;
}

img {
  width: 100%;
  height: 100%;
  border-radius: 50%;
}

.swiper-slide-active .round-item {
  opacity: 1;
  transform: scale(1.24);
  margin-top: 20px;
}

.round-item {
  width: 100%;
  height: 100%;
  opacity: 0.2;
  box-sizing: border-box;
  overflow: hidden;
  margin-top: 25px;
}

.swiper-container-3d .swiper-slide-shadow-left,
.swiper-container-3d .swiper-slide-shadow-right {
  background-image: none !important;
}

.review-swiper-button-next {
  position: absolute;
  width: 20px;
  height: 20px;
  background-image: url(./images/next.png);
  background-repeat: no-repeat;
  background-size: 100% auto;
  background-position: center;
  right: 97px;
  top: 0;
  cursor: pointer;
}

.review-swiper-button-prev {
  position: absolute;
  width: 20px;
  height: 20px;
  background-image: url(./images/previous.png);
  background-repeat: no-repeat;
  background-size: 100% auto;
  background-position: center;
  left: 27px;
  top: 0;
  cursor: pointer;
}

 <Swiper>
   navigation={{
     nextEl: '.review-swiper-button-next',
     prevEl: '.review-swiper-button-prev',
   }}
 <Swiper />