• 欢迎大家分享资料!前往留言板评论即可!

前端 swiper框架的应用

合宙 模组资料网 2年前 (2021-05-15) 776次浏览 已收录 0个评论 扫描二维码

很早之前用过swiper框架,是基于js应用的,使用方法如下:

1.先引入插件中的css和js代码

<!DOCTYPE html>
<html>
<head>
    ...
    <link rel="stylesheet" href="dist/css/swiper-bundle.min.css">
</head>
<body>
    ...
    <script src="dist/js/swiper-bundle.min.js"></script>
    ...
</body>
</html>

2.在需要放置轮播图的区域内书写以下代码

<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>

3.初始化swiper

<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>

以上写法是官方给出的标准写法,但是合宙前端项目大多基于react框架编写,这种方法并不太适用,既不好看而且来回翻找也影响效率。机智的我在官方文档中找到了在React中的使用方法
前端 swiper框架的应用

这是完全不同的一种写法——通过在标签上加属性值来实现功能的。

前端 swiper框架的应用

but,官方只给出了几个小例子,并没有完整的api文档,所以我就通过js的api对照+猜想+广大前端盆友的智慧相助,完成了业务的编写,趁热写一篇文章总结一下几个常用的例子。

❀❀
1.首先引入swiper/react和scss或者less文件

import { Swiper, SwiperSlide } from 'swiper/react';

import 'swiper/swiper.less';

❀特别注意!!❀
凡是组件里的(比较常用的是自动切换Autoplay/分页器Pagination/前进后退按钮Navigation Buttons)一定要引入相应的scss/less文件,组件并且use一下。(我之前就因为少引入了less文件导致怎么都加载不出来,找了好一阵子)

前端 swiper框架的应用

❀❀
2.正常书写标签属性就可以了(我把我总结的常用属性都po上注释一下)

export default () => {
  return (
    <Swiper
          loop={true} //是否形成环路
          speed={1000} //速度(毫秒)
          spaceBetween={16} //两个页面之间的间隔
          autoplay={{ //自动播放
            delay: 3000, //延迟3秒进入下一张
            disableOnInteraction: false //用户操作后继续自动播放
          }}
          pagination={{ clickable: true }} //分页器是否能够点击
          slidesPerView={3}//一个页面需要显示几张图(可以设置为auto)
>
      <SwiperSlide>Slide 1</SwiperSlide>
      <SwiperSlide>Slide 2</SwiperSlide>
      ...
    </Swiper>
  );
};

还有许多我没有涉及到的属性,可以去swiper官方api中扒一下,前端小白的第一篇文章到这里就告一段落了,溜了~


转载请注明原文链接:前端 swiper框架的应用
喜欢 (0)
发表我的评论
取消评论

表情 贴图 加粗 删除线 居中 斜体

Hi,您需要填写昵称和邮箱!

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址