swiper2.7.6常用效果整理

最新推荐文章于 2024-06-21 23:12:22 发布
最新推荐文章于 2024-06-21 23:12:22 发布
阅读量1.2k 收藏 5
点赞数 1
原文链接：https://juejin.im/post/5c666436f265da2dcf626fac
版权

swiper2.7.6官网

在线预览：swiper2.7.6_demo

下载

1.swiper-基础效果

<div class="swiper_demo swiper_demo1">
    <div class="swiper-container">
        <div class="swiper-wrapper">
            <div class="swiper-slide" style="background-color: #4390ee;">
                swiper-slide1
            </div>
            <div class="swiper-slide" style="background-color: #ff8604;">
                swiper-slide2
            </div>
            <div class="swiper-slide" style="background-color: #49a430;">
                swiper-slide3
            </div>
        </div>
    </div>
    <div class="pagination"></div>
    <div class="arrow">
        <i class="arrow-left">left</i>
        <i class="arrow-right">right</i>
    </div>
    <style>
    .swiper_demo1 { position: relative; width: 970px; margin: 20px auto; color: #fff; }
    .swiper_demo1 .swiper-slide { font-size: 24px; line-height: 250px; text-align: center; }
    .swiper_demo1 .pagination { position: absolute; z-index: 1; bottom: 10px; left: 0; width: 100%; text-align: center; }
    .swiper_demo1 .swiper-pagination-switch { display: inline-block; width: 10px; height: 10px; margin: 0 5px; cursor: pointer; border-radius: 50%; background-color: #fff; }
    .swiper_demo1 .pagination .swiper-active-switch { background-color: #000; }
    .swiper_demo1 .arrow i { position: absolute; z-index: 1; top: 50%; display: inline-block; cursor: pointer; }
    .swiper_demo1 .arrow .arrow-left { left: 10px; }
    .swiper_demo1 .arrow .arrow-right { right: 10px; }
    </style>
    <script>
    $(function() {
        var mySwiper1 = new Swiper('.swiper_demo1 .swiper-container', {
            autoplay: 0,
            loop: true,
            speed: 500,
            slidesPerView: 1,
            calculateHeight: true,
            pagination: '.swiper_demo1 .pagination',
            paginationClickable: true,
        });
        $('.swiper_demo1 .arrow-left').on('click', function(e) {
            e.preventDefault();
            mySwiper1.swipePrev();
        })
        $('.swiper_demo1 .arrow-right').on('click', function(e) {
            e.preventDefault();
            mySwiper1.swipeNext();
        })
    });
    </script>
</div>
复制代码

2.swiper-列表

<div class="swiper_demo swiper_demo2">
    <div class="swiper-container">
        <div class="swiper-wrapper">
            <div class="swiper-slide" style="background-color: #4390ee;">
                swiper-slide1
            </div>
            <div class="swiper-slide" style="background-color: #ff8604;">
                swiper-slide2
            </div>
            <div class="swiper-slide" style="background-color: #49a430;">
                swiper-slide3
            </div>
            <div class="swiper-slide" style="background-color: #973e76;">
                swiper-slide4
            </div>
            <div class="swiper-slide" style="background-color: #ca4040;">
                swiper-slide5
            </div>
        </div>
    </div>
    <div class="pagination"></div>
    <div class="arrow">
        <i class="arrow-left">left</i>
        <i class="arrow-right">right</i>
    </div>
    <style>
    .swiper_demo2 { position: relative; width: 970px; margin: 20px auto; color: #fff; }
    .swiper_demo2 .swiper-slide { font-size: 24px; line-height: 250px; text-align: center; }
    .swiper_demo2 .pagination { position: absolute; z-index: 1; bottom: 10px; left: 0; width: 100%; text-align: center; }
    .swiper_demo2  .swiper-pagination-switch { display: inline-block; width: 10px; height: 10px; margin: 0 5px; cursor: pointer; border-radius: 50%; background-color: #fff; }
    .swiper_demo2  .swiper-visible-switch { background-color: #aaa; }
    .swiper_demo2  .swiper-active-switch { background-color: #222; }
    .swiper_demo2 .arrow i { position: absolute; z-index: 1; top: 50%; display: inline-block; cursor: pointer; }
    .swiper_demo2 .arrow .arrow-left { left: 10px; }
    .swiper_demo2 .arrow .arrow-right { right: 10px; }
    </style>
    <script>
    $(function() {
        var mySwiper2 = new Swiper('.swiper_demo2 .swiper-container', {
            autoplay: 0,
            loop: true,
            speed: 500,
            slidesPerView: 3,
            calculateHeight: true,
            pagination: '.swiper_demo2 .pagination',
            paginationClickable: true,
        });
        $('.swiper_demo2 .arrow-left').on('click', function(e) {
            e.preventDefault();
            mySwiper2.swipePrev();
        })
        $('.swiper_demo2 .arrow-right').on('click', function(e) {
            e.preventDefault();
            mySwiper2.swipeNext();
        })
    });
    </script>
</div>
复制代码

3.swiper-垂直滚动

注：需要给 swiper-container 和 swiper-slide 设置高度。 swiper-container 高度 = slidesPerView * swiper-slide 高度。

<div class="swiper_demo swiper_demo3">
    <div class="swiper-container">
        <div class="swiper-wrapper">
            <div class="swiper-slide" style="background-color: #4390ee;">
                swiper-slide1
            </div>
            <div class="swiper-slide" style="background-color: #ff8604;">
                swiper-slide2
            </div>
            <div class="swiper-slide" style="background-color: #49a430;">
                swiper-slide3
            </div>
            <div class="swiper-slide" style="background-color: #973e76;">
                swiper-slide4
            </div>
            <div class="swiper-slide" style="background-color: #ca4040;">
                swiper-slide5
            </div>
        </div>
    </div>
    <div class="arrow">
        <i class="arrow-up">up</i>
        <i class="arrow-down">down</i>
    </div>
    <style>
    .swiper_demo3 { position: relative; width: 970px; margin: 20px auto; color: #fff; }
    .swiper_demo3 .swiper-container { height: 300px !important; }
    .swiper_demo3 .swiper-slide { font-size: 24px; line-height: 100px; height: 100px; text-align: center; }
    .swiper_demo3 .arrow i { position: absolute; z-index: 1; left: 50%; display: inline-block; cursor: pointer; }
    .swiper_demo3 .arrow .arrow-up { top: 10px; }
    .swiper_demo3 .arrow .arrow-down { bottom: 10px; }
    </style>
    <script>
    $(function() {
        var mySwiper3 = new Swiper('.swiper_demo3 .swiper-container', {
            autoplay: 0,
            loop: true,
            speed: 500,
            slidesPerView: 3,
            calculateHeight: true,
            mode:'vertical',
        });
        $('.swiper_demo3 .arrow-up').on('click', function(e) {
            e.preventDefault();
            mySwiper3.swipePrev();
        })
        $('.swiper_demo3 .arrow-down').on('click', function(e) {
            e.preventDefault();
            mySwiper3.swipeNext();
        })
    });
    </script>
</div>
复制代码

4.swiper-选项卡效果

<div class="swiper_demo swiper_demo4">
    <div class="tabs">
        <a href="#" class="active">Tab 1</a>
        <a href="#">Tab 2</a>
        <a href="#">Tab 3</a>
    </div>
    <div class="swiper-container">
        <div class="swiper-wrapper">
            <div class="swiper-slide" style="background-color: #4390ee">
                Tab 1 con
            </div>
            <div class="swiper-slide" style="background-color: #49a430">
                Tab 2 con
            </div>
            <div class="swiper-slide" style="background-color: #ff8604">
                Tab 3 con
            </div>
        </div>
    </div>
    <style>
    .swiper_demo4 { position: relative; width: 970px; margin: 0 auto; }
    .swiper_demo4 .tabs a { margin-right: 20px; }
    .swiper_demo4 .tabs a.active { color: #f00; }
    .swiper_demo4 .swiper-slide { line-height: 100px; box-sizing: border-box; height: 100px; text-align: center; color: #fff; }
    </style>
    <script>
    $(function() {
        var tabsSwiper = new Swiper('.swiper_demo4 .swiper-container', {
            speed: 500,
            onlyExternal: false,
            onSlideChangeStart: function() {
                $(".tabs .active").removeClass('active')
                $(".tabs a").eq(tabsSwiper.activeIndex).addClass('active')
            }
        });
        $(".tabs a").on('touchstart mousedown', function(e) {
            e.preventDefault();
            $(".tabs .active").removeClass('active')
            $(this).addClass('active');
            tabsSwiper.swipeTo($(this).index())
        });
        $(".tabs a").click(function(e) {
            e.preventDefault();
        });
    });
    </script>
</div>
复制代码

5.swiper-3D效果

需要引入 idangerous.swiper.3dflow.js 和 idangerous.swiper.3dflow.css。 rotate：slide 做 3d 旋转时 Y 轴的旋转角度。 stretch：每个 slide 之间的拉伸值，越大 slide 靠得越紧。 depth：slide 的位置深度，值越大z轴距离越远，看起来越小。 shadows：产生了 3d 旋转的 slide 是否使用阴影。 注：IE8 及 IE8以下不支持 3D 效果，变为列表模式。

<div class="swiper_demo swiper_demo5">
    <div class="swiper-container">
        <div class="swiper-wrapper">
            <div class="swiper-slide" style="background-color: #4390ee;">
                swiper-slide1
            </div>
            <div class="swiper-slide" style="background-color: #ff8604;">
                swiper-slide2
            </div>
            <div class="swiper-slide" style="background-color: #49a430;">
                swiper-slide3
            </div>
            <div class="swiper-slide" style="background-color: #ca4040;">
                swiper-slide4
            </div>
            <div class="swiper-slide" style="background-color: #973e76;">
                swiper-slide5
            </div>
        </div>
    </div>
    <div class="arrow">
        <i class="arrow-left">left</i>
        <i class="arrow-right">right</i>
    </div>
    <style>
    .swiper_demo5 { position: relative; width: 970px; margin: 20px auto; color: #fff; }
    .swiper_demo5 .swiper-slide { font-size: 24px; line-height: 250px; text-align: center; }
    .swiper_demo5 .arrow i { position: absolute; z-index: 1; top: 50%; display: inline-block; cursor: pointer; }
    .swiper_demo5 .arrow .arrow-left { left: 10px; }
    .swiper_demo5 .arrow .arrow-right { right: 10px; }
    </style>
    <script>
    $(function() {
        var mySwiper5 = new Swiper('.swiper_demo5 .swiper-container', {
            autoplay: 0,
            loop: true,
            speed: 500,
            slidesPerView: 3,
            calculateHeight: true,
            tdFlow: {
              rotate : 0,
              stretch :50,
              depth: 120,
              shadows : true
            }
        });
        $('.swiper_demo5 .arrow-left').on('click', function(e) {
            e.preventDefault();
            mySwiper5.swipePrev();
        })
        $('.swiper_demo5 .arrow-right').on('click', function(e) {
            e.preventDefault();
            mySwiper5.swipeNext();
        })
    });
    </script>
</div>
复制代码

6.swiper-双轮播效果

<div class="swiper_demo swiper_demo6">
    <!-- 轮播上 -->
    <div class="swiper-container swiper_top">
        <div class="swiper-wrapper">
            <div class="swiper-slide" style="background-color: #4390ee;">
                swiper-slide1
            </div>
            <div class="swiper-slide" style="background-color: #ff8604;">
                swiper-slide2
            </div>
            <div class="swiper-slide" style="background-color: #49a430;">
                swiper-slide3
            </div>
            <div class="swiper-slide" style="background-color: #ca4040;">
                swiper-slide4
            </div>
            <div class="swiper-slide" style="background-color: #973e76;">
                swiper-slide5
            </div>
        </div>
    </div>
    <div class="arrow">
        <i class="arrow-left">left</i>
        <i class="arrow-right">right</i>
    </div>
    <!-- 轮播上 E -->
    <!-- 轮播下 -->
    <div class="swiper-container swiper_bottom">
        <div class="swiper-wrapper">
            <div class="swiper-slide" style="background-color: #4390ee;">
                swiper-slide1
            </div>
            <div class="swiper-slide" style="background-color: #ff8604;">
                swiper-slide2
            </div>
            <div class="swiper-slide" style="background-color: #49a430;">
                swiper-slide3
            </div>
            <div class="swiper-slide" style="background-color: #ca4040;">
                swiper-slide4
            </div>
            <div class="swiper-slide" style="background-color: #973e76;">
                swiper-slide5
            </div>
        </div>
    </div>
    <!-- 轮播下 E -->
    <style>
    .swiper_demo6 { position: relative; width: 970px; margin: 20px auto; color: #fff; }
    .swiper_demo6 .swiper_top { margin-bottom: 20px; }
    .swiper_demo6 .swiper_top .swiper-slide { font-size: 24px; line-height: 100px; text-align: center; }
    .swiper_demo6 .swiper_bottom .swiper-slide { line-height: 50px; text-align: center; }
    .swiper_demo6 .swiper_bottom .swiper-slide-active { color: #f00; }
    .swiper_demo6 .arrow i { position: absolute; z-index: 1; top: 25%; display: inline-block; cursor: pointer; }
    .swiper_demo6 .arrow .arrow-left { left: 10px; }
    .swiper_demo6 .arrow .arrow-right { right: 10px; }
    </style>
    <script>
    $(function() {
        var mySwiper6top = new Swiper('.swiper_top', {
            loop: false,
            calculateHeight: true,
            onSlideChangeStart: function(swiper) {
                var ind = $(".swiper_top .swiper-slide").index($(".swiper_top .swiper-slide-active"));
                mySwiper6bottom.swipeTo(ind, 1000, false);
                $(".swiper_bottom .swiper-slide").removeClass("swiper-slide-active");
                $(".swiper_bottom .swiper-slide").eq(ind).addClass("swiper-slide-active");
            }
        });
        var mySwiper6bottom = new Swiper('.swiper_bottom', {
            slidesPerView: 3,
            loop: false,
            noSwiping: true,
            calculateHeight: true,
        });
        $('.swiper_demo6 .arrow-left').on('click', function(e) {
            e.preventDefault()
            mySwiper6top.swipePrev()
            var ind = $(".swiper_top .swiper-slide").index($(".swiper_top .swiper-slide-active"));
            mySwiper6bottom.swipeTo(ind, 1000, false);
            $(".swiper_bottom .swiper-slide").removeClass("swiper-slide-active");
            $(".swiper_bottom .swiper-slide").eq(ind).addClass("swiper-slide-active");
        })
        $('.swiper_demo6 .arrow-right').on('click', function(e) {
            e.preventDefault()
            mySwiper6top.swipeNext()
            var ind = $(".swiper_top .swiper-slide").index($(".swiper_top .swiper-slide-active"));
            mySwiper6bottom.swipeTo(ind, 1000, false);
            $(".swiper_bottom .swiper-slide").removeClass("swiper-slide-active");
            $(".swiper_bottom .swiper-slide").eq(ind).addClass("swiper-slide-active");
        });

        $(".swiper_demo6 .swiper_bottom .swiper-slide").click(function() {
            $(".swiper_bottom .swiper-slide").removeClass("swiper-slide-active");
            $(this).addClass("swiper-slide-active");
            mySwiper6top.swipeTo($(this).index(), 1000, false);
        })
    });
    </script>
</div>
复制代码

7.swiper-添加数字分页效果1

<div class="swiper_demo swiper_demo7">
    <div class="swiper-container">
        <div class="swiper-wrapper">
            <div class="swiper-slide" style="background-color: #4390ee;">
                swiper-slide1
            </div>
            <div class="swiper-slide" style="background-color: #ff8604;">
                swiper-slide2
            </div>
            <div class="swiper-slide" style="background-color: #49a430;">
                swiper-slide3
            </div>
        </div>
    </div>
    <div class="pagination"></div>
    <style>
    .swiper_demo7 { position: relative; width: 970px; margin: 20px auto; color: #fff; }
    .swiper_demo7 .swiper-slide { font-size: 24px; line-height: 250px; text-align: center; }
    .swiper_demo7 .pagination { position: absolute; z-index: 1; bottom: 10px; left: 0; width: 100%; text-align: center; }
    .swiper_demo7 .swiper-pagination-switch { line-height: 20px; display: inline-block; width: 20px; height: 20px; margin: 0 5px; cursor: pointer; text-align: center; color: #000; background-color: #eee; }
    .swiper_demo7 .pagination .swiper-active-switch { background-color: #a0a0a0; }
    </style>
    <script>
    $(function() {
        var mySwiper7 = new Swiper('.swiper_demo7 .swiper-container', {
            autoplay: 0,
            loop: true,
            speed: 500,
            slidesPerView: 1,
            calculateHeight: true,
            pagination: '.swiper_demo7 .pagination',
            paginationClickable: true,
        });
        var page_list = $(".swiper_demo7 .pagination span");
        for (var i = 0; i < page_list.length; i++) {
            page_list.eq(i).text(i + 1);
        }
    });
    </script>
</div>
复制代码

8.swiper-添加数字分页效果2

<div class="swiper_demo swiper_demo8">
    <div class="swiper-container">
        <div class="swiper-wrapper">
            <div class="swiper-slide" style="background-color: #4390ee;">
                swiper-slide1
            </div>
            <div class="swiper-slide" style="background-color: #ff8604;">
                swiper-slide2
            </div>
            <div class="swiper-slide" style="background-color: #49a430;">
                swiper-slide3
            </div>
        </div>
    </div>
    <div class="pagination"></div>
    <div class="page_text"></div>
    <style>
    .swiper_demo8 { position: relative; width: 970px; margin: 20px auto; color: #fff; }
    .swiper_demo8 .swiper-slide { font-size: 24px; line-height: 250px; text-align: center; }
    .swiper_demo8 .pagination { position: absolute; z-index: 1; bottom: 10px; left: 0; width: 100%; text-align: center; }
    .swiper_demo8 .page_text { position: absolute; z-index: 1; right: 10px; bottom: 10px; }
    .swiper_demo8 .swiper-pagination-switch { display: inline-block; width: 10px; height: 10px; margin: 0 5px; cursor: pointer; border-radius: 50%; background-color: #fff; }
    .swiper_demo8 .pagination .swiper-active-switch { background-color: #000; }
    </style>
    <script>
    $(function() {
        var mySwiper8 = new Swiper('.swiper_demo8 .swiper-container', {
            autoplay: 0,
            loop: true,
            speed: 500,
            slidesPerView: 1,
            calculateHeight: true,
            pagination: '.swiper_demo8 .pagination',
            paginationClickable: true,
            onSlideChangeStart: function(swiper) {
                pageTextFun();
            }
        });
        pageTextFun = function() {
            var page_length = $(".swiper_demo8 .swiper-pagination-switch").length;
            var now_page = $(".swiper_demo8 .swiper-active-switch").index() + 1;
            $(".swiper_demo8 .page_text").text(now_page + '/' + page_length);
        }
        pageTextFun();
    });
    </script>
</div>
复制代码

9.swiper-根据容器 container 的宽度调整 slides 数目

<div class="swiper_demo swiper_demo9">
    <div class="swiper-container">
        <div class="swiper-wrapper">
            <div class="swiper-slide" >
                <p style="background-color: #4390ee;">swiper-slide1</p>
            </div>
            <div class="swiper-slide" >
                <p style="background-color: #ff8604;">swiper-slide2</p>
            </div>
            <div class="swiper-slide" >
                <p style="background-color: #49a430;">swiper-slide3</p>
            </div>
        </div>
    </div>
    <div class="arrow">
        <i class="arrow-left">left</i>
        <i class="arrow-right">right</i>
    </div>
    <style>
    .swiper_demo9 { position: relative; width: 970px; margin: 20px auto; color: #fff; }
    .swiper_demo9 .swiper-slide { font-size: 24px; line-height: 250px; width: 400px; padding: 0 20px; text-align: center; }
    .swiper_demo9 .arrow i { position: absolute; z-index: 1; top: 40%; display: inline-block; cursor: pointer; }
    .swiper_demo9 .arrow .arrow-left { left: 10px; }
    .swiper_demo9 .arrow .arrow-right { right: 10px; }
    </style>
    <script>
    $(function() {
        var mySwiper9 = new Swiper('.swiper_demo9 .swiper-container', {
            autoplay: 0,
            loop: true,
            speed: 500,
            slidesPerView: "auto",
            calculateHeight: true,
            centeredSlides: true,
        });
        $('.swiper_demo9 .arrow-left').on('click', function(e) {
            e.preventDefault();
            mySwiper9.swipePrev();
        })
        $('.swiper_demo9 .arrow-right').on('click', function(e) {
            e.preventDefault();
            mySwiper9.swipeNext();
        })
    });
    </script>
</div>
复制代码

期待您的关注！

weixin_33736649
关注
vue使用swiper2.7.6兼容ie9及以上
weixin_45809419的博客
08-07 1502
公司的项目最近要做浏览器兼容，项目中使用的swiper在ie9下控制台会一直报错"无法获取未定义或 null 引用的属性“contains ”" 百度了解了下原因： Swiper3以后的主要是针对移动端的，要兼容ie9及以下的话需要使用swiper2.X swiper各版本兼容性： swiper2：pc端（IE7+），部分移动端浏览器 swiper3：pc端（IE10+），部分移动端浏览器 swiper4：移动端浏览器、部分PC端浏览器、IE10+ 图片来源：https://blog.
使用swiper制作简单的自动轮播效果
asdfg2047的博客
07-08 9970
目录swiper插件1.引入jQuery库2.引入插件swiper3.引入swiper插件中的css样式导入图片实现轮播图自动切换效果首先创建一个html页面，然后依次引入插件。 2.引入插件swiper 3.引入swiper插件中的css样式 导入图片 1.引入本地已经下载好的图片或者在网上提取出来的图片 使用插件 相当于开关，true表示开启~不仅可以自动切换，也可以用鼠标点击手动切换。...
swiper凸显效果
03-16
swiper凸显效果，中间部分正常显示，其他部分显示为灰色。 技术点：DIV+CSS、jQ、swiper。
swiper效果
weixin_43994434的博客
09-06 467
一：播放时文字飞入 配置参数：parallax--设置为true开启Swiper的视差效果，内容在切换时更有层次感。 parallax有三种视觉效果：视差位移变化，视差透明度变化，视差缩放变化 这里使用的时视差位移变化，要在所需要的元素上增加data-swiper-parallax属性 （还加了speed参数控制速度，调整效果） const swiper = new Swiper('.swiper-container',{ autoplay: { delay: 20...
swiper 轮播中常用的效果，持续更新
weixin_38168484的博客
08-08 540
　　swiper一款非常好用的轮播插件，支持移动端和PC端，用过很多次了，这次简单的总结一下。方便以后查找使用，说明一下，下面的例子是基于swiper 4.0+版本的，如果你是其他的版本，请自行前往官网查看 至于为什么使用swiper，而不是自己手写，请看下面官网的截图： 开个玩笑，说白了，就是这个确实非常好用，而且很好上手，没有什么难度。而且里面的API很友好，不像有的文档，看...
swiper 实现轮播图效果(图片渐行渐远，文字从中间向四周浮现)
qq_51432136的博客
04-24 852
CSS动画效果实现
基于Swiper 2.7.6实现的带缩略图功能的轮播图-附件资源
03-02
基于Swiper 2.7.6实现的带缩略图功能的轮播图-附件资源
swiper3实现卡片效果banner
04-13
Swiper 是一款强大的触摸滑动插件，常用于创建轮播图、卡片切换等效果，尤其在移动设备上表现出色。在本示例中，我们将深入探讨如何利用 Swiper3 实现一个具有卡片效果的 banner。 Swiper3 是 Swiper 系列的第三个...
在vue项目中使用swiper2.7.6
anmi7832的博客
10-12 624
$ npm install swiper@2.7.6 --save-dev npm WARN rollback Rolling back node-pre-gyp@0.10.0 failed (this is probably harmless): EPERM: operation not permitted, scandir 'F:\test\text-vue\test\n...
swiper滚动天气效果
09-08
swiper滚动天气效果
基于Swiper实现的列表切换效果
09-08
这是一个基于Swiper实现的列表切换效果，与之前做的相比较更加的大气一些，因为增加了一些过渡的动画效果，在移动端的体验更好。
swiper
yuanxu21的博客
03-06 2102
swiper是一个相当强大的图片展示插件，下面我来介绍一下swiper的简单图片轮播功能。一般情况下我们所说的图片轮播就是在一个区域内有几张图片循环展示，有的可以滑动图片观看下一张图，有的可以点击图下方的小点来选择哪个图，也有点击两侧的左右按钮来切换图片展示。我们先来看一下如何实现 12345678910111213141516171819div class="swiper-contai
完全指南：如何使用 Swiper 插件实现强大的轮播效果
阿猫故乡的博客
12-04 8937
使用 Swiper 插件有以下好处：简单易用：Swiper 核心库提供了丰富的 API 供使用者随意配置，同时支持自定义事件和回调函数，使得使用起来非常方便。多种轮播效果：Swiper 支持多种轮播效果，如滑动、淡入淡出等，且易于定制。高性能：Swiper 对于移动端设备做了很好的兼容性处理，通过 CSS3 实现动画，使得页面流畅、响应迅速。支持响应式布局：Swiper 提供了响应式布局解决方案，可以轻松适配不同尺寸设备并保持良好的用户体验。
纯血鸿蒙APP实战开发——短视频切换实现案例
m0_71524094的博客
05-06 1087
短视频切换在应用开发中是一种常见场景，上下滑动可以切换视频，十分方便。本模块基于Swiper组件和Video组件实现短视频切换功能。
全网最全.swiper样式库，赶快收藏起来慢慢研究吧
最新发布
weixin_56334307的博客
06-21 577
全网最全.swiper样式库，赶快收藏起来慢慢研究吧
swiper.min.js插件
热门推荐
shengmeshi的博客
07-24 2万+
swiper.min.js插件
前端笔记——Swiper（持续更新中）~
Mike白的博客
06-30 2846
Swiper 是一个流行的、免费的、开源的JavaScript库，用于创建移动设备和桌面端的滑块轮播图、触摸滑动页面、图片和内容的滑动和切换效果。Swiper 可以实现多种滑动效果，如淡入淡出、平移、3D 立体翻转等，同时也支持响应式设计和自动播放等功能。Swiper 具有良好的可定制性和易用性，支持多种平台和浏览器，还提供了丰富的 API 和事件，可以轻松地实现各种复杂的滑动效果和交互动画。
图片轮播——Swiper实例
默存
12-21 1665
一、Swiper简介 Swiper 是一款免费以及轻量级的移动设备触控滑块的js框架，使用硬件加速过渡（如果该设备支持的话）。主要使用于移动端的网站、移动web apps，native apps和hybrid apps。主要是为IOS而设计的，同时，在Android、WP8系统也有着良好的用户体验，Swiper从3.0开始不再全面支持PC端。因此，如需在PC上兼容更多的浏览器，可以选择...
移动端Swiper效果深度解析
"移动端效果之Swiper详解 - 介绍移动端Swiper组件的实现原理与核心功能" Swiper 是一款流行的移动端轮播组件，常用于创建滑动效果，如轮播图、幻灯片等。在移动端应用开发中，Swiper 提供了丰富的功能，包括自动...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值