swiper轮播图插件初体验

最新推荐文章于 2024-04-10 16:37:19 发布

灯光下的投影

最新推荐文章于 2024-04-10 16:37:19 发布

阅读量154

点赞数

分类专栏： swiper轮播图插件文章标签： swiper轮播图插件初级使用

本文链接：https://blog.csdn.net/liuyuhua666/article/details/89786412

版权

swiper轮播图插件专栏收录该内容

1 篇文章 0 订阅

订阅专栏

一、下载swiper插件

这是swiper官网 https://www.swiper.com.cn/ 直接下载

下载好之后引入就可以了。

二、先引入css文件：

<link rel="stylesheet" href="swiper/css/swiper.css">

<style>
    .swiper-container {
      width: 790px;
      height: 340px;
    }
</style>
</head>
<body>

  <!-- 整个轮播图容器 -->
  <div class="swiper-container">
    <!-- 存放图片 -->
    <div class="swiper-wrapper">
        <div class="swiper-slide">
          <a href="#"><img src="images/1.jpg" alt=""></a>
        </div>
        <div class="swiper-slide">
          <a href="#"><img src="images/2.jpg" alt=""></a>
        </div>
        <div class="swiper-slide">
          <a href="#"><img src="images/3.jpg" alt=""></a>
        </div>
        <div class="swiper-slide">
          <a href="#"><img src="images/4.jpg" alt=""></a>
        </div>
        <div class="swiper-slide">
          <a href="#"><img src="images/5.jpg" alt=""></a>
        </div>
        <div class="swiper-slide">
          <a href="#"><img src="images/6.jpg" alt=""></a>
        </div>
        <div class="swiper-slide">
          <a href="#"><img src="images/7.jpg" alt=""></a>
        </div>
        <div class="swiper-slide">
          <a href="#"><img src="images/8.jpg" alt=""></a>
        </div>
    </div>
    <!-- 如果需要分页器, 小圆点 -->
    <div class="swiper-pagination"></div>
    
    <!-- 如果需要导航按钮 -->
    <div class="swiper-button-prev"></div>
    <div class="swiper-button-next"></div>
  </div>
</body>

三、还要引入js文件：

<script src="swiper/js/swiper.js"></script>

  <script>
    // 参数1： 要初始化哪个轮播图

    // 常用的参数：
    // direction: horizontal 水平  vertical：垂直
    // loop: 无限滚动
    new Swiper('.swiper-container', {
      loop: true,
      autoplay: {
        delay: 1000,
        // 当用户操作了轮播图，重新开启轮播图
        disableOnInteraction: false
      },
      effect: 'slide',
      pagination: {
        el: '.swiper-pagination',
        type: 'fraction'
      },
      navigation: {
        nextEl: '.swiper-button-next',
        prevEl: '.swiper-button-prev',
      }
    });
  </script>

灯光下的投影

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
swiper轮播图插件初体验

一、下载swiper插件这是swiper官网 https://www.swiper.com.cn/ 直接下载下载好之后引入就可以了<link rel="stylesheet" href="swiper/css/swiper.css"><style> .swiper-container { width: 790px; height...
复制链接

扫一扫

专栏目录