首页 > 其他 > 详细

Swiper的基本使用

时间:2020-01-14 23:22:42      阅读:111      评论:0      收藏:0      [点我收藏+]

Swiper常用于移动端网站的内容触摸滑动

Swiper是什么?

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

swiper能实现触屏焦点图、触屏Tab切换、触屏多图切换等常用效果。

swiper开源、免费、稳定、使用简单、功能强大,是架构移动终端网站的重要选择!

 

swiper的使用:

1.首先加载插件,需要用到的文件有swiper.min.js和swiper.min.css文件。

 

2.HTML内容。

<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>
    <!-- 如果需要分页器 -->
    <div class="swiper-pagination"></div>
    
    <!-- 如果需要导航按钮 -->
    <div class="swiper-button-prev"></div>
    <div class="swiper-button-next"></div>
    
    <!-- 如果需要滚动条 -->
    <div class="swiper-scrollbar"></div>
</div>
导航等组件可以放在container之外

 

3.初始化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>

 

简单来说就是三步!

1.引入swiper对应的css和js文件

2.按照框架的需求搭建三层结构

3.创建一个Swiper对象, 将容器元素传递给它

 

注意:

Swiper5 对比Swiper4 的API并无太大变化。Swiper5 增加了CSS模式(cssMode),并且可以通过CSS文件修改Swiper颜色风格。

 

swiper中文文档:https://www.swiper.com.cn/

Swiper的基本使用

原文:https://www.cnblogs.com/sunchao0709/p/12194563.html

(0)
(0)
   
举报
评论 一句话评论(0
关于我们 - 联系我们 - 留言反馈 - 联系我们:wmxa8@hotmail.com
© 2014 bubuko.com 版权所有
打开技术之扣,分享程序人生!