Navigation and pagination positioning around slider (not over)

See original GitHub issue

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.

Issue Analytics

  • State:closed
  • Created 3 years ago
  • Reactions:37
  • Comments:11

github_iconTop GitHub Comments

11reactions
Simonbeletecommented, Oct 9, 2021

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>
```
4reactions
valsecommented, Aug 4, 2020

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.

Read more comments on GitHub >

github_iconTop Results From Across the Web

CSS - How to have swiper slider arrows outside of slider that ...
I am using bootstrap twitter css framework and I have tried various things but nothing worked and don't know how to achieve this?...
Read more >
Swiper — Relocating Previous and Next Buttons | by Aaron K.
While creating a demo for Swiper — Uno a Cuatro Column Slider I was curious to know if previous and next buttons would...
Read more >
Building modern sliders with HTML, CSS, and Swiper
Navigation, just like pagination, serves as a tool to guide through the slides with a click rather than swiping with the mouse.
Read more >
Swiper custom pagination - CodePen
Slider main container -->. 2. <div class="swiper-container"> ... If we need navigation buttons -->. 14. <div class="swiper-button-prev"></div>.
Read more >
Pagination - Bootstrap
In addition, as pages likely have more than one such navigation section, it's advisable to provide a descriptive aria-label for the <nav> to...
Read more >

github_iconTop Related Medium Post

No results found

github_iconTop Related StackOverflow Question

No results found

github_iconTroubleshoot Live Code

Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start Free

github_iconTop Related Hackernoon Post

No results found

github_iconTop Related Tweet

No results found

github_iconTop Related Dev.to Post

No results found

github_iconTop Related Hashnode Post

No results found