JavaScriptLibrary–Swiper

前言

官网已经有很好的教程了, 这篇只是记入一些我用过的东西和冷门知识.

参考

官网安装

官网 Demo

安装

yarn add Swiper

JS

import Swiper, { Navigation } from 'swiper'; // core and modules
import 'swiper/css'; // core css
import 'swiper/css/navigation'; // module css

const swiper = new Swiper('.swiper', {
modules: [Navigation], // modules
// config
navigation: {
nextEl: '.swiper-button-next',
prevEl: '.swiper-button-prev',
},
});

它的调用是 import js & css from node_modules

有分 core module 和其它 modules (比如 navigation, pagination 等等, 都是按需加载的)

setup 就是 import modules 和 configuration.

HTML

<div class="swiper">
<div class="swiper-wrapper">
<div class="swiper-slide">slide1div>
<div class="swiper-slide">slide2div>
div>
<div class="swiper-button-next">div>
<div class="swiper-button-prev">div>
div>

第一层 swiper 就是一个大 container, 自带 margin-auto (居中) 哦

第二层 wrapper 是用来把 slide 横排的, 它是 Flex.

第三层就是所有的 slides 了.

内容就放在 slide 里面. 不建议直接把内容当 slide 来使用, 给它 wrap 一层比较好.

常用 config

左右箭头

 JS

modules: [Navigation],
navigation: {
nextEl: '.swiper-button-next',
prevEl: '.swiper-button-prev',
},

无限循环

JS

loop: true,

Slide per view

红色是 1 个 view, 绿色是一个 slide, 可以指定 1 个 view 里面出现都少个 slide. 它会自动去 set slide 的 width.

slidesPerView: 3,
spaceBetween: 30,

space between 就是 gap, 间距. unit 是 px

breakpoint

breakpoints: {
640: {
slidesPerView: 2,
spaceBetween: 20,
},
768: {
slidesPerView: 4,
spaceBetween: 40,
},
1024: {
slidesPerView: 5,
spaceBetween: 50,
},
},

不同 breakpoint 下用不同的切换不同的 config

Navigation outside container

Swiper 默认是把 navigation 放到 container 里面的. 有时候它会被挡住, 这样很不好看.

HTML

JS

new Swiper('.swiper', {
modules: [Navigation],
navigation: {
nextEl: '.swiper-button-next',
prevEl: '.swiper-button-prev',
},
slidesPerView: 4,
spaceBetween: 40,
});

解决方案

stackoverflow – CSS - How to have swiper slider arrows outside of slider that takes up 12 column row

它只给了一个思路, 把 navigation 放到 container 外面

但这样是不够的, prev, next 是绝对定位, 必须在加上一个 wrapper 才可以

添加一个 swiper-container, 把 prev, next 移到外面

CSS Style

.swiper-container {
position: relative;
padding-inline: 6rem;
width: 50%;
margin-inline: auto;
.swiper {
.swiper-wrapper {
.swiper-slide {
img {
max-width: 100%;
}
}
}
}
}

关键是让 container 取代 .swiper

最终效果:

 绿色部分就是 padding 的作用了.