手机端滑动插件swiper3.x的使用示例

最新推荐文章于 2024-04-28 16:25:33 发布

vcxiaohan2

最新推荐文章于 2024-04-28 16:25:33 发布

阅读量6k

点赞数 1

分类专栏： jQuery插件

本文链接：https://blog.csdn.net/u011500781/article/details/50991410

版权

jQuery插件专栏收录该内容

29 篇文章 0 订阅

订阅专栏

请在这里查看示例 ☞ swiper示例

1 兼容性ie9勉强兼容

2 http://www.swiper.com.cn/api/index.html

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>test</title>
  <link rel="stylesheet" href="css/swiper.min.css">

  <script src="js/jquery-1.11.3.min.js"></script>
  <script src="js/swiper.jquery.min.js"></script>

  <style>
    * {margin: 0; padding: 0;}
    body,html {width: 100%; height: 100%;}
    .div1 {width: 80%; overflow: hidden; height: 50%; position: relative; margin: 0 auto;}
    .parallax-bg {width: 100%; height: 100%; background: url(images/p.jpg) no-repeat center; position: absolute;}
    .swiper-slide {box-sizing: border-box; height: 100%;}
    .a {border: 25px solid red;}
    .b {border: 25px solid blue;}
    .c {border: 25px solid green;}
    .d {border: 25px solid yellow;}
    .e {border: 25px solid purple;}
    .f {border: 25px solid black;}
    .g {border: 25px solid pink;}
    .h {border: 25px solid grey;}

    /*自定义分页器样式*/
    .swiper-pagination i {padding: 20px;}
    .swiper-pagination-bullet {background: red;}
    .swiper-pagination-bullet-active {background: blue;}

    /*更改前后按钮的大小*/
    .swiper-button-prev {width: 80px; height: 80px; background-size: 80px 80px;}
  </style>
</head>
<body>

    <div class="div1">
        <div class="parallax-bg" data-swiper-parallax="20%"></div>
        <div class="swiper-wrapper">
            <div class="swiper-slide a">01<img src="images/p.jpg"></div>
            <div class="swiper-slide b">02<img src="images/p.jpg"></div>
            <div class="swiper-slide c">03<img src="images/p.jpg"></div>
            <div class="swiper-slide d">04<img src="images/p.jpg"></div>
            <div class="swiper-slide e">05<img src="images/p.jpg"></div>
            <div class="swiper-slide f">06<img src="images/p.jpg"></div>
            <div class="swiper-slide g">07<img src="images/p.jpg"></div>
            <div class="swiper-slide h">08<img src="images/p.jpg"></div>
        </div>
        <div class="swiper-pagination"></div>
        <div class="swiper-button-prev"></div>
        <div class="swiper-button-next"></div>
        <!-- 前后按钮的颜色更改
        <div class="swiper-button-next swiper-button-white"></div>
        <div class="swiper-button-next swiper-button-black"></div>
        前后按钮的颜色更改 -->
        <div class="swiper-scrollbar"></div>
    </div>

    <div>
        一些事件
        <p class="prevPage">上一页</p>
        <p class="nextPage">下一页</p>
        <p class="pointPage">切换到指定页</p>
    </div>


  <script>
	$(function() {
        //swiper3.x 基本参数
        var pageTxt = ['a', 'b', 'c', 'd', 'e', 'f', 'g', 'h'];//自定义分页器中的文字

        var swiper = new Swiper('.div1', {//也可以用默认的类名swiper-container
            autoplay: 2000,//自动滑动，操作后停止
            autoplayDisableOnInteraction: false,//操作后是否停止自动滑动
            initialSlide: 1,//第一张显示的下标
            //direction: 'vertical',//垂直方向
            grabCursor: true,//改变鼠标形状
            parallax: true,//视差滚动，需设置absolute
            slidesPerView: 3,//一次显示张数
            //spaceBetween: 40,//每两张间隔
            //slidesPerGroup: 2,//每次最少滑动张数
            //slidesPerColumn: 2,//每列显示的张数
            /*breakpoints: {//响应式
                480: {
                    slidesPerView: 1,
                    spaceBetween: 10,
                },
                680: {
                    slidesPerView: 2,
                    spaceBetween: 20,
                },
            },*/
            freeMode: true,//是否自由滑动
            freeModeSticky: true,//自由活动下也能贴合边缘
            //effect: 'cube',//各浏览器处理不一样，慎用,ie9-支持不好 slide fade cube coverflow flip
            pagination: '.swiper-pagination',//分页器,类名最好别变
            paginationType: 'bullets',//分页器的样式 bullets fraction progress custom
            paginationClickable: true,//分页器是否可点
            paginationBulletRender: function(index, className) {//改变分页器的结构
                return '<i class="'+ className +'">'+ pageTxt[index] +'</i>'
            },
            prevButton: '.swiper-button-prev',//不要忘记点
            nextButton: '.swiper-button-next',
            scrollbar: '.swiper-scrollbar',//滚动条
            scrollbarDragggable: true,//是否可拖动
            keyboardControl: true,//键盘控制切换
            mousewheelControl: true,//滚轮控制切换
            loop: true,//无缝滑动
            onInit: function(swiper) {
                console.log('初始化完成');
            },
            onTouchStart: function(swiper) {
                console.log('触碰到');
            },
            onTouchMove: function(swiper) {
                console.log('滑动中');
            },
            onTouchEnd: function(swiper) {
                console.log('释放');
            },
            onSlideChangeStart: function(swiper) {
                console.log('执行切换刚开始');
            },
            onSlideChangeEnd: function(swiper) {
                console.log('执行切换刚结束');
            },
            onClick: function(swiper) {
                console.log('点击');
            },
        });

        //上一页
        $('.prevPage').on('click', function() {
            swiper.slidePrev();
        });
        //下一页
        $('.nextPage').on('click', function() {
            swiper.slideNext();
        });
        //指定页
        $('.pointPage').on('click', function() {
            swiper.slideTo(4);
        });



	});


  	
  </script>
	



  
</body>
</html>

vcxiaohan2

关注

1
点赞
踩
3

收藏

觉得还不错? 一键收藏
1
评论
手机端滑动插件swiper3.x的使用示例

1 兼容性ie9勉强兼容2 http://www.swiper.com.cn/api/index.html test * {margin: 0; padding: 0;} body,html {width: 100%; height: 100%;} .div1 {width: 80%; overflow: hidden;
复制链接

扫一扫