Swiper没有切换滑块

Question

我在一个我正在为艺术家建造的页面上使用Swiper，而且我对Javascript并不擅长。我正在从CDN加载Swiper JavaScript文件：

HTTPS://CDN加速.cloud flare.com/Ajax/礼拜四/swiper/4.小.小/就是/swiper.民.就是

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

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

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

我搜索了谷歌，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>

Answer 1

只是一些小问题：

1. 容器需要“swiper-container”类。 （要么那个或者狙击选择器应该是#content。）
2. 按钮应位于包装器外部。 在你的情况下，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>

3. “方向”设置为“垂直”。 我不确定你的确切应用，但我已经将它改为“水平”这个演示。

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" alt=""></div>
    <div class="swiper-slide"><img src="http://lorempixel.com/500/170/?2" alt=""></div>
    <div class="swiper-slide"><img src="http://lorempixel.com/500/170/?3" alt=""></div>
    <div class="swiper-slide"><img src="http://lorempixel.com/500/170/?4" alt=""></div>
  </div>
  <div class="swiper-button-prev"></div>
  <div class="swiper-button-next"></div>
</div>