Как сделать стрелки видимыми за пределами контейнера?

Question

[spasatelev]

Ситуация такова:

.swiper-container: Стоит в стилях overflow: hidden - чтобы item'ы за пределами не были видны.

При попытке настроить управляющие стрелочки(prev, next) по бокам за пределами контейнера[.swiper-container], они, соответственно, не видны.

Вопрос: Каким способом их вынести за пределы блока так, чтобы они были видны и выполняли свою функцию?

<div class="swiper-container">
    <!-- Additional required wrapper -->
    <div class="swiper-wrapper">
        <!-- Slides -->
        <div class="swiper-slide">Slide 1</div>
        <div class="swiper-slide">Slide 2</div>
        <div class="swiper-slide">Slide 3</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>

    <!-- If we need scrollbar -->
    <div class="swiper-scrollbar"></div>
</div>

Answer 1

[Юрий]

Добавить кнопки в нужном месте за пределами .swiper-container и вручную повесить на них slideNext и slidePrev: https://swiperjs.com/api/#methods

Comments

[spasatelev]

У меня даже сработало когда я просто вынес, а в свойстве оставил стрелки, без методов))
Реализовал через метод из документации - все работает четко!
Да пришлось все обернуть, зато полностью рабочий слайдер.
Спасибо за решение)

[aleksandr-n]

На мой взгляд лучшее решение при условии если у тебя не одна карусель а несколько.

<div class="swiper-object">
  <div class="js-sample-slider swiper-container" data-swiper-id="1">
    <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-navigation" data-swiper-id="1">
    <button class="swiper-button-prev">Prev</button>
    <button class="swiper-button-next">Next</button>
  </div>
</div>

<div class="swiper-object">
  <div class="js-sample-slider swiper-container" data-swiper-id="2">
    <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-navigation" data-swiper-id="2">
    <button class="swiper-button-prev">Prev</button>
    <button class="swiper-button-next">Next</button>
  </div>
</div>

//Swiper
    $('.swiper-object .js-sample-slider').each(function(index, value) {
        const swiperId = $(value).data('swiper-id'); // Получаем ID карусели из data-атрибута
        const swiperNav = $('.swiper-navigation[data-swiper-id="' + swiperId + '"]'); // Находим контейнер навигации по ID карусели
        const swiper = new Swiper(value, {
            slidesPerView: 6,
            spaceBetween: 16,
            lazy: true,                         //lazy load
            loop: true,                         //loop
            pagination: {                       //pagination(dots)
                el: '.swiper-pagination',
                clickable: true,
            },
            navigation: {                       //navigation(arrows)
                nextEl: swiperNav.find('.swiper-button-next')[0],
                prevEl: swiperNav.find('.swiper-button-prev')[0],
            },
            breakpoints: {
                640: {
                    slidesPerView: 2,
                    spaceBetween: 20,
                },
                768: {
                    slidesPerView: 4,
                    spaceBetween: 40,
                },
                1024: {
                    slidesPerView: 6,
                    spaceBetween: 16,
                },
            },
        });
    });

    // Назначение событий на кнопки навигации
    $('.swiper-navigation .swiper-button-prev').on('click', function() {
        const swiperId = $(this).closest('.swiper-navigation').data('swiper-id');
        const swiper = $('.js-sample-slider[data-swiper-id="' + swiperId + '"]')[0].swiper;
        swiper.slidePrev();
    });

    $('.swiper-navigation .swiper-button-next').on('click', function() {
        const swiperId = $(this).closest('.swiper-navigation').data('swiper-id');
        const swiper = $('.js-sample-slider[data-swiper-id="' + swiperId + '"]')[0].swiper;
        swiper.slideNext();
    });