Question

我刚开始使用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>```

Answer 1

我看到您忘了发送CSS部分，并且我认为问题出在那儿（所以我创建了我的）。因为我用相同的SCRIPT部分实现了替代的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演示

滑动，只显示一张幻灯片

1 个答案: