javascript - Swiper Slider 将所有幻灯片放在一张幻灯片中

Question

我按照文档设置了 Swiper Slider，每张幻灯片都像幻灯片一样滑动。

<div class="swiper-container">
    <div class="swiper-wrapper">
        <div class="swiper-slide">Slide 1</div>
        <div class="swiper-slide">Slide 2</div>
        <div class="swiper-slide">Slide 3</div>
    </div>
</div> 


var mySwiper = new Swiper('.swiper-container', {
    direction: 'horizontal',
    slidesPerView: 1,
});

我还在 CodePen 上测试了它，结果相同，所以我知道这不是我的项目中的内容:https://codepen.io/DasRollo/pen/YzzMrgP

有人可以复制这个吗？

Answer 1

在您的 codepen 中，您忘记包含插件正常运行所需的 css。不完全确定这是否是您的意思，但如果是这样，请尝试下面的代码。

var mySwiper = new Swiper('.swiper-container', {
  direction: 'horizontal',
  slidesPerView: 1,
});

.swiper-slide {
  padding: 2em;
  border: 1px solid #ccc;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/Swiper/4.5.1/js/swiper.min.js"></script>
<link href="https://unpkg.com/swiper/css/swiper.min.css" rel="stylesheet"/>
<div class="swiper-container">
  <!-- Additional required wrapper -->
  <div class="swiper-wrapper">
      <!-- Slides -->
      <div class="swiper-slide">Slide 1</div>
      <div class="swiper-slide">Slide 2</div>
      <div class="swiper-slide">Slide 3</div>

  </div>
  <!-- If we need pagination -->
  <div class="swiper-pagination"></div>

  <!-- If we need navigation buttons -->
  <div class="swiper-button-prev"></div>
  <div class="swiper-button-next"></div>

  <!-- If we need scrollbar -->
  <div class="swiper-scrollbar"></div>
</div>