Navigation and pagination positioning around slider (not over)

This is a (multiple allowed):

• bug

• enhancement

• feature-discussion (RFC)

• Swiper Version: 6.0.4

• Platform/Target and Browser Versions: Ubuntu 18 // Google Chrome 84.0.4147.105

Issue

I wish I could move arrows and pagination/scrollbar outside the slider (not over). Now it’s impossible to do it correctly and honour the vertical/horizontal direction.

• swiper-container has overflow:hidden, so I can’t position arrows/pagination/scrollbar elements outside it or they get hidden. I can’t remove the overflow:hidden property from container or slides get visible outside the container…
• xxx-horizontal and xxx-vertical classes are added to swiper-container, so even if I take the arrows/pagination/scrollbar outside the container, I’d be unable to know which direction is the slider configured with (yes, I could use the “all siblings css selector” ~, but I’d feel kinda dirty)

Possible solutions

1. Add extra div around the swiper-wrapper, something like swiper-clip that has the overflow:hidden style.

<div class="swiper-container">
    <div class="swiper-clip">
        <div class="swiper-wrapper">
            <div class="swiper-slide">Slide 1</div>
            <div class="swiper-slide">Slide 2</div>
            ...
        </div>
    </div>
    <div class="swiper-pagination"></div>
    <div class="swiper-button-prev"></div>
    <div class="swiper-button-next"></div>
    <div class="swiper-scrollbar"></div>
</div>

1. Search for wrapperClass hierarchically within the element, instead of searching only direct children. Use find method here (like it is used for prevEl, nextEl, pagination.el, …): https://github.com/nolimits4web/swiper/blob/77d72e411ef91b7580eb8fb96f05f0e43a0a6b90/src/components/core/core-class.js#L144 This way I could create the swiper-clip element myself

Option 1 would be my prefered, though it would not be simple, and may cause a new major version. Option 2 is very simple, just a patch.

[Simonbelete]

I achieved navigation around with margin and position

<div className="relative md:w-1/6">
      <Swiper
        spaceBetween={0}
        slidesPerView={1}
        navigation={{
          prevEl: navigationPrevRef.current,
          nextEl: navigationNextRef.current,
        }}
        modules={[Navigation]}
        style={{ marginLeft: '80px', marginRight: '80px', position: 'unset' }}
      >
        <SwiperSlide className="flex items-center justify-center">
          <div>
            <p>Slide 1</p>
            <p>Slide 1</p>
            <p>Slide 1</p>
            <p>Slide 1</p>
            <p>Slide 1</p>
            <p>Slide 1</p>
          </div>
        </SwiperSlide>
        <SwiperSlide className="flex items-center justify-center">
          <div>
            <p>Slide 2</p>
            <p>Slide 2</p>
            <p>Slide 2</p>
            <p>Slide 2</p>
            <p>Slide 2</p>
            <p>Slide 2</p>
          </div>
        </SwiperSlide>
        <div
          ref={navigationPrevRef}
          className="flex items-center absolute top-0 bottom-0 left-0 right-auto cursor-pointer"
        >
          {/* --- SVG ICON */}
        </div>
        <div
          ref={navigationNextRef}
          className="flex items-center absolute top-0 bottom-0 left-auto right-0 cursor-pointer"
        >
          {/* --- SVG ICON */}
        </div>
      </Swiper>
    </div>
```

[valse]

Hi, how can I use outside navigation’s element with the React component too? At the moment I’m using CSS selector like:

navigation={{
   prevEl: ".my__slider .swiper-button-prev.icon-prev",
   nextEl: ".my__slider .swiper-button-next.icon-next",
}}

but if I have more then one of the same component, the pagination click will trigger all the swipers.

I tried using ref but with no success because the current element is null when Swiper is initialized.