最近在写项目的时候发现可以使用一个插件帮助我们写轮播图
1.打开swiper官网
2.使用swiper
1.首先在获取swiper这里选择下载swiper
2.然后点击第一个选项即可下载
3.解压后打开目录,看到里面有一个package包点进去,找两个文件swiper-bundle.min.css和swiper-bundle.min.js
4.将这两个文件分别放到你项目里面的css文件夹和js文件夹中,并且在页面中引入。
5.在官网的在线演示里选择swiper基础演示,然后选择喜欢的案例在新窗口打开,并查看源代码。
6.将这些html结构的代码写到项目要用到轮播图的对应的结构里
7.将这些样式写到项目的相关css文件中
8.将这些js代码写到项目相应的js文件中
window.addEventListener('load', function () {
var swiper = new Swiper('.swiper-container', {
spaceBetween: 30,
centeredSlides: true,
autoplay: {
delay: 2500,
disableOnInteraction: false,
},
pagination: {
el: '.swiper-pagination',
clickable: true,
},
navigation: {
nextEl: '.swiper-button-next',
prevEl: '.swiper-button-prev',
},
});
})