(网页)swiper.js轮播图插件

Love The Way You Lie 2023-06-10 13:28 14阅读 0赞

# Swiper4.x使用方法 #

1.首先加载插件，需要用到的文件有swiper.min.js和swiper.min.css文件。可下载[Swiper文件][Swiper]或使用[CDN][]。

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

2.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> 导航等组件可以放在container之外

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

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

4.初始化Swiper：最好是挨着</body>标签

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

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

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

或者这样（Jquery和Zepto）

<script type="text/javascript"> $(document).ready(function () { ... }) </script>

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

swiper坑

1.一个页面引用多个swiper插件，出现混乱问题；

解决方法： 1.实例化swiper时加上其父元素加以区分

2.Swiper加上ID或Class区分，要保留默认的类名swiper-container

如下：

<script>
                var swiper = new Swiper('.course_banner2 .swiper-container', { pagination: '.course_banner2 .swiper-pagination', paginationClickable: true, loop: true, autoplay: 2500 }); </script>

2. swiper隐藏之后，再显示，滑动不流畅，且无限滑动会失败；

解决方法： 添加一下两个属性

observer: true,//修改swiper自己或子元素时，自动初始化swiper  
　　　　observeParents: true,//修改swiper的父元素时，自动初始化swiper

3.动态生成的swiper，如append()，或html()添加的，无限滑动效果失败；

解决方法：

a. 添加上面两个属性

b.把swiper方法写在动态生成的方法里面

如下所示：

function bigPic(comment_id) { $('.win_pic').show(); $.post("{:U('Course/ajaxComment')}", {
        'c_id':comment_id}, function(data){ if(data.status == 1){ $("#content").text(data.comment.c_content); $(".swiper-wrapper").html(''); var html = ''; var images = data.comment.images; for (var i=0; i < images.length; i  ) { html  = "<div class='swiper-slide'><img src=__ROOT__/"   images[i]['thumb_image']   "></div>"; } $(".swiper-wrapper").html(html); //swiper已动态生成 //实例化swiper
                    var swiper = new Swiper('.nav .swiper-container', { pagination: '.nav .swiper-pagination', paginationClickable: true, centeredSlides: true, autoplay: false, autoplayDisableOnInteraction: false, paginationType: 'fraction', observer: true,//修改swiper自己或子元素时，自动初始化swiper
                        observeParents: true,//修改swiper的父元素时，自动初始化swiper
                        loop: true, paginationFractionRender: function(swiper, currentClassName, totalClassName) { return '<span class="'   currentClassName   '"></span>'  
                                '/'  
                                '<span class="'   totalClassName   '"></span>'; } }) } console.log(data); }, "json"); }

4.移动端使用swiper需加onTouchStart、onTouchEnd，下拉时轮播停止BUG。（针对 apicloud 开发)

var swiper = new Swiper('.swiper-container', { pagination: '.swiper-pagination', loop: true, paginationClickable: true, centeredSlides: true, autoplay: 2500, autoplayDisableOnInteraction: false, onTouchStart: function(swiper) { api.setFrameAttr({ name: api.frameName, bounces: false }); }, onTouchEnd: function(swiper) { api.setFrameAttr({ name: api.frameName, bounces: true }); } });

官网网址:http://www.swiper.com.cn/

更多专业前端知识，请上 **【猿2048】www.mk2048.com**

[Swiper]: http://www.swiper.com.cn/download/index.html#file1
[CDN]: http://www.swiper.com.cn/cdn/index.html

发表评论取消回复

表情：

评论列表（有 0 条评论，14人围观）

还没有评论，来说两句吧...

相关阅读

相关移动端网页轮播图

文章目录一、触屏事件 1.触屏事件概述 2.触屏事件对象 3. 拖动元素二、

旧城等待，/ 2023年09月26日 11:05/ 0 赞/ 61 阅读

相关 PC 端网页轮播图

文章目录一、案例分析二、结构搭建三、具体实现 1.鼠标经过按钮时 2.动态生成小圆

清疚/ 2023年09月26日 10:39/ 0 赞/ 132 阅读

相关 js原生网页轮播图

轮播图也称为焦点图，是网页中比较常见的网页特效。功能需求： 1.鼠标经过轮播图模块，左右按钮显示，离开隐藏左右按钮。 2.点击右侧按钮一次，图片往左播放一张，以此类推，

小咪咪/ 2023年07月07日 08:22/ 0 赞/ 56 阅读

相关 (网页)swiper.js轮播图插件

Swiper4.x使用方法 1.首先加载插件，需要用到的文件有swiper.min.js和swiper.min.css文件。可下载[Swiper文件][Swiper]或使

Love The Way You Lie/ 2023年06月10日 13:28/ 0 赞/ 15 阅读

相关纯js实现轮播图插件

第一步首先，先建立一个普通的HTML里面有一个id是banner的div <!DOCTYPE html> <html> <head>

港控/mmm°/ 2022年11月28日 16:30/ 0 赞/ 553 阅读

相关网页轮播图制作

网页轮播图制作轮播图也称为焦点图，是网页中比较常见的网页特效。功能需求： 1. 鼠标经过轮播图模块，左右按钮显示，离开隐藏左右按钮。 2. 点击右侧按钮一次，

淡淡的烟草味﹌/ 2022年10月08日 11:14/ 0 赞/ 302 阅读

相关 Bootstrap轮播插件

> 轮播插件就是将几张同等大小的大图，按照顺序依次播放 <!-- 分析一下轮播插件的组成： 1.最外层容器div:加类class="carousel

Love The Way You Lie/ 2022年06月12日 06:58/ 0 赞/ 356 阅读

相关使用jQuery封装轮播图插件

先展示一下效果：（因为截图工具的原因，小绿点不能正常展示） ![70][] 插件的拓展方式 (function ($) { //添加自定义jq插件

深碍√TFBOYSˉ_/ 2022年05月19日 10:43/ 0 赞/ 416 阅读

相关基于jquery实现轮播图自动轮播，不用插件

html部分: ![Image 1][] ![Image 1][] ![Image 1][] ![Image 1][] <div class

深藏阁楼爱情的钟/ 2022年04月12日 21:08/ 0 赞/ 775 阅读

相关 Swiper插件超简单实现轮播图

Swiper是纯javascript打造的滑动特效插件，面向手机、平板电脑等移动终端。能实现触屏焦点图、触屏Tab切换、触屏多图切换等常用效果。超好用话不多说，直接上教程

Love The Way You Lie/ 2022年02月14日 06:07/ 0 赞/ 450 阅读