你好赵伟

这个屌丝很懒，什么也没留下！

热门标签

swiper插件的使用方法

作者：你好赵伟 | 2024-03-23 05:15:00

踩

swiper

1. swiper介绍

Swiper 是一款免费以及轻量级的移动设备触控滑块的js框架。是一款开源、免费、强大的触摸滑动插件。主要使用于移动端的网站、移动web apps，native apps和hybrid apps。主要是为IOS而设计的，同时，在Android、WP8系统也有着良好的用户体验，Swiper从3.0开始不再全面支持PC端。因此，如需在PC上兼容更多的浏览器，可以选择Swiper2.x（甚至支持IE7）。简单配置即可实现手机、电脑网页大部分滑动功能，焦点图、tab、触摸导航等。

Swiper 完全免费并开源（MIT Licensed），无论你使用在个人网站或商业网站，都无需付费。

2. 为什么使用swiper

免费，开源，稳定，应用广泛，文档丰富，大量活跃用户解答疑问。 Swiper应用广泛，使用频率仅次于jQuery，轮播图类排名第一，是网页设计师必备技能。大量demo即下即用，前端新手亦可快捷做出精美效果。

3. Swiper的使用方法

1）首先加载插件，需要用到的文件有swiper-bundle.min.js和swiper-bundle.min.css文件，不同Swiper版本用到的文件名略有不同。可下载Swiper文件或使用CDN。

<!DOCTYPE html>

<html>

<head>

...

</head>

<body>

...

...

</body>

</html>

HTML内容

<div class="swiper-slide">Slide 1</div>

<div class="swiper-slide">Slide 2</div>

<div class="swiper-slide">Slide 3</div>

</div>

</div>

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

.swiper-container {

width: 600px;

height: 300px;

}

3.初始化swiper

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>

4.如果作为CommonJs 或ES 模块引入

//CommonJs

var Swiper = require('swiper');

var mySwiper = new Swiper('.swiper-container', { /* ... */ });

//ES

import Swiper from 'swiper';

var mySwiper = new Swiper('.swiper-container', { /* ... */ });

实现以下效果

<!DOCTYPE html>

<head>

<title>Swiper demo</title>

<style>

html,

body {

position: relative;

height: 100%;

}

body {

background: #eee;

font-family: Helvetica Neue, Helvetica, Arial, sans-serif;

font-size: 14px;

color: #000;

margin: 0;

padding: 0;

}

.swiper-container {

width: 100%;

height: 100%;

}

.swiper-slide {

text-align: center;

font-size: 18px;

background: #fff;

/* Center slide text vertically */

display: -webkit-box;

display: -ms-flexbox;

display: -webkit-flex;

display: flex;

-webkit-box-pack: center;

-ms-flex-pack: center;

-webkit-justify-content: center;

justify-content: center;

-webkit-box-align: center;

-ms-flex-align: center;

-webkit-align-items: center;

align-items: center;

}

</style>

</head>

<body>

<div class="swiper-slide">Slide 1</div>

<div class="swiper-slide">Slide 2</div>

<div class="swiper-slide">Slide 3</div>

<div class="swiper-slide">Slide 4</div>

<div class="swiper-slide">Slide 5</div>

<div class="swiper-slide">Slide 6</div>

<div class="swiper-slide">Slide 7</div>

<div class="swiper-slide">Slide 8</div>

<div class="swiper-slide">Slide 9</div>

<div class="swiper-slide">Slide 10</div>

</div>

</div>

var swiper = new Swiper('.swiper-container', {

pagination: {

el: '.swiper-pagination',

type: 'fraction',

navigation: {

nextEl: '.swiper-button-next',

prevEl: '.swiper-button-prev',

});

</script>

</body>

</html>

4. Swiper Animate的使用方法

Swiper Animate是Swiper中文网提供的用于在Swiper内快速制作CSS3动画效果的小插件，适用于Swiper2.x、Swiper3.x、Swiper4.x和Swiper5.x 。此插件不适用于loop模式。

使用Swiper Animate需要先加载swiper.animate.min.js和animate.min.css。

<!DOCTYPE html>

<html>

<head>

...

</head>

<body>

...

</body>

</html>

2. 初始化时隐藏元素并在需要的时刻开始动画。

//Swiper5

var mySwiper = new Swiper ('.swiper-container', {

on:{

init: function(){

swiperAnimateCache(this); //隐藏动画元素

swiperAnimate(this); //初始化完成开始动画

slideChangeTransitionEnd: function(){

swiperAnimate(this); //每个slide切换结束时也运行当前slide动画

//this.slides.eq(this.activeIndex).find('.ani').removeClass('ani'); 动画只展现一次，去除ani类名

}

})

</script>

3. 在需要运动的元素上面增加类名 ani ，和其他的类似插件相同，Swiper Animate需要指定几个参数：

swiper-animate-effect：切换效果，例如 fadeInUp

swiper-animate-duration：可选，动画持续时间（单位秒），例如 0.5s

swiper-animate-delay：可选，动画延迟时间（单位秒），例如 0.3s

</div>

可选效果可以参考 animate.css

5. 在常用框架中使用Swiper

在vue/react中使用Swiper:

安装 swiper

npm install swiper

用法：

swiper/react导出2个组件：Swiper和SwiperSlide：

// Import Swiper React components

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

// Import Swiper styles

import 'swiper/swiper.scss';

export default () => {

return (

<Swiper

spaceBetween={50}

slidesPerView={3}

onSlideChange={() => console.log('slide change')}

onSwiper={(swiper) => console.log(swiper)}

<SwiperSlide>Slide 1</SwiperSlide>

<SwiperSlide>Slide 2</SwiperSlide>

<SwiperSlide>Slide 3</SwiperSlide>

<SwiperSlide>Slide 4</SwiperSlide>

...

</Swiper>

);

};

默认情况下，Swiper React使用Swiper的核心版本（没有任何其他模块）。如果要使用导航，分页和其他模块，则必须先安装它们。这是其他模块导入的列表：

Virtual -虚拟幻灯片模块

Keyboard -键盘控制模块

Mousewheel -鼠标滚轮控制模块

Navigation -导航模块

Pagination -分页模块

Scrollbar -滚动条模块

Parallax -视差模块

Zoom -缩放模块

Lazy -懒模块

Controller -控制器模块

A11y -辅助功能模块

History -历史记录导航模块

HashNavigation -哈希导航模块

Autoplay -自动播放模块

EffectFade -淡入淡出效果模块

EffectCube -立方体效果模块

EffectFlip -翻转效果模块

EffectCoverflow -Coverflow效果模块

Thumbs -拇指模块

// import Swiper core and required modules

import SwiperCore, { Navigation, Pagination, Scrollbar, A11y } from 'swiper';

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

// Import Swiper styles

import 'swiper/swiper.scss';

import 'swiper/components/navigation/navigation.scss';

import 'swiper/components/pagination/pagination.scss';

import 'swiper/components/scrollbar/scrollbar.scss';

// install Swiper modules

SwiperCore.use([Navigation, Pagination, Scrollbar, A11y]);

export default () => {

return (

<Swiper

spaceBetween={50}

slidesPerView={3}

navigation

pagination={{ clickable: true }}

scrollbar={{ draggable: true }}

onSwiper={(swiper) => console.log(swiper)}

onSlideChange={() => console.log('slide change')}

<SwiperSlide>Slide 1</SwiperSlide>

<SwiperSlide>Slide 2</SwiperSlide>

<SwiperSlide>Slide 3</SwiperSlide>

<SwiperSlide>Slide 4</SwiperSlide>

...

</Swiper>

);

};

声明：本文内容由网友自发贡献，不代表【wpsshop博客】立场，版权归原作者所有，本站不承担相应法律责任。如您发现有侵权的内容，请联系我们。转载请注明出处：https://www.wpsshop.cn/w/你好赵伟/article/detail/293306