I am made a slider using html CSS and swipper.js. i want the color of the focused (middle ) slide is black and other slides are blue how can i do that. i tried but the it is not working properly it change the color of middle slide when i slide the middle slide not when it is in middle position( means when i change the position of middle slide then its color changes to black not when it is in middle position)
<!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">
<title>Fody Slider</title>
<link rel="stylesheet" href="https://unpkg.com/swiper@8/swiper-bundle.min.css" />
<link rel="stylesheet" href="style copy.css">
<!-- <link rel="stylesheet" href="styles.css"> -->
</head>
<body>
<div style="width: 100%;height: 200px;display: flex;flex-direction: column;justify-content: center;align-items: center;">
<p class="prjectsfirsttext">Our Design Process</p>
<p class="prjectssecondtext">Our Work Process
Make Your Dream True</p>
</div>
<div style="margin-left: 200px;margin-right: 200px;position: relative; ;display: flex;flex-direction: column;justify-content: center;align-items: center;background-color: white;" id="tranding" >
<!-- happy clients -->
<div class="container1" style="display: flex;justify-content: center;align-items: center;">
<div class=" " >
<button class="swiper-button-prev" style="width: 100px;height: 50px;text-align: center;background-color: red ;border: none;">prev</button>
</div>
<div class="swiper tranding-slider swiper-container" style="width: 500px;height: 300px;">
<div class="swiper-wrapper" style="position: absolute;">
<!-- Slide-start -->
<!-- Slide-end -->
<!-- Slide-start -->
<div class="swiper-slide tranding-slide" style="background-color: blue;">
</div>
<!-- Slide-end -->
<!-- Slide-start -->
<div class="swiper-slide tranding-slide" style="background-color: green;">
</div>
<!-- Slide-end -->
<!-- Slide-start -->
<div class="swiper-slide tranding-slide" style="background-color: yellowgreen;">
</div>
<!-- Slide-end -->
<!-- Slide-start -->
<!-- Slide-end -->
</div>
</div>
<div class=" " style="bottom: 20px;">
<button class="swiper-button-next" style="width: 100px;height: 50px;text-align: center;background-color: red ;border: none;">prev</button>
</div>
</div>
<!-- </section> -->
</div>
<script type="module" src="https://unpkg.com/[email protected]/dist/ionicons/ionicons.esm.js"></script>
<script nomodule src="https://unpkg.com/[email protected]/dist/ionicons/ionicons.js"></script>
<script src="https://unpkg.com/swiper@8/swiper-bundle.min.js"></script>
<script src="script.js"></script>
</body>
</html>
CSS:
.container1{
width: 100%;
}
.section-heading {
font-size: 3rem;
color: var(--primary);
padding: 2rem 0;
}
#tranding {
padding: 4rem 0;
}
.maindpslidercontaner{
background-color: red;
padding: 20px;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
border-radius: 10px;
}
.maindpslidercontaner img{
width: 80px;
height: 80px;
}
.maindpslidercontaner :nth-child(2){
height: 30px;
margin: 20px;
color: white;
font-size: 24px;
font-weight: bold;
}
.maindpslidercontaner :nth-child(3){
margin: 0px;
text-align: center;
}
#tranding .tranding-slider {
height: 52rem;
padding: 2rem 0;
}
.tranding-slide .tranding-slide-content {
position: absolute;
left: 0;
top: 0;
right: 0;
bottom: 0;
}
.swiper-slide-shadow-left,
.swiper-slide-shadow-right {
display: none;
}
.tranding-slider-control {
position: absolute;
top: 50%;
transform: translateY(-50%);
width: 100%;
display: flex;
justify-content: space-between;
align-items: center;
}
index.js
document.addEventListener("DOMContentLoaded", function () {
var TrandingSlider = new Swiper('.tranding-slider', {
effect: 'coverflow',
grabCursor: true,
centeredSlides: true,
loop: true,
slidesPerView: 2, // Show three slides at a time
spaceBetween: 0,
coverflowEffect: {
rotate: 0,
stretch: 0,
depth: 100,
outerWidth: 200,
modifier: 2.5,
},
navigation: {
nextEl: '.swiper-button-next',
prevEl: '.swiper-button-prev',
},
on: {
slideChange: function () {
updateSlideColors();
}
}
});
function updateSlideColors() {
var slides = document.querySelectorAll('.tranding-slide');
slides.forEach(function (slide) {
slide.style.backgroundColor = 'blue'; // Set your default background color here
});
var activeSlide = document.querySelector('.tranding-slide.swiper-slide-active');
if (activeSlide) {
activeSlide.style.backgroundColor = 'black'; // Set background color for active slide
}
}
// Initial setup
updateSlideColors();
});
swiper.on('slideChange', () => {
const colors = ['#f00', '#0f0', '#00f'];
const activeSlideIndex = swiper.activeSlide;
const activeSlide = document.querySelector(`.swiper-slide:nth-child(${activeSlideIndex + 1})`);
activeSlide.style.backgroundColor = colors[activeSlideIndex];
});
also told me what is the way to I implemented the code of js for purpose so that the focused slide (slide at middle) should black and other should blue but it is not working as aspected how to correct this
now let me show the code of website frontend where i integrated this slider but it is not working
index.html