swiper 滑块 - 作为一张幻灯片滑动，但包含 CSS答案

【问题标题】：swiper slider - swiping as one slide, but CSS is includedswiper 滑块 - 作为一张幻灯片滑动，但包含 CSS
【发布时间】：2020-07-20 14:48:29
【问题描述】：

为什么 swiper 滑块会将我的所有 div 滑动为一个？图书馆变了吗？

下面是我的例子：

var swiper = new Swiper('.swiper-container', {
    autoplay:false,
  direction: "horizontal",
    loop:false,
    pagination: {
        el: '.product-image-thumbs .swiper-pagination',
        clickable: true,
        bulletActiveClass: 'active'
    }
});

.swiper-slide {
  background-color: green;
  width: 300px;
  height: 100px;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/Swiper/5.4.5/js/swiper.min.js"></script>
<link href="https://unpkg.com/swiper/css/swiper.min.css" rel="stylesheet"/>
<div class="swiper-container">
  <div class="swiper-wrapper">
    <div class="swiper-slide"></div>
    <div class="swiper-slide"></div>
    <div class="swiper-slide"></div>
    <div class="swiper-slide"></div>
  </div>
   <div class="swiper-pagination"></div>
</div>

您可以看到所有幻灯片都在一张幻灯片中吗？

根据这些答案

Swiper Slider puts all slides in one slide

Swiper slider does not swipe slides on mobile devices

他们都说要包含 CSS 文件，但您可以看到我的 CSS 文件已包含在内，并且链接的答案现在表现出与我相同的行为。

swiper 变了吗？

【问题讨论】：

标签： javascript jquery swiper

【解决方案1】：

是的，可能是链接已过时，请参阅swiperjs 获取最新版本并尝试此链接：

// CSS
<link rel="stylesheet" href="https://unpkg.com/swiper/swiper-bundle.min.css">
// JS
<script src="https://unpkg.com/swiper/swiper-bundle.min.js"></script>

有几个快速修复：

分页： 属性 el 将允许逗号分隔的类，你用空格分隔
BulletActiveClass：目前active类上没有你指定的样式，所以暂时评论
脚本位置： 始终尝试在body 标记末尾使用脚本，正如我在下面的示例中添加的那样
CSS：我从swiper example 添加了 css，因为这里没有 css 的滑块已损坏

您使用上述修复的工作示例：

var swiper = new Swiper('.swiper-container', {
    autoplay:false,
    direction: "horizontal",
    loop:false,
    pagination: {
        el: '.product-image-thumbs, .swiper-pagination',
        clickable: true,
        // bulletActiveClass: 'active'
    }
});

html,
body {
    position: relative;
    height: 100%;
}
body {
    background: #eee;
    font-family: Helvetica Neue, Helvetica, Arial, sans-serif;
    font-size: 14px;
    color: #000;
    margin: 0;
    padding: 0;
}
.swiper-container {
    width: 100%;
    height: 100%;
}
.swiper-slide {
    text-align: center;
    font-size: 18px;
    background: #fff;

    /* Center slide text vertically */
    display: -webkit-box;
    display: -ms-flexbox;
    display: -webkit-flex;
    display: flex;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    -webkit-justify-content: center;
    justify-content: center;
    -webkit-box-align: center;
    -ms-flex-align: center;
    -webkit-align-items: center;
    align-items: center;
}

<link rel="stylesheet" href="https://unpkg.com/swiper/swiper-bundle.min.css">
<div class="swiper-container">
    <div class="product-image-thumbs"></div>
    <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>
    <div class="swiper-pagination"></div>
</div>
<script src="https://unpkg.com/swiper/swiper-bundle.min.js"></script>

【讨论】：