简单使用swiper实现轮播图

最新推荐文章于 2023-06-15 21:01:09 发布

仗剑天涯，从摘要开始

最新推荐文章于 2023-06-15 21:01:09 发布

阅读量1.8k

点赞数 1

分类专栏：移动web开发

本文链接：https://blog.csdn.net/my_new_way/article/details/103701355

版权

移动web开发专栏收录该内容

7 篇文章 0 订阅

订阅专栏

1、引入CSS CDN（在页面head）

<link href="https://cdn.bootcss.com/Swiper/4.5.1/css/swiper.css" rel="stylesheet">

2、引入JS CDN（在body中）

<script src="https://cdn.bootcss.com/Swiper/4.5.1/js/swiper.js"></script>

类似于这种

<!DOCTYPE html>
<html>
<head>
    ...
    <link rel="stylesheet" href="dist/css/swiper.min.css">
</head>
<body>
    ...
    <script src="dist/js/swiper.min.js"></script>
    ...
</body>
</html>

4、写入轮播需要的基本结构

<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 class="swiper-pagination"></div>
    
    <!-- 如果需要导航按钮 -->
    <div class="swiper-button-prev"></div>
    <div class="swiper-button-next"></div>
    
    <!-- 如果需要滚动条 -->
    <div class="swiper-scrollbar"></div>
</div>

示例

 <!-- 轮播图区域 -->
    <div class="carousel">
        <!-- <a href=""><img src="./images/banner1.jpg.dpg" alt=""></a> -->

        <div class="swiper-container">
            <div class="swiper-wrapper">
                <div class="swiper-slide"><img src="./images/banner2.jpg.dpg" alt=""></div>
                <div class="swiper-slide"><img src="./images/banner1.jpg.dpg" alt=""></div>
                <div class="swiper-slide"><img src="./images/banner3.jpg.dpg" alt=""></div>
            </div>
            <!-- 如果需要分页器 -->
            <div class="swiper-pagination"></div>
            <!-- 如果需要滚动条 -->
            <div class="swiper-scrollbar"></div>
        </div>
    </div>

你可能想要给Swiper定义一个大小，当然不要也行。

.swiper-container {
    width: 600px;
    height: 300px;
}

5、初始化Swiper：最好是挨着标签

...
<script>        
  var mySwiper = new Swiper ('.swiper-container', {
    direction: 'vertical', // 垂直切换选项
    loop: true, // 循环模式选项
    
    // 如果需要分页器
    pagination: {
      el: '.swiper-pagination',
    },
    
    // 如果需要前进后退按钮
    navigation: {
      nextEl: '.swiper-button-next',
      prevEl: '.swiper-button-prev',
    },
    
    // 如果需要滚动条
    scrollbar: {
      el: '.swiper-scrollbar',
    },
  })        
  </script>
</body>

或

  <script>
        var mySwiper = new Swiper('.swiper-container', {
            //   autoplay:true,//等同于以下设置
            autoplay: {
                delay: 1000,
                stopOnLastSlide: false,
                disableOnInteraction: true,
            },
            pagination: {
                el: '.swiper-pagination',
            },
        });
    </script>

分页器样式默认是小圆点样式可以更改

在这里插入图片描述
在sweiper官网的API可以找到

在这里插入图片描述
如果不能写在HTML内容的后面，则需要在页面加载完成后再初始化。

<script>
window.onload = function() {
  ...
}
</script>

或者这样（Jquery和Zepto）(推荐)

<script>
$(document).ready(function () {
 ...
})
</script

完成。恭喜你，现在你的Swiper应该已经能正常切换了。

轮播图已经可以正常使用了。。。

仗剑天涯，从摘要开始

关注

1
点赞
踩
12

收藏

觉得还不错? 一键收藏
0
评论
简单使用swiper实现轮播图

1、引入CSS CDN（在页面head）<link href="https://cdn.bootcss.com/Swiper/4.5.1/css/swiper.css" rel="stylesheet">2、引入JS CDN（在body中）<script src="https://cdn.bootcss.com/Swiper/4.5.1/js/swiper.js">...
复制链接

扫一扫