Swiper Slider 将所有幻灯片放在一张幻灯片中答案

【问题标题】：Swiper Slider puts all slides in one slideSwiper Slider 将所有幻灯片放在一张幻灯片中
【发布时间】：2020-03-18 17:31:38
【问题描述】：

我根据文档设置了 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

谁能复制这个？

【问题讨论】：

标签： javascript swiper

【解决方案1】：

我遇到了同样的问题。就我而言，我补充说：

import '../../../node_modules/swiper/css/swiper.min.css';

它正在工作。

【讨论】：

【解决方案2】：

在我的情况下，问题是我没有为每个滑块项目添加 swiper-slide 类，所以 solutiom 只是添加 swiper-slide 类

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

npm install swiper 之后我的 swiper 设置

import Swiper, {Navigation} from 'swiper';
import 'swiper/swiper-bundle.css';
    
Swiper.use([Navigation]);

const swiper = new Swiper('.swiper-container', {
    breakpoints: {
        768: {
            slidesPerView: 2,
        },
        1440: {
            slidesPerView: 3
        },
    },
    navigation: {
        nextEl: '.swiper-button-next',
        prevEl: '.swiper-button-prev',
    },
    slidesPerView: 1,
});

如果你使用 webpack 检查 css 加载器

{
     test: /\.css$/,
     use: ['style-loader', 'css-loader'],
},

【讨论】：

【解决方案3】：

在您的代码笔中，您忘记包含插件也需要正常运行的 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>

【讨论】：

当然！在我的项目中，我已经通过 npm 导入了包，只是发现 css 会包含它自己。星期五的大脑！谢谢

【解决方案4】：

⚠️⚠️⚠️ 如果您更改幻灯片的宽度，幻灯片可能会出现异常行为，从而导致第 1 面出现蜂鸣。在我的示例中，我将宽度设置为 150 像素。所有载玻片都在第 1 面。还有 9x 额外的空白面。我检查了幻灯片，发现它们的自动设置宽度被越过了。解开它解决了这个问题。

也许您还为它们设置了宽度。
也许你在 div 元素上设置了一个附加类，它设置了宽度：

【讨论】：

【解决方案5】：

尽管我不需要它，但我不得不设置导航：

navigation: {
  prevEl: null,
  nextEl: null,
},

【讨论】：