Swiper 触摸滑动库官方帮助

最新推荐文章于 2022-09-14 14:22:14 发布

0000000xj

最新推荐文章于 2022-09-14 14:22:14 发布

阅读量154

点赞数

分类专栏： javasript

原文链接：https://www.oschina.net/p/swiper?hmsr=aladdin1e1

版权

javasript 专栏收录该内容

4 篇文章

订阅专栏

@Swiper 触摸滑动库

Swiper 触摸滑动库官方帮助

https://www.oschina.net/p/swiper?hmsr=aladdin1e1

Swiper开篇

一关于Swiper

swiper是一款轻量级以及免费的移动设备触控滑块的js框架，主要运用于移动端的操作，但也可以用于pc端页面效果制作，完全的开源免费，

二学习Swiper

Swiper官网提供了学习方法以及API文档，为我们学习提供了很大的帮助，在学习之前可以先看一下官网的在线演示效果，包括基础演示和精彩移动端以及PC端的页面展示，了解Swiper的精彩之处，下面通过一个京东主页面的轮播来介绍Swiper（京东轮播图属于固定大小的轮播图，比较简单）

1.准备工作

  首先我们需要下载swiper，官方网站提供，可以下载完整的zip文件包，也可以只下载这三个文件（jquery-1.11.3.min.js    swiper.min.js   swiper.min.css ）,新建文件夹js和css，将js文件放在js中，将css文件放在css中，同时去京东官网获取轮播图片，放在image文件夹下

2 新建html文件

将下载的文件引入到页面中，官网中介绍了，首先加载插件，需要用到的文件有swiper.min.js和swiper.min.css文件。可下载Swiper文件或使用CDN

京东轮播 3 HTML内容。

<div class="swiper-container myswiper"> //一个大容器装载内容，高度是有内部的内容撑起
<div class="swiper-wrapper">
    <div class="swiper-slide">
        <a href="#"> //因为京东的图片是链接，图片包裹在a中
            <img src="image/1.jpg" alt="">  //可以直接获取图片的网页地址
        </a>
    </div>
    <div class="swiper-slide">
         <a href="#">
            <img src="image/2.jpg" alt="">
        </a>
    </div>
    <div class="swiper-slide">
         <a href="#">
            <img src="image/3.jpg" alt="">
        </a>
    </div>
    <div class="swiper-slide">
         <a href="#">
            <img src="image/4.jpg" alt="">
        </a>
    </div>
    <div class="swiper-slide">
         <a href="#">
            <img src="image/5.jpg" alt="">
        </a>
    </div>

</div>
<!-- 如果需要分页器 -->
<div class="swiper-pagination"></div> //就是下面的小圆点

<!-- 如果需要导航按钮 -->
<div class="swiper-button-prev swiper-button-white butt"></div> //向左的箭头
<div class="swiper-button-next"></div> //向右的箭头

 <!--如果需要滚动条 -->
<!--<div class="swiper-scrollbar"></div>//此处不需要，京东轮播图不需要

--> 3 .给Swiper定义一个大小

    因为京东图片大小为540*470，你可以直接在swiper-container中定义大小，也可以重新定义一个class来定义大小（此处我用myswiper）

*{
margin:0;
padding:0;
}
.myswiper{
width:590px;
height: 470px;
}
4.初始化Swiper：最好是挨着标签（如果没有紧挨着可以在函数前加onload函数）

完整代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>京东轮播</title>
    <link rel="stylesheet" href="css/swiper.min.css" >
    <script src="js/jquery-1.11.3.min.js"></script>
    <script src="js/swiper.min.js"></script>
    <style>
//需要更改那个属性，就重新写css样式进行覆盖
        *{
            margin:0;
            padding:0;
        }
        .myswiper{
            width:590px;
            height: 470px;
            border:1px solid red;
        }
        .swiper-button-next, .swiper-button-prev{
            width:20px;
            height: 21px;

        }
        .mySwiperBut{
            background-image: none;
            width:24px;
            height: 40px;
            background: rgba(0,0,0,.3);
            text-align: center;
            line-height: 40px;
            color: hsla(0,0%,100%,.4);
            font-size: 18px;
 
        }//向前向后按钮的共同样式
        .mySwiperBut:hover{
             background: rgba(0,0,0,.6);
        }
        .swiper-pagination-bullet{
            width: 7px;
            height: 7px;
            border:2px solid #fff;
            transition: all .2s ease;
            background: transparent;
             z-index: 1000000;
        }//分页小圆点的样式
        .swiper-button-prev {
            left: 0px;
        }
        .swiper-button-next {
            right: 0px;
        }
        .swiper-pagination{
            text-align: left;
            margin-left: 46px;
            bottom:20px;
        }
        .swiper-pagination-bullet-active{
            background: #fff;
            opacity: 1;
            /*border:2px solid #b9beba;*/
            /*transition: background .2s ease;*/

        }
    </style>
</head>
<body>
    <div class="swiper-container myswiper">
    <div class="swiper-wrapper">
        <div class="swiper-slide">
            <a href="#">
                <img src="image/1.jpg" alt="">
            </a>
        </div>
        <div class="swiper-slide">
             <a href="#">
                <img src="image/2.jpg" alt="">
            </a>
        </div>
        <div class="swiper-slide">
             <a href="#">
                <img src="image/3.jpg" alt="">
            </a>
        </div>
        <div class="swiper-slide">
             <a href="#">
                <img src="image/4.jpg" alt="">
            </a>
        </div>
        <div class="swiper-slide">
             <a href="#">
                <img src="image/5.jpg" alt="">
            </a>
        </div>

    </div>
    <!-- 如果需要分页器 -->
    <div class="swiper-pagination"></div>
    
    <!-- 如果需要导航按钮 -->
    <div class="swiper-button-prev  mySwiperBut"><</div>
    <div class="swiper-button-next  mySwiperBut">></div>
    
     <!--如果需要滚动条 -->
    <!--<div class="swiper-scrollbar"></div>
</div>-->
<script>        
  var mySwiper = new Swiper ('.swiper-container', {
    // direction: 'vertical',
    loop: true,
    autoplay:true,
    
    // 如果需要分页器
    pagination: {
      el: '.swiper-pagination',
      clickable: true,
      clickableClass : 'my-pagination-clickable',
    
    },
    
    // 如果需要前进后退按钮
    navigation: {
      nextEl: '.swiper-button-next',
      prevEl: '.swiper-button-prev',
    },
    
    // 如果需要滚动条
    // scrollbar: {
    //   el: '.swiper-scrollbar',
    // },
  })        
  </script>
</body>
</html>