新睿云

> 知识库 > swiper特色与功能,还有笔者经验之谈避免采坑!

swiper特色与功能,还有笔者经验之谈避免采坑!

作者/来源:新睿云小编 发布时间:2019-12-06

Swiper是纯javascript打造的滑动特效插件,面向手机、平板电脑等移动终端。

一、Swiper能用途及特色

1.Swiper用途

Swiper拥有灵活的progress,这是自定义制作3D切换效果的利器

Swiper制作3D切换效果的方法多种多样。cube、coverflow和flip可以轻松的实现3D过渡,如果你想制作其他新颖的切换方式,推荐使用progress。

progress可以帮助你获取到滑块的进度索引。

2.Swiper特色

不依赖框架

Swiper无需加载任何公共库(如jquery)即可运行,这保证了Swiper的轻量和运行速度。Swiper也可以在加载了公共库的环境下安全的运行,如jQuery, Zepto, jQuery Mobile等

1:1的触摸滑动

Swiper默认的触摸比例为1:1,你可以通过修改Swiper的设置来改变这个比例。

……

虚拟 Slides

Swiper 5新增了虚拟slides特性,当你有很多Slide或有很多内容的slide的时候可以在DOM中只保留需要的slide。

Swiper5还包含了所有swiper2的优秀特性,包括自适应、滚动反弹、抵抗反弹、loop模式、嵌套Swiper。

二、Swiper5使用方法

1.首先加载插件,需要用到的文件有swiper.min.js和swiper.min.css文件。可下载Swiper文件或使用CDN。

<!DOCTYPE html>

<html>

<head>

    ...

    <link rel="stylesheet" href="dist/css/swiper.min.css">

</head>

<body>

    ...

    <script src="dist/js/swiper.min.js"></script>

    ...

</body>

</html>

2.HTML内容。

<div>

    <div>

        <div>Slide 1</div>

        <div>Slide 2</div>

        <div>Slide 3</div>

    </div>

    <!-- 如果需要分页器 -->

    <div></div>

    

    <!-- 如果需要导航按钮 -->

    <div></div>

    <div></div>

    

    <!-- 如果需要滚动条 -->

    <div></div>

</div>

导航等组件可以放在container之外

3.你可能想要给Swiper定义一个大小,当然不要也行。

.swiper-container {

    width: 600px;

    height: 300px;

}  

4.初始化Swiper:最好是挨着</body>标签

...

<script>        

  var mySwiper = new Swiper ('.swiper-container', {

    direction: 'vertical', // 垂直切换选项

    loop: true, // 循环模式选项

    

    // 如果需要分页器

    pagination: {

      el: '.swiper-pagination',

    },

    

    // 如果需要前进后退按钮

    navigation: {

      nextEl: '.swiper-button-next',

      prevEl: '.swiper-button-prev',

    },

    

    // 如果需要滚动条

    scrollbar: {

      el: '.swiper-scrollbar',

    },

  })        

  </script>

</body>

如果不能写在HTML内容的后面,则需要在页面加载完成后再初始化。

<script>

window.onload = function() {

  ...

}

</script>

或者这样(Jquery和Zepto)(推荐)

<script>

$(document).ready(function () {

 ...

})

</script>

5.完成。恭喜你,现在你的Swiper应该已经能正常切换了。

如果作为CommonJs 或ES 模块引入

//CommonJs

var Swiper = require('swiper');    

var mySwiper = new Swiper('.swiper-container', { /* ... */ });

//ES

import Swiper from 'swiper';    

var mySwiper = new Swiper('.swiper-container', { /* ... */ });

三、Vue 各种坑总结(swiper、背景图片)

CDN 模式,在 index.html 直接使用。

   <link rel="stylesheet" href="https://unpkg.com/swiper/css/swiper.min.css">

   <script src="https://unpkg.com/swiper/js/swiper.min.js"> </script>

   //引入

   <div>

       <div>

        <img src="/static/images/topic_1_b.png"/>

        <img src="/static/images/topic_1_b.png"/>

        <img src="/static/images/topic_1_b.png"/>

       </div>

   </div>

   

   //初始化,必须在 挂载阶段。

   mounted() {

    new Swiper('.swiper-container', {

          slidesPerView: 'auto',

          spaceBetween: 30,

          pagination: {

            el: '.swiper-pagination',

            clickable: true,

          },

    });

   }

vue-awesome-swiper 的使用 (暂未有时间,有空编写)

背景图片为动态时

    <template>

        <div :style=" `background: url(${ bck_url }) center no-repeat;`">

      

        </div>

    </template>

当背景图片为动态且 图片路径为 src 下, 引入时 , vue 会不解析 图片地址。而 还是 字符串

正常情况下,例如 header.png 图片 会解析为 header_3.4e7ddc9.png ,

解决方法:

- 图片放在静态资源下, `static` 下

热门标签
new year
在线咨询
咨询热线 400-0505-565
投诉与建议
{{item.description}}

—您的烦恼我们已经收到—

我们会将处理结果发送至您的手机

请耐心等待