swiper官網：https://3.swiper.com.cn/
<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8" /><meta name="viewport" content="width=device-width, initial-scale=1.0" /><title>Document</title><linkrel="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>效果：
)
