欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  web前端

swiper插件简介以及轮播图的做法

程序员文章站 2022-04-04 19:06:01
...

swiper

Swiper是纯javascript打造的滑动特效插件,⾯面向⼿手机、平板电脑等移动终端。
Swiper能实现触屏焦点图、触屏Tab切换、触屏多图切换等常⽤用效果。
Swiper开源、免费、稳定、使⽤用简单、功能强⼤大,是架构移动终端⽹网站的重要选择!

1.首先创建一个swiper的运行环境,需要用到的文件有swiper.min.js和swiper.min.css文件。

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

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>

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

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

4.初始化Swiper:最好是挨着</body>标签 (函数调用)

<script>

    var swiper=new Swiper('.swiper-container',{
      autoplay:1000,//自动轮播
      autoplayDisableOnInteraction:false,//滑动后继续滚动
      loop:true,//循环
      pagination:'.swiper-pagination',//分页
      paginationClickable:true,//小圆点点击
      spaceBetween:30,//图片间隙
      direction:"horizontal"//默认横向 vertical垂直
    })

</script>
</body>

以上就是swiper插件简介以及轮播图的做法的详细内容,更多请关注其它相关文章!