Anonymous
Swiper JavaScript не работает на моем сайте, а работает на местном
Сообщение
Anonymous » 22 апр 2025, 02:11
Я хотел добавить слайдер на свой собственный сайт с помощью плагина Elementor "HTML". Я проверил это на Localhost, но это не сработало, когда дело дошло до сайта. На моем сайте на основе WordPress работали только первое изображение и текст, но когда я прокручивал кнопку, появилась белая и пустая страница. Причина этого, вероятно, что -то блокирует его на моем сайте, но я не смог его найти. Я был бы очень рад, если бы вы могли мне помочь. < /P>
Код: Выделить всё
[img]https://i.ibb.co/Nng62bWf/IMG-20250421-WA0022.jpg[/img]
Renk Seçenekleri:
Mavi
[img]https://i.ibb.co/HMBBKCB/IMG-20250421-WA0023.jpg[/img]
Renk Seçenekleri:
Beyaz
[img]https://i.ibb.co/3ycNMytq/IMG-20250421-WA0024.jpg[/img]
Renk Seçenekleri:
Turkuaz
[img]https://i.ibb.co/Nng62bWf/IMG-20250421-WA0022.jpg[/img]
[img]https://i.ibb.co/HMBBKCB/IMG-20250421-WA0023.jpg[/img]
[img]https://i.ibb.co/3ycNMytq/IMG-20250421-WA0024.jpg[/img]
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,
},
});
});
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;
}
Живая ошибка:
https://www.pondhavuz.com/fiber-havuzlar/
и у меня есть фрагменты
Подробнее здесь:
https://stackoverflow.com/questions/795 ... king-local
1745277079
Anonymous
Я хотел добавить слайдер на свой собственный сайт с помощью плагина Elementor "HTML". Я проверил это на Localhost, но это не сработало, когда дело дошло до сайта. На моем сайте на основе WordPress работали только первое изображение и текст, но когда я прокручивал кнопку, появилась белая и пустая страница. Причина этого, вероятно, что -то блокирует его на моем сайте, но я не смог его найти. Я был бы очень рад, если бы вы могли мне помочь. < /P> [code] [img]https://i.ibb.co/Nng62bWf/IMG-20250421-WA0022.jpg[/img] Renk Seçenekleri: Mavi [img]https://i.ibb.co/HMBBKCB/IMG-20250421-WA0023.jpg[/img] Renk Seçenekleri: Beyaz [img]https://i.ibb.co/3ycNMytq/IMG-20250421-WA0024.jpg[/img] Renk Seçenekleri: Turkuaz [img]https://i.ibb.co/Nng62bWf/IMG-20250421-WA0022.jpg[/img] [img]https://i.ibb.co/HMBBKCB/IMG-20250421-WA0023.jpg[/img] [img]https://i.ibb.co/3ycNMytq/IMG-20250421-WA0024.jpg[/img] 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, }, }); }); 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; } [/code] Живая ошибка: https://www.pondhavuz.com/fiber-havuzlar/ и у меня есть фрагменты Подробнее здесь: [url]https://stackoverflow.com/questions/79585413/swiper-javascript-not-working-on-my-site-but-working-local[/url]