Web Design Laboratory
在其中建立必要的文件： index.html、 style.css和 script.js.
建立Images資料夾，裡面包含該輪播上要使用的影像圖片。
包含 Swiper 和 Google Fonts CDN 鏈接，以實現平滑的滑動功能和訪問導航圖標（上一個/下一個）
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Image Slider | CodingNepal
<link rel="stylesheet" href="style.css">
<link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Material+Symbols+Rounded:opsz,wght,FILL,GRAD@24,200,0,0" />
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/swiper@11/swiper-bundle.min.css">
</head>
<body>
<div class="slider-container">
<div class="slider-wrapper swiper-wrapper">
<div class="slider-item swiper-slide">
<div class="slide-content">
<h3 class="slide-subtitle">Slide 01
<h2 class="slide-title">Lorem ipsum dolor sit amet elit delectus!
<p class="slide-description">Lorem ipsum dolor sit amet consectetur adipisicing elit repellendus harum voluptates.
<a href="#" class="slide-button">Learn More
</div>
</div>
<div class="slider-item swiper-slide">
<div class="slide-content">
<h3 class="slide-subtitle">Slide 02
<h2 class="slide-title">Sed ut perspiciatis unde omnis iste natus error sit!
<p class="slide-description">At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium voluptatum deleniti atque corrupti.
<a href="#" class="slide-button">Learn More
</div>
</div>
<div class="slider-item swiper-slide">
<div class="slide-content">
<h3 class="slide-subtitle">Slide 03
<h2 class="slide-title">Nemo enim ipsam voluptatem quia voluptas!
<p class="slide-description">Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt.
<a href="#" class="slide-button">Learn More
</div>
</div>
<div class="slider-item swiper-slide">
<div class="slide-content">
<h3 class="slide-subtitle">Slide 04
<h2 class="slide-title">Neque porro quisquam est qui dolorem!
<p class="slide-description">Quis autem vel eum iure reprehenderit qui in ea voluptate velit esse quam nihil molestiae consequatur.
<a href="#" class="slide-button">Learn More
</div>
</div>
<div class="slider-item swiper-slide">
<div class="slide-content">
<h3 class="slide-subtitle">Slide 05
<h2 class="slide-title">Quis autem velum iure reprehen derit qui voluptate!
<p class="slide-description">Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit.
<a href="#" class="slide-button">Learn More
</div>
</div>
</div>
<div class="slider-controls">
<ul class="slider-pagination">
<div class="slider-indicator">
<li class="slider-tab current">Lorem ipsum doloriums viconsetur
<li class="slider-tab">Ipsum leositea pellentes nisiutoret
<li class="slider-tab">Aenean consectetur blandit dictum
<li class="slider-tab">Vestibulum antea primis faucibs
<li class="slider-tab">Molestas minus conse alquid sed
</ul>
</div>
<div class="slider-navigations">
<button id="slide-prev" class="material-symbols-rounded">arrow_left_alt
<button id="slide-next" class="material-symbols-rounded">arrow_right_alt
</div>
</div>
<script src="https://cdn.jsdelivr.net/npm/swiper@11/swiper-bundle.min.js">
<script src="script.js">
</body>
</html>
/* Importing Google fonts - Montserrat */
@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@100..900&display=swap');
* {
margin: 0;
padding: 0;
box-sizing: border-box;
font-family: "Montserrat", sans-serif;
}
.slider-container {
position: relative;
height: 100%;
width: 100%;
overflow: hidden;
}
.slider-wrapper .slider-item {
position: relative;
width: 100%;
height: 100vh;
display: flex;
align-items: center;
}
.slider-wrapper .slider-item::before {
content: "";
position: absolute;
left: 0;
top: 0;
width: 100%;
height: 100%;
filter: grayscale(20%);
background-image: url("images/img-1.jpg");
background-size: cover;
background-position: center;
}
.slider-wrapper .slider-item:nth-child(2):before {
background-image: url("images/img-2.jpg");
}
.slider-wrapper .slider-item:nth-child(3):before {
background-image: url("images/img-3.jpg");
}
.slider-wrapper .slider-item:nth-child(4):before {
filter: grayscale(25%) brightness(80%);
background-image: url("images/img-4.jpg");
}
.slider-wrapper .slider-item:nth-child(5):before {
background-image: url("images/img-5.jpg");
}
.slider-wrapper .slider-item .slide-content {
position: relative;
z-index: 10;
color: #fff;
width: 100%;
opacity: 0;
margin: 0 auto;
max-width: 1400px;
padding: 0 20px 10px;
}
.slider-item.swiper-slide-active .slide-content {
animation: animate_opacity 0.8s 0.6s linear forwards;
}
@keyframes animate_opacity {
100% {
opacity: 1;
}
}
.slider-wrapper .slider-item .slide-content > * {
max-width: 35%;
}
.slider-item .slide-content .slide-title {
font-size: 1.5rem;
font-weight: 700;
margin-top: 5px;
opacity: 0;
text-transform: uppercase;
transform: translateY(60%);
}
.slider-item .slide-content .slide-subtitle {
font-size: 1rem;
font-weight: normal;
opacity: 0;
transform: translateY(60%);
}
.slider-item.swiper-slide-active :where(.slide-title, .slide-subtitle) {
animation: animate_text 0.6s 0.6s linear forwards;
}
@keyframes animate_text {
100% {
opacity: 1;
transform: translateY(0);
}
}
.slider-item .slide-content .slide-description {
margin-top: 25px;
line-height: 25px;
opacity: 0;
transform: translateY(60%);
}
.slider-item.swiper-slide-active .slide-description {
animation: animate_text 0.6s 1s linear forwards;
}
.slider-item .slide-content .slide-button {
display: block;
margin-top: 45px;
color: #fff;
width: 0;
padding: 13px 0;
font-size: 0.8rem;
font-weight: 600;
text-align: center;
text-transform: uppercase;
letter-spacing: 1px;
text-decoration: none;
border: 2px solid #fff;
transition: 0.5s ease;
opacity: 0;
white-space: nowrap;
}
.slider-item.swiper-slide-active .slide-button {
animation: animate_button 0.5s 1.3s linear forwards;
}
@keyframes animate_button {
100% {
width: 250px;
opacity: 1;
}
}
.slider-item .slide-content .slide-button span {
opacity: 0;
}
.slider-item.swiper-slide-active .slide-button span {
animation: animate_opacity 0.5s 1.5s linear forwards;
}
.slider-item .slide-content .slide-button:hover {
color: #000;
background: #fff;
}
.slider-container .slider-controls {
position: absolute;
bottom: 45px;
z-index: 30;
width: 100%;
overflow-x: auto;
scrollbar-width: none;
}
.slider-controls .slider-pagination {
display: flex;
list-style: none;
margin: 0 auto;
max-width: 1400px;
padding: 0 20px;
position: relative;
justify-content: space-between;
}
.slider-pagination .slider-indicator {
position: absolute;
bottom: 0;
border-bottom: 2px solid #fff;
transition: 0.4s ease-in-out;
}
.slider-pagination .slider-tab {
color: #DBDADA;
padding: 20px 30px;
cursor: pointer;
text-align: center;
font-size: 0.85rem;
text-shadow: 0px -1px 0px rgba(0, 0, 0, 0.4);
border-bottom: 1px solid rgba(255, 255, 255, 0.5);
}
.slider-controls .slider-tab.current {
color: #fff;
}
.slider-navigations button {
position: absolute;
top: 50%;
color: #fff;
z-index: 20;
border: none;
height: 40px;
width: 40px;
cursor: pointer;
display: flex;
align-items: center;
justify-content: center;
background: #202022;
transform: translateY(-50%);
transition: 0.4s ease;
}
.slider-navigations button:hover {
background: #323235;
}
.slider-navigations button.swiper-button-disabled {
display: none;
}
.slider-navigations button#slide-prev {
left: 20px;
}
.slider-navigations button#slide-next {
right: 20px;
}
@media (max-width: 1536px) {
.slider-wrapper .slider-item .slide-content,
.slider-controls .slider-pagination {
width: 85%;
}
}
@media (max-width: 1024px) {
.slider-wrapper .slider-item .slide-content,
.slider-controls .slider-pagination {
width: 100%;
}
.slider-wrapper .slider-item .slide-content > * {
max-width: 66%;
}
.slider-container .slider-controls {
bottom: 50px;
}
@keyframes animate_button {
100% {
width: 100%;
opacity: 1;
}
}
.slider-navigations button {
top: unset;
bottom: -15px;
background: none;
}
.slider-navigations button:hover {
background: none;
}
}
@media (max-width: 768px) {
.slider-wrapper .slider-item .slide-content > * {
max-width: 100%;
}
}
const sliderControls = document.querySelector(".slider-controls");
const sliderTabs = sliderControls.querySelectorAll(".slider-tab");
const sliderIndicator = sliderControls.querySelector(".slider-indicator");
// Update the indicator
const updateIndicator = (tab, index) => {
document.querySelector(".slider-tab.current")?.classList.remove("current");
tab.classList.add("current");
sliderIndicator.style.transform = `translateX(${tab.offsetLeft - 20}px)`;
sliderIndicator.style.width = `${tab.getBoundingClientRect().width}px`;
// Calculate the scroll position and scroll smoothly
const scrollLeft = sliderTabs[index].offsetLeft - sliderControls.offsetWidth / 2 + sliderTabs[index].offsetWidth / 2;
sliderControls.scrollTo({ left: scrollLeft, behavior: "smooth" });
}
// Initialize swiper instance
const swiper = new Swiper(".slider-container", {
effect: "fade",
speed: 1300,
autoplay: { delay: 4000 },
navigation: {
prevEl: "#slide-prev",
nextEl: "#slide-next",
},
on: {
// Update indicator on slide change
slideChange: () => {
const currentTabIndex = [...sliderTabs].indexOf(sliderTabs[swiper.activeIndex]);
updateIndicator(sliderTabs[swiper.activeIndex], currentTabIndex);
},
reachEnd: () => swiper.autoplay.stop(),
},
});
// Update the slide on tab click
sliderTabs.forEach((tab, index) => {
tab.addEventListener("click", () => {
swiper.slideTo(index);
updateIndicator(tab, index);
});
});
updateIndicator(sliderTabs[0], 0);
window.addEventListener("resize", () => updateIndicator(sliderTabs[swiper.activeIndex], 0));
See the Pen Untitled by 周平（瑪雅網路科技） (@vzhzchpn-the-vuer) on CodePen.