Swiper实现两种常用轮播图

2023-09-24 19:10| 来源: 网络整理| 查看: 265

效果图：

轮播图

市面上实现的网页中的轮播图大多都是用Swiper实现的，主要就是这两种，其实没必要写这篇的，写这篇的目的.....emmm.....方便以后伸手使用和练习两个swiper......别打我。。

html：

实用轮播图

css：

/*----------------------轮播图公共样式层-----------------------*/ .lunbo-leave { } .swiper-imagesize { max-width: 1280px; width: 100%; min-width: 1100px; /*height: 700px;*/ } .swiper-wrapper { max-width: 1280px; width: 100%; min-width: 1100px; /*height: 700px;*/ } .swiper-pagination-bullet-active { background-color: #A0100F; } .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; } /*------------------------轮播图1层---------------------------*/ .swiper1-container { max-width: 1280px; width: 100%; min-width: 1100px; /*height: 700px;*/ } /*------------------------轮播图2层---------------------------*/ .swiper2-container { max-width: 1280px; width: 100%; min-width: 1100px; /*height: 700px;*/ }

js：

var swiper1 = new Swiper('.swiper1-container', { // 区分容器 centeredSlides: true, loop: true, autoplay: { delay: 2500, disableOnInteraction: false, }, pagination: { el: '.swiper-p1', clickable: true, }, }); var swiper2 = new Swiper('.swiper2-container', { // 区分容器 effect: 'fade', loop: true, centeredSlides: true, autoplay: { delay: 2500, disableOnInteraction: false, }, pagination: { el: '.swiper-p2', clickable: true, }, });

素材包：click here

【本文地址】

公司简介

联系我们