一个自适应切符合一般变换需求的swiper
作者：互联网
index.html
<!--
* @Author: 作者
* @Date: 2022-06-29 17:24:35
* @LastEditors: Simoon.jia
* @LastEditTime: 2022-07-24 22:59:49
* @Description: 描述
-->
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link rel="stylesheet" href="./css/swiper-bundle.min.css" />
<link rel="stylesheet" href="./css/index.css" />
<title>Document</title>
</head>
<body>
<script src="./js/swiper-bundle.min.js"></script>
<div class="productSample">
<div class="swiperTitle" id="slidTitle"></div>
<div class="swiper">
<div class="swiper-wrapper">
<div class="swiper-slide">
<div class="shadow">
<img class="Pic" src="./img/p1.png" />
</div>
</div>
<div class="swiper-slide">
<!-- <div class="swiperTitle">TODO 大屏应用开发</div> -->
<div class="shadow">
<img class="Pic" src="./img/p2.png" />
</div>
</div>
<div class="swiper-slide">
<!-- <div class="swiperTitle">TODO API 管理</div> -->
<div class="shadow">
<img class="Pic" src="./img/p3.png" />
</div>
</div>
<div class="swiper-slide">
<!-- <div class="swiperTitle">TODO 组件开发</div> -->
<div class="shadow">
<img class="Pic" src="./img/p4.png" />
</div>
</div>
</div>
<!-- 导航按钮 -->
<div class="arrowCard swiper-button-prev">
<img src="img/arrow01.svg" alt="云智慧" />
</div>
<div class="arrowCard swiper-button-next">
<img src="img/arrow02.svg " alt="云智慧" />
</div>
</div>
<!-- 分页器 -->
<div class="slidBottom">
<div class="slidBottomTxt" id="slidText"></div>
<div class="swiper-pagination"></div>
</div>
</div>
<script src="./js/index.js.js"></script>
</body>
</html>
index.js
/*
* @Author: 作者
* @Date: 2022-06-30 10:11:03
* @LastEditors: Simoon.jia
* @LastEditTime: 2022-07-25 00:17:13
* @Description: 描述
*/
const text = [
{
title: "TODO AAAAAAA",
text: "Autoprefixer is a PostCSS plugin which parses your CSS and adds vendor prefixes",
},
{
title: "TODO 应用开发",
text: "Autoprefixer is a PostCSS plugin which parses your CSS and adds vendor prefixes。",
},
{
title: "TODO API 管理",
text: "Autoprefixer is a PostCSS plugin which parses your CSS and adds vendor prefixes",
},
{
title: "TODO 组件开发",
text: "Autoprefixer is a PostCSS plugin which parses your CSS and adds vendor prefixes",
},
];
//没有swiper更新需求时使用这个
new Swiper(".swiper", {
init: true,
parallax: false,
initialSlide: 1, //开始时显示哪个slid
centeredSlidesBounds: true,
slidesPerView: 1.354,
// slidesPerView: width >= 750 ? 1.354 : 1.253,
//1.354,
//1.253,
centeredSlides: true,
loop: true, // 循环模式选项
loopAdditionalSlides: 1,
autoplay: true,
preventClicksPropagation: false, //拖动时阻止click事件
effect: "coverflow",
grabCursor: true, //鼠标变成手掌
resizeObserver: true,
coverflowEffect: {
rotate: 0,
stretch: "45%",
depth: 500,
// modifier: 2,
slideShadows: false,
},
// 如果需要分页器
pagination: {
el: ".swiper-pagination",
clickable: true,
},
// 如果需要前进后退按钮
navigation: {
nextEl: ".swiper-button-next",
prevEl: ".swiper-button-prev",
hiddenClass: "my-button-hidden",
},
on: {
slideChangeTransitionEnd: function () {
//console.log(this.activeIndex - 4); //切换结束时，告诉我现在是第几个slide，循环模式下需要计算
document.getElementById("slidTitle").innerHTML =
text[this.activeIndex - 4].title;
document.getElementById("slidText").innerHTML =
text[this.activeIndex - 4].text;
// console.log(document.getElementById("slidText"));
},
},
});
index.css
/*
* Prefixed by https://autoprefixer.github.io
* PostCSS: v8.4.14,
* Autoprefixer: v10.4.7
* Browsers: last 4 version
*/
/*
* Prefixed by https://autoprefixer.github.io
* PostCSS: v8.4.14,
* Autoprefixer: v10.4.7
* Browsers: last 4 version
*/
*{
margin: 0;
padding: 0;
}
.productSample{
max-width: 1200px;
min-width: 320px;
margin: 0 auto;
position: relative;
padding: 40px 0 110px 0;
}
.swiper {
--swiper-navigation-size: 40px;/* 设置按钮大小 */
-webkit-tap-highlight-color: rgba(0, 0, 0, 0)
/* 去除点击样式 */
}
.swiper .swiper-wrapper{
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-align: center ;
-ms-flex-align: center ;
align-items: center ;
}
.swiper-pagination{
bottom: 70px !important;
z-index: 1 !important;
}
.swiper-slide .Pic{
display: block;
width: 100%;
}
.swiperTitle{
width: 71%;
font-size: 24px;
margin: 0 auto 3px auto;
font-family: MicrosoftYaHei, 微软雅黑;
}
.slidBottomTxt{
margin: 4px auto 0 auto;
width: 71%;
font-size: 14px;
line-height: 24px;
color: #666666;
font-family: MicrosoftYaHei, 微软雅黑;
}
.shadow::before{
content: "";
position: absolute;
top:5%;
left:0;
width: 100%;
height:95.65%;
-webkit-box-sizing: border-box;
box-sizing: border-box;
background-color: rgba(51,51,51,0.1);
}
/* 居中图的样式 */
.swiper-slide-active{
position: initial !important;
-webkit-box-sizing: border-box;
box-sizing: border-box;
}
/* 显示pic的阴影 */
.shadow{
padding: 16px;
}
.swiper-slide-active .Pic{
-webkit-box-shadow: 0 2px 16px 0 rgba(0,182,176,0.20) ;
box-shadow: 0 2px 16px 0 rgba(0,182,176,0.20) ;
-webkit-box-sizing: border-box;
box-sizing: border-box;
}
/* 控制中间阴影图层消失 */
.swiper-slide-active .shadow::before{
display: none;
}
.swiper-pagination-bullet-active{
width: 32px;
height: 8px;
border-radius: 4px;
background-color: #1BD1D1;
}
/* 前进后退按钮 */
.productSample .swiper .arrowCard {
margin: 0 25px;
cursor: pointer;
min-width: 50px;
min-height: 50px;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
/* background-color: #ffffff; */
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
-webkit-box-pack: center;
-ms-flex-pack: center;
justify-content: center;
border-radius: 50%;
}
.productSample .swiper .arrowCard:hover {
background: #ffffff;
-webkit-box-shadow: 0 2px 16px 0 rgba(0, 182, 176, 0.3);
box-shadow: 0 2px 16px 0 rgba(0, 182, 176, 0.3);
}
.productSample .swiper .arrowCard::after{
display: none;
}
@media only screen and (max-width:750px) {
.productSample{
padding: 24px 0 60px 0;
}
.swiperTitle{
font-size: 20px;
line-height: 24px;
margin-bottom: 8px;
}
.slidBottomTxt{
margin: 4px auto 0 auto;
width: 72%;
font-size: 14px;
line-height: 24px;
color: #666666;
}
.productSample .swiper .arrowCard{
display: none;
}
.swiper-pagination{
bottom: 28px !important;
}
}
标签：box,center,变换,适应,width,webkit,display,swiper 来源： https://www.cnblogs.com/Simoon/p/16516032.html