javascript - Swiper js 自动播放 slider

标签 javascript html css swiper.js

我有自动播放 Swiper js slider ,默认情况下一次显示一张幻灯片,我需要一次显示三张幻灯片(或图像),请告诉我如何调整它。

 <!-- Swiper -->
    <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 class="swiper-slide">Slide 4</div>
  <div class="swiper-slide">Slide 5</div>
  <div class="swiper-slide">Slide 6</div>
  <div class="swiper-slide">Slide 7</div>
  <div class="swiper-slide">Slide 8</div>
  <div class="swiper-slide">Slide 9</div>
  <div class="swiper-slide">Slide 10</div>
 </div>
 <!-- Add Pagination -->
 <div class="swiper-pagination"></div>
 <!-- Add Arrows -->
 <div class="swiper-button-next"></div>
 <div class="swiper-button-prev"></div>
</div>

 <!-- Swiper JS -->

 <script src="../package/js/swiper.min.js"></script>

    <!-- Initialize Swiper -->
      <script>
       var swiper = new Swiper('.swiper-container', {
        spaceBetween: 30,
        centeredSlides: true,
        autoplay: {
        delay: 2500,
        disableOnInteraction: false,
        },
      pagination: {
       el: '.swiper-pagination',
       clickable: true,
       },
      navigation: {
      nextEl: '.swiper-button-next',
      prevEl: '.swiper-button-prev',
      },
     });
   </script>

最佳答案

var swiper = new Swiper('.swiper-container', {
  slidesPerView: 3,
  spaceBetween: 30,
  centeredSlides: true,
  autoplay: {
    delay: 2500,
    disableOnInteraction: false,
  },
  pagination: {
    el: '.swiper-pagination',
    clickable: true,
  },
  navigation: {
    nextEl: '.swiper-button-next',
    prevEl: '.swiper-button-prev',
  },
});
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/Swiper/4.5.1/css/swiper.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/Swiper/4.5.1/js/swiper.min.js"></script>
<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 class="swiper-slide">Slide 4</div>
    <div class="swiper-slide">Slide 5</div>
    <div class="swiper-slide">Slide 6</div>
    <div class="swiper-slide">Slide 7</div>
    <div class="swiper-slide">Slide 8</div>
    <div class="swiper-slide">Slide 9</div>
    <div class="swiper-slide">Slide 10</div>
  </div>
  <!-- Add Pagination -->
  <div class="swiper-pagination"></div>
  <!-- Add Arrows -->
  <div class="swiper-button-next"></div>
  <div class="swiper-button-prev"></div>
</div>

关于javascript - Swiper js 自动播放 slider ,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/60715402/

相关文章:

javascript - AngularJS 忽略 ui.route 的路由

javascript - 在我的例子中如何通过 ajax 获取数据?

javascript - canvas toDataURL() 返回透明图像

html - 如何使剑道网格对特定用户只读

css - Asp.Net 设置不同的 css 类来生成 Datalist 中的元素

javascript - 为什么新日期定在今天又回到了昨天

javascript - Dropzone 删除除第一个文件之外的所有文件

html - 背景视频占据站点的全高而不是容器

css - 嵌套 DIV - 嵌套 DIV 不占用高度?

javascript - 如何使用内联样式在滚动时使用变换 : rotate() with react. js