大橙子网站建设,新征程启航

为企业提供网站建设、域名注册、服务器等服务

swiper怎么用-创新互联

小编给大家分享一下swiper怎么用,相信大部分人都还不怎么了解,因此分享这篇文章给大家参考一下,希望大家阅读完这篇文章后大有收获,下面让我们一起去了解一下吧!

创新互联公司专注于宁江企业网站建设,成都响应式网站建设,成都商城网站开发。宁江网站建设公司,为宁江等地区提供建站服务。全流程按需定制,专业设计,全程项目跟踪,创新互联公司专业和态度为您提供的服务swiper是什么?

swiper是一款轻量级的轮播图插件,不仅支持pc端更是为移动端而生,用它可以快速地做出一个轮播图,或者扩展使其做出复杂的轮播效果。

基本用法

swiper使用需要两个文件,一个是swiper.css,里面规定了一些在这个滑动轮播插件中常用的样式,当然如果你愿意的话可以自己定义样式
另外一个是swiper.js这个是插件的主体部分。
在页面中引入这两个文件之后首先要写基本的html结构
下面所有的使用方式基于swiper 4.x

  
    
      Slide 1

      Slide 2

      Slide 3

      Slide 4

      Slide 5

      Slide 6

      Slide 7

      Slide 8

      Slide 9

      Slide 10

    

  

类名为swiper-container 是滑动轮播插件的包裹器,类似于一个mask,一个窗口,swiper-wrapper是一个按照一定顺序排列的所有轮播图的集合,在默认情况下是左右排列,当鼠标或者触屏进行操作的时候,改变的是这个元素的位置,而达到轮播的效果。swiper-slide则是每个轮播图元素,在写好基本html结构之后,需要对这个轮播图进行初始化

这样就能生成一个默认的轮播图,可以用鼠标或者触摸屏来进行左右的滑动

添加分页与导航

大部分的轮播图都有分页,导航,可以让用户看到目前是在什么位置,并且让用户知道这是一个可以交互的部分,添加分页的方式也很简单,只需要在初始化的时候添加选项指定一下分页的元素就行
html部分,在swiper-container下面添加下一个与上一个按钮

    
        ...

          

          

    

在这里swiper-button-next和swiper-button-prev都是指定好的按钮,下一个按钮会垂直居中并且靠右边,上一个按钮会垂直居中靠右边,当然也能自己指定按钮。

    var swiper = new Swiper('.swiper-container',{
        navigation:{
            nextEl: '.swiper-button-next',
            prevEl: '.swiper-button-prev',
        }
    });

在初始化函数中添加按钮元素。
这样就能生成一个有导航按钮的轮播图了

swiper怎么用

添加分页的方式和导航按钮非常类似
html:

  
    
        ...    

         

         

    

  

在初始化的时候加入分页元素
js:

    var swiper = new Swiper('.swiper-container', {
      pagination: {
        el: '.swiper-pagination',
      },
      navigation:{
        nextEl: '.swiper-button-next',
        prevEl: '.swiper-button-prev',
      }
    });

这样就能生成有分页又有导航的轮播图了
swiper怎么用

循环与自动轮播:

js:
在初始化的时候加入

   var swiper = new Swiper('.swiper-container', {       //分页
       pagination: {
           el: '.swiper-pagination',
       },       //导航按钮
       navigation:{
           nextEl: '.swiper-button-next',
           prevEl: '.swiper-button-prev',
       },       //自动轮播
       autoplay: {
           delay: 2500,//时间 毫秒
           disableOnInteraction: false,//用户操作之后是否停止自动轮播默认true 
       },
   });
其他常用属性
  1. 分页用进度条代替

   var swiper = new Swiper('.swiper-container', {
        pagination: {
            el: '.swiper-pagination',            type: 'progressbar',//将分页的类型改为进度条就行
        },
        navigation:{
            nextEl: '.swiper-button-next',
            prevEl: '.swiper-button-prev',
        },
        autoplay: {
            delay: 2500,
            disableOnInteraction: false,
        },
    });

以上是“swiper怎么用”这篇文章的所有内容,感谢各位的阅读!相信大家都有了一定的了解,希望分享的内容对大家有所帮助,如果还想学习更多知识,欢迎关注创新互联网站制作公司行业资讯频道!


标题名称:swiper怎么用-创新互联
文章起源:http://dzwzjz.com/article/dhioos.html
在线咨询
服务热线
服务热线:028-86922220
TOP