web前端

Swiper如何快速上手?

特别声明:如果您喜欢小站的内容,可以点击 终身VIP¥188.00元 包年VIP¥88.00元 包季VIP¥28.00 包月VIP¥10.00元 进行全站阅读。 如果您对付费阅读有任何建议或想法,欢迎发送邮件至: 864479410@qq.com,或添加QQ:864479410(^_^)

swiper简介

Swiper(Swiper master)是目前应用较广泛的移动端网页触摸内容滑动js插件
swiper

HTML部分

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

<!DOCTYPE html>
<html>
<head>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/Swiper/4.0.0/css/swiper.min.css">
</head>
<body>
    <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>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/Swiper/4.0.0/js/swiper.min.js"></script>
</body>
</html>

CSS部分

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

.swiper-container {
    width: 600px;
    height: 300px;
}  

JavaScript部分

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

var mySwiper = new Swiper ('.swiper-container', {
  loop: true,
  // 如果需要分页器
  pagination: {
    el: '.swiper-pagination',
  },
  // 如果需要前进后退按钮
  navigation: {
    nextEl: '.swiper-button-next',
    prevEl: '.swiper-button-prev',
  },
  // 如果需要滚动条
  scrollbar: {
    el: '.swiper-scrollbar',
  }
})

提示

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

<script type="text/javascript">
window.onload = function() {
  ...
}
</script>

演示程序:演示代码
下载地址:Swiper

公告

以后每月5、15、25号更新原创文章,内容不限,喜欢小编的可以点击关注,也可在下方评论留言,你喜欢什么内容,小编根据大家喜欢的内容尝试更新

(720)

本文由 Web秀 作者:Javan 发表,转载请注明来源!

关键词:,

热评文章

发表评论

电子邮件地址不会被公开。 必填项已用*标注