文章/答案/技术大牛

发布

社区首页 >问答首页 >Swiper，只显示一张幻灯片

问Swiper，只显示一张幻灯片
EN

Stack Overflow用户

提问于 2020-10-13 18:47:11

回答 1查看 864关注 0票数 0

我刚开始使用swiper，我有一个小问题，我现在的代码如下。问题是，我希望用户一次只看到一张幻灯片，现在我看到的是一张半张，有时是两张半张幻灯片，这有点时髦。有人知道我做错了什么吗？示例：https://gyazo.com/7cad7d9589c01bbb5c4c21efb9f19bf2 https://gyazo.com/539d22ec50badb77d2c6a8e1b01e95c5 https://gyazo.com/78111dab98d2a7d934a9926651345412它还有点毁了我的利润，所以它真的很难看

<body class="font-newsCycle">

<nav class="bg-black text-white px-4 py-3 flex items-center container max-w-full">

    <img src="/img/logo_small.png" alt="" loading="lazy">
    <a href="#" class="font-bold pl-2 text-green">Huidige voorraad</a>
</nav>

    <div class="container swiper-container">
        <div class="swiper-wrapper">
            <div class="max-w-sm rounded overflow-hidden shadow-lg m-4 mt-4 swiper-slide">
                <img class="w-full" src="/img/red_charm.jpg" alt="The red charm flower">
                <div class="text-center m-4">
                    <div class="text-green font-bold text-xl ">Red Charm 0</div>
                    <div class="text-black font-light ">Type: plant</div>
                    <div class="text-black font-light ">Prijs: 0,70</div>
                    <div class="text-black font-light ">Maat: 2/3 N</div>
                    <div class="text-black font-light ">Huidige voorraad: 1500</div>
                </div>
            </div>
            <div class="max-w-sm rounded overflow-hidden shadow-lg m-4 mt-4 swiper-slide">
                <img class="w-full" src="/img/red_charm.jpg" alt="The red charm flower">
                <div class="text-center m-4">
                    <div class="text-green font-bold text-xl ">Red Charm 1</div>
                    <div class="text-black font-light ">Type: plant</div>
                    <div class="text-black font-light ">Prijs: 0,70</div>
                    <div class="text-black font-light ">Maat: 2/3 N</div>
                    <div class="text-black font-light ">Huidige voorraad: 1500</div>
                </div>
            </div>
            <div class="max-w-sm rounded overflow-hidden shadow-lg m-4 mt-4 swiper-slide">
                <img class="w-full" src="/img/red_charm.jpg" alt="The red charm flower">
                <div class="text-center m-4">
                    <div class="text-green font-bold text-xl ">Red Charm 2</div>
                    <div class="text-black font-light ">Type: plant</div>
                    <div class="text-black font-light ">Prijs: 0,70</div>
                    <div class="text-black font-light ">Maat: 2/3 N</div>
                    <div class="text-black font-light ">Huidige voorraad: 1500</div>
                </div>
            </div>
            <div class="max-w-sm rounded overflow-hidden shadow-lg m-4 mt-4 swiper-slide">
                <img class="w-full" src="/img/red_charm.jpg" alt="The red charm flower">
                <div class="text-center m-4">
                    <div class="text-green font-bold text-xl ">Red Charm 3</div>
                    <div class="text-black font-light ">Type: plant</div>
                    <div class="text-black font-light ">Prijs: 0,70</div>
                    <div class="text-black font-light ">Maat: 2/3 N</div>
                    <div class="text-black font-light ">Huidige voorraad: 1500</div>
                </div>
            </div>
            <div class="max-w-sm rounded overflow-hidden shadow-lg m-4 mt-4 swiper-slide">
                <img class="w-full" src="/img/red_charm.jpg" alt="The red charm flower">
                <div class="text-center m-4">
                    <div class="text-green font-bold text-xl ">Red Charm 4</div>
                    <div class="text-black font-light ">Type: plant</div>
                    <div class="text-black font-light ">Prijs: 0,70</div>
                    <div class="text-black font-light ">Maat: 2/3 N</div>
                    <div class="text-black font-light ">Huidige voorraad: 1500</div>
                </div>
            </div>
        </div>
        <div class="swiper-pagination"></div>

    </div>


<!-- JavaScript -->
<script src="https://unpkg.com/swiper/swiper-bundle.min.js"></script>
<script>
    var swiper = new Swiper('.swiper-container', {
        slidesPerView: 1,
        spaceBetween: 30,
        centeredSlides: true,
        pagination: {
            el: '.swiper-pagination',
            clickable: true,
        },
    });
</script>
</body>```

html

css

swiper

回答 1

Stack Overflow用户

发布于 2020-10-13 19:55:20

我看到您忘记发送CSS部分，我认为问题出在那里(所以我创建了我的)。因为我使用相同的脚本部分实现了一个替代的Swiper，并且它是有效的

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="utf-8">
  <title>Swiper demo</title>
  <meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1, maximum-scale=1">

  <!-- Link Swiper's CSS -->
  <link rel="stylesheet" href="https://unpkg.com/swiper/swiper-bundle.css">
  <!-- Demo styles -->
  <style>
    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;
    }
  </style>
</head>

<nav>
    <a href="#">Huidige voorraad</a>
</nav>

<body>
  <!-- Swiper -->
  <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 class="swiper-slide">Slide 4</div>
      <div class="swiper-slide">Slide 5</div>
      <div class="swiper-slide">Slide 6</div>
      <div class="swiper-slide">Slide 7</div>
      <div class="swiper-slide">Slide 8</div>
      <div class="swiper-slide">Slide 9</div>
      <div class="swiper-slide">Slide 10</div>
    </div>
    <!-- Add Pagination -->
    <div class="swiper-pagination"></div>
  </div>

  <!-- Swiper JS -->
  <script src="https://unpkg.com/swiper/swiper-bundle.js"></script>

  <!-- Initialize Swiper -->
  <script>
    var swiper = new Swiper('.swiper-container', {
      slidesPerView: 1,
      spaceBetween: 30,
      centeredSlides: true,
      pagination: {
        el: '.swiper-pagination',
        clickable: true,
      },
    });
  </script>
</body>

</html>

我选择导入完整的Swiper的CSS和JS

<!-- Link Swiper's CSS -->
<link rel="stylesheet" href="https://unpkg.com/swiper/swiper-bundle.css">

和

<!-- Swiper JS -->
<script src="https://unpkg.com/swiper/swiper-bundle.js"></script>

提示:在https://swiperjs.com/demos/上，你可以找到很多带有源代码的很酷的Swiper演示

票数 0

页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持

原文链接：

https://stackoverflow.com/questions/64333741

复制

相似问题

问Swiper，只显示一张幻灯片
EN

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问Swiper，只显示一张幻灯片EN

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问Swiper，只显示一张幻灯片
EN