swiper.js完美的解决触摸滑动效果

最新推荐文章于 2024-04-18 01:44:26 发布

浪荡酒剑仙

最新推荐文章于 2024-04-18 01:44:26 发布

阅读量9k

点赞数

分类专栏： web前端

本文链接：https://blog.csdn.net/cppypl/article/details/50297259

版权

web前端专栏收录该内容

2 篇文章 0 订阅

订阅专栏

Swiper 是一款免费以及轻量级的移动设备触控滑块的框架，使用硬件加速过渡（如果该设备支持的话）。主要使用与移动端的网站、网页应用程序（web apps），以及原生的应用程序（native apps）。主要是为IOS而设计的，同时，在Android、WP8系统以及现代桌面浏览器也有着良好的用户体验。

如何使用：

1、下载swiper最新版本https://github.com/nolimits4web/Swiper

2、在HTML Head中添加Swiper's CSS and JS:

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

其中引用的文件名以下载的为准。

3、使用下面的HTML布局

 <div class="swiper-container">
   <div class="swiper-wrapper">
       <!--First Slide-->
       <div class="swiper-slide"> 
         <!-- 这里添加第一个HTML内容 -->
       </div>      
       <!--Second Slide-->
       <div class="swiper-slide">
         <!--  这里添加第二个HTML内容 -->
       </div> 
       <!--Third Slide-->
       <div class="swiper-slide"> 
         <!--  这里添加第三个HTML内容 -->
       </div>
       <!--Etc..-->
   </div>
</div>

4、打开下载的文件中的idangerous.swiper.css，设置Swiper's的宽度以及高度（在文件的末尾）

/* 指定swiper 容器尺寸: */

.swiper-container, .swiper-slide {
  width: 500px;
  height: 200px;
}

5、初始化Swiper 在文档开始处，（或在窗口加载时）

<script type="text/javascript">
  window.onload = function() {
   var mySwiper = new Swiper('.swiper-container',{
     //添加需要的选项:
     mode:'horizontal',
     loop: true 
     //等等..
   });  
 }
 </script>

DEMO：这是一个带左右箭头，并且循环滚动的例子。可以直接复制代码查看

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <title>Swiper demo</title>
    <meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1, maximum-scale=1">

    <!-- Link Swiper's CSS -->
    <link rel="stylesheet" href="../dist/css/swiper.min.css">

    <!-- Demo styles -->
    <style>
    html, body {
        position: relative;
        height: 100%;
    }
    body {
        background: #eee;
        font-family: Helvetica Neue, Helvetica, Arial, sans-serif;
        font-size: 14px;
        color:#000;
        margin: 0;
        padding: 0;
    }
    .swiper-container {
        width: 100%;
        height: 100%;
        margin-left: auto;
        margin-right: auto;
    }
    .swiper-slide {
        text-align: center;
        font-size: 18px;
        background: #fff;

        /* Center slide text vertically */
        display: -webkit-box;
        display: -ms-flexbox;
        display: -webkit-flex;
        display: flex;
        -webkit-box-pack: center;
        -ms-flex-pack: center;
        -webkit-justify-content: center;
        justify-content: center;
        -webkit-box-align: center;
        -ms-flex-align: center;
        -webkit-align-items: center;
        align-items: center;
    }
    </style>
</head>
<body>
    <!-- Swiper -->
    <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 class="swiper-slide">Slide 4</div>
            <div class="swiper-slide">Slide 5</div>
            <div class="swiper-slide">Slide 6</div>
            <div class="swiper-slide">Slide 7</div>
            <div class="swiper-slide">Slide 8</div>
            <div class="swiper-slide">Slide 9</div>
            <div class="swiper-slide">Slide 10</div>
        </div>
        <!-- Add Pagination -->
        <div class="swiper-pagination"></div>
        <!-- Add Arrows -->
        <div class="swiper-button-next"></div>
        <div class="swiper-button-prev"></div>
    </div>

    <!-- Swiper JS -->
    <script src="../dist/js/swiper.min.js"></script>

    <!-- Initialize Swiper -->
    <script>
    var swiper = new Swiper('.swiper-container', {
        pagination: '.swiper-pagination',
        nextButton: '.swiper-button-next',
        prevButton: '.swiper-button-prev',
        slidesPerView: 1,
        paginationClickable: true,
        spaceBetween: 30,
        loop: true
    });
    </script>
</body>
</html>

浪荡酒剑仙

关注

0
点赞
踩
3

收藏

觉得还不错? 一键收藏
2
评论
swiper.js完美的解决触摸滑动效果

Swiper 是一款免费以及轻量级的移动设备触控滑块的框架，使用硬件加速过渡（如果该设备支持的话）。主要使用与移动端的网站、网页应用程序（web apps），以及原生的应用程序（native apps）。主要是为IOS而设计的，同时，在Android、WP8系统以及现代桌面浏览器也有着良好的用户体验。
复制链接

扫一扫