https://swiperjs.com/get-started
Если у
.swiper не убирать
overflow: hidden
То кнопки не могут быть вынесены за его пределы
А если убрать
overflow: hidden у
.swiper, то видны другие слайды.
Хотя добавляя к
.swiper-wrapper свойство
overflow: hidden, который внутри
.swiper, то исчезают из видимости все слайдеры вообще.
Теоретический можно вынести дивы со стрелочками за пределы
.swiper, но как тогда инициализировать наш слайдер не по
.swiper, а по родительскому блоку в который мы вложем
.swiper и
<div class="swiper-button-prev"></div>
<div class="swiper-button-next"></div>
а то получается, что если у нас таких два слайдера на странице, то у них получаются общие кнопки перелистывания.
Как кнопки, которые за пределами слайдера инициализировать с привязкой к своим лайдерам?
Надеюсь я смог понятно объяснить свой вопрос.
<div class="swiper">
<div class="swiper-wrapper">
<!-- Slides -->
<div class="swiper-slide">
<img src="1.jpg">
</div>
<div class="swiper-slide">
<img src="2.jpg">
</div>
<div class="swiper-slide">
<img src="3.jpg">
</div>
<div class="swiper-slide">
<img src="4.jpg">
</div>
...
</div>
<!-- If we need pagination -->
<div class="swiper-pagination"></div>
<!-- If we need navigation buttons -->
<div class="swiper-button-prev"></div>
<div class="swiper-button-next"></div>
</div>
import Swiper from 'https://unpkg.com/swiper@8/swiper-bundle.esm.browser.min.js'
const swiper = new Swiper('.swiper', {
// Optional parameters
direction: 'horizontal',
loop: true,
// If we need pagination
pagination: {
el: '.swiper-pagination',
},
// Navigation arrows
navigation: {
nextEl: '.swiper-button-next',
prevEl: '.swiper-button-prev',
},
// And if we need scrollbar
scrollbar: {
el: '.swiper-scrollbar',
},
});
