实现旋转效果的 Swiper
最编程
2024-03-01 10:45:20
...
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
<link
rel="stylesheet"
href="https://unpkg.com/swiper@8/swiper-bundle.min.css"
/>
<script src="https://unpkg.com/swiper@8/swiper-bundle.min.js"></script>
</head>
<style>
.swiper {
width: 620px;
height: 720px;
}
/* 左右箭头 */
.swiper-button-prev:after {
display: none;
}
.swiper-button-prev {
background: url("./image/left-1.png");
background-size: contain;
background-repeat: no-repeat;
width: 110px;
height: 120px;
left: 5px;
}
.swiper-button-next:after {
display: none;
}
.swiper-button-next {
background: url("./image/right-1.png");
background-size: contain;
background-repeat: no-repeat;
width: 110px;
height: 120px;
right: 0px;
z-index: 999;
position: absolute;
}
/* 图片显示 */
.swiper-slide {
display: flex;
justify-content: center;
align-items: center;
}
.swiper-slide img {
width: 300px;
}
.swiper-slide-active img {
position: absolute;
width: 395px;
transition: width 0.5s;
}
.swiper-slide-next img {
position: absolute;
left: -230px;
}
.swiper-slide-prev img {
position: absolute;
right: -230px;
}
.swiper-slide-active {
z-index: 999;
}
.swiper-slide-next {
z-index: 888;
}
.swiper-slide-prev {
z-index: 888;
}
.bullet-style {
width: 0px;
height: 0px;
border: 6px solid black;
background-color: black;
background-clip: padding-box;
transform: rotateZ(45deg);
display: inline-block;
margin: 0 8px;
cursor: pointer;
}
.bullet-style:hover {
border-color: gray;
background-color: gray;
}
.bullet-style-active {
border-style: double;
border-width: 8px;
}
</style>
<body>
<div class="swiper">
<div class="swiper-wrapper">
<div class="swiper-slide">
<img src="./image/world-3-3-1.png" />
</div>
<div class="swiper-slide">
<img src="./image/world-4-4-1.png" />
</div>
<div class="swiper-slide">
<img src="./image/world-2-2-1.png" />
</div>
</div>
<!-- 分页器 -->
<div class="swiper-pagination"></div>
<!--前进后退按钮 -->
<div class="swiper-button-prev"></div>
<div class="swiper-button-next"></div>
</div>
<!-- <div class="swiper-button-next swiper-button-black"></div> -->
<script type="module">
import Swiper from "https://unpkg.com/swiper@8/swiper-bundle.esm.browser.min.js";
let addBullentsEvent = () => {};
const mySwiper = new Swiper(".swiper", {
loop: true, // 循环模式选项
// 分页器
pagination: {
el: ".swiper-pagination",
clickable: true,
// 自定义分页其样式
type: "custom",
renderCustom: function (swiper, current, total) {
let renderHTML = "";
for (let i = 0; i < total; i++) {
if (i + 1 == current) {
renderHTML += `<div class="bullet-style bullet-style-active"></div>`;
} else {
renderHTML += `<div class="bullet-style"></div>`;
}
}
return renderHTML;
},
},
// 前进后退按钮
navigation: {
nextEl: ".swiper-button-next",
prevEl: ".swiper-button-prev",
},
slidesPerView: 2, //设置slider容器能够同时显示的slides数量
spaceBetween: 80, //slide之间的距离（单位px）
centeredSlides: true, //设定为true时，active slide会居中，而不是默认状态下的居左。
observer: true, //修改swiper自己或子元素时，重新加载
observeParents: true, //修改swiper的父元素时，重新加载
centerInsufficientSlides: true, //当slides 的总数小于 slidesPerView 时，slides居中。
autoplay: {
delay: 3000, //3秒切换一次
},
// 事件
on: {
paginationRender: function () {
console.log("分页器渲染了");
// 重新添加事件
addBullentsEvent();
},
autoplayStart: function () {
console.log("开始自定切换");
},
autoplayStop: function () {
console.log("关闭自动切换");
},
},
});
addBullentsEvent = () => {
const bullents = document.getElementsByClassName("bullet-style");
for (let i = 0; i < bullents.length; i++) {
console.log("obj.onclick", bullents[i].onclick);
bullents[i].removeEventListener("click", () => {});
bullents[i].addEventListener("click", function () {
mySwiper.slideTo(i + 2); //切换到对应的slide，速度为1秒
mySwiper.autoplay.start();
});
}
};
window.addEventListener("load", () => {
addBullentsEvent();
document
.getElementsByClassName("swiper-button-next")[0]
.addEventListener("click", () => {
mySwiper.autoplay.start();
});
document
.getElementsByClassName("swiper-button-prev")[0]
.addEventListener("click", () => {
mySwiper.autoplay.start();
});
});
</script>
</body>
</html>
上一篇： Selenium 爬虫 - 获取浏览器网络请求和响应
下一篇： adb 通过网络连接安卓设备
推荐阅读
-
pixijs 实现了一个具有拖放、旋转、缩放、多选和编辑功能的记事本。
-
❤️ 创意网页：制作简单美观的网页旋转图（HTML 简单实现旋转图）操作简单可直接使用！
-
任何前端都无法抗拒的炫酷效果，带你一步步用 Three.js Shader 实现！
-
[数据结构] [C++] AVL 树的模拟实现（插入、判断、旋转） -3 平衡判断
-
使用 JS 解析 LRC 格式的歌词，实现歌词同步滚动效果
-
JS 实现简单的音乐播放器和歌词滚动效果｜ 青年培训中心
-
如何实现 chatgpt 逐字逐句回答的效果
-
奇迹开屏效果的纯 CSS 实现
-
实现登录弹出框遮罩层效果的 html+css 源代码
-
Android 开发实现图片旋转功能的方法 [基于 Matrix