swiper显示多个slide并且箭头在框外

Is_ayanya

已于 2023-10-19 16:52:15 修改

阅读量487

点赞数 2

文章标签： css 前端

于 2023-10-19 16:50:00 首次发布

本文链接：https://blog.csdn.net/Is_ayanya/article/details/133930046

版权

swiper显示多个slide并且箭头在框外

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="./swiper/swiper-bundle.min.css" />
</head>

<body>
  <!-- Swiper -->
  <div class="swiper mySwiper">
    <div class="swiper-wrapper">
      <div class="swiper-slide">
        <img src="./images/nature-1.jpg" alt="">
      </div>
      <div class="swiper-slide">
        <img src="./images/nature-2.jpg" alt="">
      </div>
      <div class="swiper-slide">
        <img src="./images/nature-3.jpg" alt="">
      </div>
      <div class="swiper-slide">
        <img src="./images/nature-4.jpg" alt="">
      </div>
      <div class="swiper-slide">
        <img src="./images/nature-5.jpg" alt="">
      </div>
    </div>
    <div class="swiper-pagination"></div>
  </div>

  <!-- Swiper JS -->
  <script src="./swiper/swiper-bundle.min.js"></script>

  <!-- Initialize Swiper -->
  <script>
    var swiper = new Swiper(".mySwiper", {
      slidesPerView: 3,
      spaceBetween: 10,
      pagination: {
        el: ".swiper-pagination",
        clickable: true,
      },
      loop: true,
      autoplay: {
        delay: 1000
      }
    });
  </script>
</body>

</html>

效果图：

在这里插入图片描述

修改后的代码：

<div style="position:relative">
        <div class="swiper mySwiper" style="width: 90%;">
          <div class="swiper-wrapper">
            <div class="swiper-slide">
              <img src="../img/carousel-1.png" alt="">
            </div>
            <div class="swiper-slide">
              <img src="../img/carousel-2.png" alt="">
            </div>
            <div class="swiper-slide">
              <img src="../img/carousel-3.png" alt="">
            </div>
            <div class="swiper-slide">
              <img src="../img/carousel-4.png" alt="">
            </div>
            <div class="swiper-slide">
              <img src="../img/carousel-5.png" alt="">
            </div>
          </div>
        </div>
        <div class="swiper-button-next"></div>
        <div class="swiper-button-prev"></div>
      </div>

在原来的swiper外嵌套一层div，position为relative，将切换button放到新增的div下
修改后的效果图：
在这里插入图片描述

Is_ayanya

关注

2
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
swiper显示多个slide并且箭头在框外

在这里插入图片描述](https://img-blog.csdnimg.cn/cb21a3bcafa140f094e62dd1cdda9d32.png)[在这里插入图片描述](https://img-blog.csdnimg.cn/a1a24dc462d94062ac4aad07b53b7258.png)在原来的swiper外嵌套一层div，position为relative，将切换button放到新增的div下。
复制链接

扫一扫