Swiper Slider 将所有幻灯片放在一张幻灯片中 [英] Swiper Slider puts all slides in one slide

问题描述

我按照文档设置了 Swiper Slider，每张幻灯片都像一张幻灯片一样.

<div class="swiper-wrapper"><div class="swiper-slide">幻灯片 1</div><div class="swiper-slide">幻灯片 2</div><div class="swiper-slide">幻灯片 3</div>

var mySwiper = new Swiper('.swiper-container', {方向:'水平'，每视图幻灯片:1，});

我也在 CodePen 上测试过，结果相同，所以我知道这不是我的项目中的东西:https://codepen.io/DasRollo/pen/YzzMrgP

谁能复制这个?

解决方案

在您的 codepen 中，您忘记包含插件正常运行所需的 css.不完全确定这是否是您所指的问题，但如果是，请尝试以下代码.

var mySwiper = new Swiper('.swiper-container', {方向:'水平'，每视图幻灯片:1，});

.swiper-slide {填充:2em；边框:1px 实心 #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"><!-- 额外需要的包装器--><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-pagination"></div><!-- 如果我们需要导航按钮--><div class="swiper-button-prev"></div><div class="swiper-button-next"></div><!-- 如果我们需要滚动条--><div class="swiper-scrollbar"></div>

I set up Swiper Slider as per the documentation and every slide slides as if one.

<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,
});

I also tested it on CodePen with the same result, so I know it's not something in my project: https://codepen.io/DasRollo/pen/YzzMrgP

Can anyone replicate this?

解决方案

In your codepen you forgot to include the css that the plugin also needs to function properly. Not entirely sure if that's what you meant you issue was, but if so, try the code below.

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> 

这篇关于Swiper Slider 将所有幻灯片放在一张幻灯片中的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！