最新消息:关注【太平洋学习网】微信公众号,可以获取全套资料,【全套Java基础27天】【JavaEE就业视频4个月】【Android就业视频4个月】

Swiper|Most Modern Mobile Touch Slide|swiper 中文网

HTML5 admin 浏览 评论

Swiper The Most Modern Mobile Touch Slide是最具现代化的移动触屏滑块,你所知道的js幻灯片效果,js左右滚动效果,各种触屏切换效果等都是这个swiper js框架所实现的,只有你想不到,没有你做不到的,下面来看看swiper做出来的slide滑动效果。

swiper拇指画廊效果,如图。

QQ截图20171020213628.jpg

swiper 3D翻转效果,如图。

GIF.gif

还有很多很多功能效果,请登录swiper网站查看效果,看是否有你需求的那样。

swiper 中文网:http://www.swiper.com.cn/demo/index.html

swiper 英文网:http://idangero.us/swiper/demos/ 看不懂英文的,可以使用google浏览器翻译成中文

让我们开始Getting Started With Swiper做一个简单的helloworld默认功能吧!,如下这样的。

moren.gif

1:Download and install Swiper 下载并安装swiper框架。

    1) We can download them from Swiper GitHub repository 我们可以登录到github里面下载所需要的swiper.min.js和swiper.min.css文件,然后引入到项目中

    2)或者可以直接使用BootCDN从网络中直接加载swiper文件,如下。

<link rel="stylesheet" href="https://cdn.bootcss.com/Swiper/4.0.1/css/swiper.min.css">
<script src="https://cdn.bootcss.com/Swiper/4.0.1/js/swiper.min.js"></script>

2:Include Swiper Files To Website/App 在我们的网页或app中引入js与css样式这两个文件,如下这样引入。

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

3:Add Swiper HTML Layout 添加基本的swiper内容在body标签之间。

<body>
    <div class="swiper-container">
        <!-- Additional required wrapper -->
        <div class="swiper-wrapper">
            <!-- Slides -->
            <div class="swiper-slide">Slide 1</div>
            <div class="swiper-slide">Slide 2</div>
            <div class="swiper-slide">Slide 3</div>
        </div>

        <!-- If we need pagination 如果需要分页则添加-->
        <div class="swiper-pagination"></div>

        <!-- If we need navigation buttons 如果需要上一页,下一页则添加 -->
        <div class="swiper-button-prev"></div>
        <div class="swiper-button-next"></div>

        <!-- If we need scrollbar 如果需要底部滑块则添加-->
        <div class="swiper-scrollbar"></div>
    </div>
</body>

4:Swiper CSS Stlyes/Size 设置swiper显示的样式大小,例如。

<!-- slider内容样式,这是自定义的-->
<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: 600px;
  height: 300px;
 }
 .swiper-slide {
  text-align: center;
  font-size: 18px;
  background: #fff;

  /* Center slide text vertically slide内部字体垂直居中 */
  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>

5:Initialize Swiper 在js中初始化swiper,我们把js脚本写在<body>标签最后面,也就是</body>闭合标签之前。

<body>
 ...... swiper内容
    <script>
        var mySwiper = new Swiper ('.swiper-container', {
            // 水平并不无限循环
            direction: 'horizontal',
            loop: false,

            // If we need pagination 需要分页则添加
            pagination: {
                el: '.swiper-pagination',
            },
            
            // Navigation arrows 下一页,上一页
            navigation: {
                nextEl: '.swiper-button-next',
                prevEl: '.swiper-button-prev',
            },            
            
            // And if we need scrollbar 底部滑块
            scrollbar:{
                el: '.swiper-scrollbar',
            },
        })
    </script>
</body>

经过上面五个步骤一初始化,它会显示出如下图的样式,因为我们添加了pagination分页,上一页,下一页以及底部滑块,这是比较完整的一个功能。

GIF3.gif

注意:如果你只想显示内容,如本文第三张swiper图片那样,而不显示上一页,下一页,底部滑块,以及pagination分页,则只需要简单初始化初始化,把第5个步骤的<script>里面的部分换一下。

jquery中初始化方法。

$(document).ready(function () {
 //初始化
  var mySwiper = new Swiper ('.swiper-container', {
  // Optional parameters 水平显示,不无限循环,
  direction: 'horizontal',
  loop: false
 })

});

javascript中的初始化方法。

window.onload = function () {
 //初始化
 var mySwiper = new Swiper ('.swiper-container', {
  // Optional parameters
  direction: 'horizontal',
  loop: false
 })
};

完毕!

来源网站:太平洋学习网,转载请注明出处:http://www.tpyyes.com/a/html5/2017/1020/313.html

    与本文相关的文章

    发表我的评论
    取消评论

    表情

    您的回复是我们的动力!

    • 昵称 (必填)

    网友最新评论