Как решить проблему со слайдером (swiper.js)?
<div class="Header-2__main"> <div class="Header-2__slider"> <div class="swiper-wrapper"> <div class="swiper-slide" style="background-image: url('../img/header/headerbg-1.jpg');"></div> <div class="swiper-slide" style="background-image: url('../img/header/headerbg-2.jpg');"></div> <div class="swiper-slide" style="background-image: url('../img/header/headerbg-3.jpg');"></div> </div> <div class="swiper-pagination"></div> </div> </div> <div class="swiper-button-next-header-2"> <svg width="25" height="25" viewBox="0 0 25 25" fill="none" xmlns="http://www.w3.org/2000/svg"> <rect x="24.5" y="24.5" width="24" height="24" transform="rotate(-180 24.5 24.5)"></rect> <path d="M10.2567 18.9102L16.667 12.4999L10.2567 6.08964"></path> </svg> </div> <div class="swiper-button-prev-header-2"> <svg width="25" height="25" viewBox="0 0 25 25" fill="none" xmlns="http://www.w3.org/2000/svg"> <rect x="0.5" y="0.5" width="24" height="24"></rect> <path d="M14.7433 6.08984L8.33301 12.5001L14.7433 18.9104"></path> </svg> </div> |
<div class="Header-2__main"> <div class="Header-2__slider"> <div class="swiper-wrapper"> <div class="swiper-slide" style="background-image: url('../img/header/headerbg-1.jpg');"></div> <div class="swiper-slide" style="background-image: url('../img/header/headerbg-2.jpg');"></div> <div class="swiper-slide" style="background-image: url('../img/header/headerbg-3.jpg');"></div> </div> <div class="swiper-pagination"></div> </div> </div> <div class="swiper-button-next-header-2"> <svg width="25" height="25" viewBox="0 0 25 25" fill="none" xmlns="http://www.w3.org/2000/svg"> <rect x="24.5" y="24.5" width="24" height="24" transform="rotate(-180 24.5 24.5)"></rect> <path d="M10.2567 18.9102L16.667 12.4999L10.2567 6.08964"></path> </svg> </div> <div class="swiper-button-prev-header-2"> <svg width="25" height="25" viewBox="0 0 25 25" fill="none" xmlns="http://www.w3.org/2000/svg"> <rect x="0.5" y="0.5" width="24" height="24"></rect> <path d="M14.7433 6.08984L8.33301 12.5001L14.7433 18.9104"></path> </svg> </div>
.Header-2__slider { overflow: visible; margin: 0 auto; max-width: 680px; .swiper-slide { min-height: 380px; background-position: center center; background-repeat: no-repeat; background-size: cover; } .swiper-pagination { display: flex; margin: 0; position: absolute; justify-content: center; gap: 16px; bottom: 0px; z-index: 10; &-bullet { margin: 0 !important; width: 8px; height: 8px; background-color: transparent; border: 1px solid rgba(255, 255, 255, 0.5); border-radius: 0%; &:hover { border: 1px solid $white; } } &-bullet-active::after { width: 8px; height: 8px; border-radius: 0%; border: 1px solid $white; background-color: $white; } } } |
.Header-2__slider { overflow: visible; margin: 0 auto; max-width: 680px; .swiper-slide { min-height: 380px; background-position: center center; background-repeat: no-repeat; background-size: cover; } .swiper-pagination { display: flex; margin: 0; position: absolute; justify-content: center; gap: 16px; bottom: 0px; z-index: 10; &-bullet { margin: 0 !important; width: 8px; height: 8px; background-color: transparent; border: 1px solid rgba(255, 255, 255, 0.5); border-radius: 0%; &:hover { border: 1px solid $white; } } &-bullet-active::after { width: 8px; height: 8px; border-radius: 0%; border: 1px solid $white; background-color: $white; } } }
const header2Slider = new Swiper('.Header-2__slider', { loop: true, slidesPerView: 'auto', spaceBetween: 40, initialSlide: 1, navigation: { nextEl: '.swiper-button-next-header-2', prevEl: '.swiper-button-prev-header-2', }, pagination: { el: '.swiper-pagination', clickable: true, } }); |
const header2Slider = new Swiper('.Header-2__slider', { loop: true, slidesPerView: 'auto', spaceBetween: 40, initialSlide: 1, navigation: { nextEl: '.swiper-button-next-header-2', prevEl: '.swiper-button-prev-header-2', }, pagination: { el: '.swiper-pagination', clickable: true, } });
Необходимо:
Дополнительно:
https://swiperjs.com/demos#infinite-loop
Опишите проблему, и специалист поможет с настройкой, исправлением ошибки или доработкой сайта. Подберём понятный план работ без лишней переписки.
Пока нет других ответов. Будьте первым, кто поможет автору.
Ответить на вопрос
Для решения проблемы со слайдером (swiper.js) вам следует выполнить следующие шаги:
1. Убедитесь, что у вас правильно подключена библиотека Swiper.js. Для этого добавьте ссылку на файл swiper.min.js перед закрывающим тегом :
2. Проверьте, что у вас есть правильная структура HTML для слайдера. Обычно она выглядит следующим образом:
<div class="swiper-container"> <div class="swiper-wrapper"> <div class="swiper-slide">Slide 1</div> <div class="swiper-slide">Slide 2</div> <div class="swiper-slide">Slide 3</div> <!-- Добавьте столько слайдов, сколько вам нужно --> </div> <!-- Добавьте кнопки управления слайдером, если необходимо --> </div><div class="swiper-container"> <div class="swiper-wrapper"> <div class="swiper-slide">Slide 1</div> <div class="swiper-slide">Slide 2</div> <div class="swiper-slide">Slide 3</div> <!-- Добавьте столько слайдов, сколько вам нужно --> </div> <!-- Добавьте кнопки управления слайдером, если необходимо --> </div>
3. Инициализируйте слайдер, указав контейнер и необходимые параметры. Например:
var mySwiper = new Swiper('.swiper-container', { // Настройки слайдера loop: true, navigation: { nextEl: '.swiper-button-next', prevEl: '.swiper-button-prev', }, });
4. Убедитесь, что у вас правильно настроены стили для слайдера. Проверьте, что у вас есть необходимые классы для контейнера, слайдов и кнопок управления.
5. Если у вас возникают проблемы с отображением слайдера или его работой, вы можете обратиться к документации библиотеки Swiper.js или поискать решение проблемы на форумах и сообществах разработчиков.
Следуя этим шагам, вы сможете успешно решить проблему со слайдером (swiper.js) на вашем сайте.