swiper基本使用

• 1.什么是swiper?

  • Swiper是純javascript打造的滑動特效插件，面向PC悼做、平板電腦等移動終端间学。
  • Swiper能實現(xiàn)觸屏焦點圖淹办、觸屏Tab切換等常用效果。
  • Swiper開源械哟、免費疏之、穩(wěn)定、使用簡單暇咆、功能強大锋爪，是架構(gòu)移動終端網(wǎng)站的重要選擇！

• 2.如何使用:

  • 2.1引入swiper對應(yīng)的css和js文件
  • 2.2按照框架的需求搭建三層結(jié)構(gòu)(div里面也可以是ul等別的元素)
  • 2.3創(chuàng)建一個Swiper對象, 將容器元素傳遞給它

// 1.引入swiper對應(yīng)的css和js文件
<link rel="stylesheet" href="css/swiper.css">
<script src="js/swiper.js"></script>

// 2.按照框架的需求搭建三層結(jié)構(gòu)
<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.創(chuàng)建一個Swiper對象, 將容器元素傳遞給它
<script>
    var mySwiper = new Swiper ('.swiper-container');
</script>

swiper高級使用

• 根據(jù)不同的需求爸业，添加對應(yīng)的html文件和對應(yīng)的事件即可

<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, // 循環(huán)模式選項
        // autoplay:true, // 自動輪播
        // autoplay: {
        //     delay: 1000,//1秒切換一次
        // },
        speed:5000, //設(shè)置切換速度
    });
</script>