I wanted to add a slider to my own site with the Elementor “HTML” plugin. I tested it on localhost but it didn’t work when it came to the site. On my WordPress based site, only the first image and text worked, but when I scrolled with the button, a white and blank page appeared. The reason for this is probably something blocking it on my site, but I couldn’t find it. I would be very happy if you could help me.
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/swiper@11/swiper-bundle.min.css"/>
<!-- Galeri -->
<div class="gallery-wrapper">
<!-- Ana Swiper -->
<div class="swiper mySwiperMain">
<div class="swiper-wrapper">
<div class="swiper-slide">
<div class="image-box">
<img src="https://i.ibb.co/Nng62bWf/IMG-20250421-WA0022.jpg" alt="Mavi">
<div class="slide-text-container">
<div class="slide-title-fixed">Renk Seçenekleri:</div>
<div class="slide-text">Mavi</div>
</div>
</div>
</div>
<div class="swiper-slide">
<div class="image-box">
<img src="https://i.ibb.co/HMBBKCB/IMG-20250421-WA0023.jpg" alt="Beyaz">
<div class="slide-text-container">
<div class="slide-title-fixed">Renk Seçenekleri:</div>
<div class="slide-text">Beyaz</div>
</div>
</div>
</div>
<div class="swiper-slide">
<div class="image-box">
<img src="https://i.ibb.co/3ycNMytq/IMG-20250421-WA0024.jpg" alt="Turkuaz">
<div class="slide-text-container">
<div class="slide-title-fixed">Renk Seçenekleri:</div>
<div class="slide-text">Turkuaz</div>
</div>
</div>
</div>
</div>
<div class="swiper-button-next custom-next"></div>
</div>
<!-- Thumbnail Swiper -->
<div class="swiper mySwiperThumb">
<div class="swiper-wrapper">
<div class="swiper-slide"><img src="https://i.ibb.co/Nng62bWf/IMG-20250421-WA0022.jpg" alt=""></div>
<div class="swiper-slide"><img src="https://i.ibb.co/HMBBKCB/IMG-20250421-WA0023.jpg" alt=""></div>
<div class="swiper-slide"><img src="https://i.ibb.co/3ycNMytq/IMG-20250421-WA0024.jpg" alt=""></div>
</div>
</div>
</div>
<!-- Swiper JS -->
<script src="https://cdn.jsdelivr.net/npm/swiper@11/swiper-element-bundle.min.js"></script>
<!-- Swiper Ayarları -->
<script>
window.addEventListener('DOMContentLoaded', () => {
const swiperThumb = new Swiper(".mySwiperThumb", {
spaceBetween: 10,
slidesPerView: 3,
freeMode: true,
watchSlidesProgress: true,
});
const swiperMain = new Swiper(".mySwiperMain", {
spaceBetween: 10,
navigation: {
nextEl: '.custom-next',
},
loop: false, // Loop sorun çıkarıyordu
thumbs: {
swiper: swiperThumb,
},
});
});
</script>
<!-- Stil -->
<style>
body {
background: #111;
font-family: sans-serif;
margin: 0;
padding: 20px;
}
.gallery-wrapper {
position: relative;
max-width: 1500px;
margin: auto;
}
.swiper.mySwiperMain {
border-radius: 15px;
overflow: hidden;
position: relative;
}
.image-box {
position: relative;
}
.image-box img {
width: 100%;
display: block;
}
.slide-text-container {
position: absolute;
left: 20px;
top: 50%;
transform: translateY(-50%);
display: flex;
flex-direction: column;
gap: 6px;
}
.slide-title-fixed {
background: rgba(0, 0, 0, 0.6);
color: #fff;
padding: 4px 12px;
border-radius: 8px;
font-size: 16px;
font-weight: normal;
}
.slide-text {
background: rgba(0, 0, 0, 0.6);
color: #fff;
padding: 8px 16px;
border-radius: 8px;
font-size: 15px;
font-weight: bold;
}
.mySwiperThumb {
position: absolute;
bottom: 20px;
left: 20px;
z-index: 10;
width: auto;
height: auto;
}
.mySwiperThumb .swiper-slide {
width: 75px !important;
height: 50px;
opacity: 1 !important;
transition: none !important;
transform: none !important;
}
.mySwiperThumb .swiper-slide-thumb-active {
border: 2px solid white;
border-radius: 6px;
}
.mySwiperThumb .swiper-slide img {
width: 100%;
border-radius: 6px;
}
.swiper-button-next.custom-next {
color: white;
background: dodgerblue;
padding: 0;
border-radius: 1px;
right: 10px;
top: 50%;
transform: translateY(-50%);
position: absolute;
z-index: 10;
width: 40px;
height: 40px;
display: flex;
justify-content: center;
align-items: center;
}
.swiper-button-next.custom-next::after {
font-size: 22px;
font-weight: bold;
}
</style>
Live error: https://www.pondhavuz.com/fiber-havuzlar/
