swiper轮播图插件

Posted 2020-12-24 ericzlin

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了swiper轮播图插件相关的知识，希望对你有一定的参考价值。

一、简介

①Swiper是纯javascript打造的滑动特效插件，面向手机、平板电脑等移动终端。Swiper能实现触屏焦点图、触屏Tab切换、触屏多图切换等常用效果。

②Swiper 是一款免费以及轻量级的移动设备触控滑块的框架，使用硬件加速过渡（如果该设备支持的话）。主要使用与移动端的网站、网页应用程序（web apps），以及原生的应用程序（native apps）。

③主要是为ios而设计的，同时，在android、WP8系统以及现代桌面浏览器也有着良好的用户体验。

二、文档

①中文网址：http://2.swiper.com.cn/

②中文网地址：http://www.swiper.com.cn/

③Swiper目前有Swiper2、Swiper3、Swiper4几个版本，每个版本的使用方法可能会有所不同，具体参照文档

三、使用方法

①加载

首先加载插件，需要用到的文件有swiper.min.js和swiper.min.css文件。

      <link rel="stylesheet" href="path/to/swiper.min.css">
           ...
　　　　    ...
　　  <script src="path/to/swiper.min.js"></script>

如果你的页面加载了jQuery.js或者zepto.js，你可以选择使用更轻便的swiper.jquery.min.js

　　　   ...
　　<link rel="stylesheet" href="path/to/swiper.min.css">
　　　　 ...
　　<script src="path/to/jquery.js"></script>
　　<script src="path/to/swiper.jquery.min.js"></script>

②html内容

<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>

③初始化

初始化Swiper：最好是挨着</body>标签（函数调用）

<script> 
　　var mySwiper = new Swiper (‘.swiper-container‘, {
　　　　direction: ‘vertical‘,
　　　　loop: true,

　　　　// 如果需要分页器
　　　　pagination: ‘.swiper-pagination‘,

　　　　// 如果需要前进后退按钮
　　　　nextButton: ‘.swiper-button-next‘,
　　　　prevButton: ‘.swiper-button-prev‘,

　　　　// 如果需要滚动条
　　　　scrollbar: ‘.swiper-scrollbar‘,
　　}) 
</script>
</body>

如果不能写在HTML内容的后面，则需要在页面加载完成后再初始化

<script type="text/javascript">
　　window.onload = function() {
　　...
　　}
</script>

或者这样（Jquery和Zepto）
<script type="text/javascript">
　　$(document).ready(function () {
　　　　...
　　})
</script>

四、示例（轮播图）

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0,user-scalable=no">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>轮播图</title>
    <!-- 引入swiper3.0 css文件 -->
    <link rel="stylesheet" href="swiper/css/swiper.min.css">
    <style>
        *{
            margin: 0;
            padding: 0;
            box-sizing: border-box;
            -webkit-box-sizing: border-box;
        }
        ul{
            list-style: none;
        }
        a{
            text-decoration: none;
        }
        .container {
            position: relative;
            width: 750px;
            margin: 0 auto;
        }       
    </style>
</head>
<body>
    <!-- 版心 -->
    <div class="container">
        <!-- 轮播图 -->
        <div class="swiper-container">
            <ul class="swiper-wrapper">
                <li class="swiper-slide"><a href="#"><img src="images/banner01.jpg" alt=""></a></li>
                <li class="swiper-slide"><a href="#"><img src="images/banner02.jpg" alt=""></a></li>
                <li class="swiper-slide"><a href="#"><img src="images/banner03.jpg" alt=""></a></li>
                <li class="swiper-slide"><a href="#"><img src="images/banner04.jpg" alt=""></a></li>
                <li class="swiper-slide"><a href="#"><img src="images/banner05.jpg" alt=""></a></li>
                <li class="swiper-slide"><a href="#"><img src="images/banner06.jpg" alt=""></a></li>
                <li class="swiper-slide"><a href="#"><img src="images/banner07.jpg" alt=""></a></li>
                <li class="swiper-slide"><a href="#"><img src="images/banner08.jpg" alt=""></a></li>
            </ul>
            <!-- 分页器 -->
            <div class="swiper-pagination"></div>
        </div>
    </div>
    <!-- 引入swiper3.0插件脚本 -->
    <script src="swiper/js/swiper.min.js"></script>
    <!-- js初始化脚本 -->
    <script>
       window.onload=function(){
            /* 轮播图 */
            new Swiper(‘.swiper-container‘,{
                autoplay:1000,
                loop:true,
                pagination:‘.swiper-pagination‘,
                autoplayDisableOnInteraction:false               
            });
       }
    </script>
</body>
</html>

技术分享图片

以上是关于swiper轮播图插件的主要内容，如果未能解决你的问题，请参考以下文章