swiper基本使用

• 1.什么是swiper?

  • Swiper是纯javascript打造的滑动特效插件，面向PC、平板电脑等移动终端。
  • Swiper能实现触屏焦点图、触屏Tab切换等常用效果。
  • Swiper开源、免费、稳定、使用简单、功能强大，是架构移动终端网站的重要选择！

• 2.如何使用:

  • 2.1引入swiper对应的css和js文件
  • 2.2按照框架的需求搭建三层结构(div里面也可以是ul等别的元素)
  • 2.3创建一个Swiper对象, 将容器元素传递给它

// 1.引入swiper对应的css和js文件
<link rel="stylesheet" href="css/swiper.css">
<script src="js/swiper.js"></script>

// 2.按照框架的需求搭建三层结构
<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>

// 3.创建一个Swiper对象, 将容器元素传递给它
<script>
    var mySwiper = new Swiper ('.swiper-container');
</script>

swiper高级使用

• 根据不同的需求，添加对应的html文件和对应的事件即可

<div class="swiper-container">
    <ul class="swiper-wrapper">
        <li class="swiper-slide">Slide 1</li>
        <li class="swiper-slide">Slide 2</li>
        <li class="swiper-slide">Slide 3</li>
    </ul>
    <!-- 如果需要分页器 -->
    <div class="swiper-pagination"></div>
    <!-- 如果需要导航按钮 -->
    <div class="swiper-button-prev"></div>
    <div class="swiper-button-next"></div>
</div>
<script>
    let mySwiper = new Swiper ('.swiper-container', {
        // 如果需要分页器
        pagination: {
            el: '.swiper-pagination',
        },
        // 如果需要前进后退按钮
        navigation: {
            nextEl: '.swiper-button-next',
            prevEl: '.swiper-button-prev',
        },
        loop: true, // 循环模式选项
        // autoplay:true, // 自动轮播
        // autoplay: {
        //     delay: 1000,//1秒切换一次
        // },
        speed:5000, //设置切换速度
    });
</script>