Swiper JavaScript не работает на моем сайте, а работает на местномHtml

Программисты Html
Ответить
Anonymous
 Swiper JavaScript не работает на моем сайте, а работает на местном

Сообщение Anonymous »

Я хотел добавить слайдер на свой собственный сайт с помощью плагина 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
Ответить

Быстрый ответ

Изменение регистра текста: 
Смайлики
:) :( :oops: :roll: :wink: :muza: :clever: :sorry: :angel: :read: *x)
Ещё смайлики…
   
К этому ответу прикреплено по крайней мере одно вложение.

Если вы не хотите добавлять вложения, оставьте поля пустыми.

Максимально разрешённый размер вложения: 15 МБ.

Вернуться в «Html»