Swiper不切换幻灯片

Posted 2023-05-08

【中文标题】Swiper不切换幻灯片

【英文标题】：Swiper not switching slides

【发布时间】：2019-09-06 00:22:44

【问题描述】：

我在为艺术家构建的页面上使用Swiper，但我不擅长使用 javascript。我正在从 CDN 加载 Swiper JavaScript 文件：

https://cdnjs.cloudflare.com/ajax/libs/Swiper/4.x.x/js/swiper.min.js

该站点正在本地构建，因此我无法链接到该站点。我正在使用最小化的 jQuery。

在整理出一些未定义的函数错误后，我得到了页面上显示的第一张幻灯片，以及导航箭头。但是，箭头实际上并没有做任何事情，而且幻灯片根本不会自动滑动或使用导航箭头滑动。

我按照 Swiper 网站上的“Getting Started with Swiper”指南进行操作。

我搜索了 Google、Swiper 论坛和 Stack Overflow，但没有找到任何有用的东西。我遇到了 MIME 类型的问题，解决了这些问题。但是我没有发现有人对幻灯片没有切换的问题，所以我怀疑问题是我不擅长 JavaScript。

我遇到的一个问题是我无法使用 jQuery 占位符 ($)，我必须使用 jQuery 而不是 $ 才能显示滑块。

我期望的是图像会自动滑动并带有导航箭头。发生的情况是第一个图像显示并且没有改变，即使有箭头。

var mySwiper = new Swiper('.swiper-container', 
  // Optional parameters
  direction: 'vertical',
  loop: true,

  // If we need pagination
  pagination: 
    el: '.swiper-pagination',
  ,

  // Navigation arrows
  navigation: 
    nextEl: '.swiper-button-next',
    prevEl: '.swiper-button-prev',
  ,

  // And if we need scrollbar
  scrollbar: 
    el: '.swiper-scrollbar',
  ,
)

<link href="https://cdnjs.cloudflare.com/ajax/libs/Swiper/4.5.0/css/swiper.min.css" rel="stylesheet" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/Swiper/4.5.0/js/swiper.min.js"></script>

<div id="content">
  <div class="swiper-wrapper">
    <div class="swiper-slide">1</div>
    <div class="swiper-slide">2</div>
    <div class="swiper-slide">3</div>
    <div class="swiper-slide">4</div>
    <div class="swiper-button-prev"></div>
    <div class="swiper-button-next"></div>
  </div>
</div>

【参考方案1】：

只是一些小问题：

容器需要“swiper-container”类。 （那个或者滑动选择器应该是#content。）

按钮应该在包装之外。 在您的情况下，layout 就像：

<div class="swiper-container">
  <div class="swiper-wrapper">
    <div class="swiper-slide">Slide 1</div>
    <div class="swiper-slide">Slide 2</div>
  </div>
  <div class="swiper-button-next"></div>
  <div class="swiper-button-prev"></div>
</div>

“方向”设置为“垂直”。 我不确定您的确切应用，但我已将其更改为“水平”以用于此演示。

var mySwiper = new Swiper('.swiper-container', 

  // Optional parameters
  direction: 'horizontal',
  loop: true,

  // Navigation arrows
  navigation: 
    nextEl: '.swiper-button-next',
    prevEl: '.swiper-button-prev',
  

);

<link href="https://cdnjs.cloudflare.com/ajax/libs/Swiper/4.5.0/css/swiper.min.css" rel="stylesheet" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/Swiper/4.5.0/js/swiper.min.js"></script>

<div class="swiper-container">
  <div class="swiper-wrapper">
    <div class="swiper-slide"><img src="http://lorempixel.com/500/170/?1" ></div>
    <div class="swiper-slide"><img src="http://lorempixel.com/500/170/?2" ></div>
    <div class="swiper-slide"><img src="http://lorempixel.com/500/170/?3" ></div>
    <div class="swiper-slide"><img src="http://lorempixel.com/500/170/?4" ></div>
  </div>
  <div class="swiper-button-prev"></div>
  <div class="swiper-button-next"></div>
</div>