Swiper: Swiper nav arrows outside the swiper-container

Created on 2 May 2017 · 5Comments · Source: nolimits4web/swiper

Hi guys,
I'm trying to display the nav arrows outside the swiper-container and not over the slider.
I tried positioning with CSS:

.swiper-button-next, .swiper-container-rtl .swiper-button-prev{ right:-20px; } .swiper-button-prev, .swiper-container-rtl .swiper-button-next{ background-image:url(assets/img/swiper-left.png); left:-20px; }

But the arrows won't display because of the swiper-container CSS overflow: hidden;

So I tried moving the nav arrows outside the swiper-container, now they display but they effect all the Swipers in the page.

My Swiper is configured like this:

initialize swiper */ var mySwiper = new Swiper ('.swiper-container', { // Optional parameters nextButton: '.swiper-button-next', prevButton: '.swiper-button-prev', slidesPerView: 2, spaceBetween: 30, loop: true });

Any ideas?

Source

OZDstudio

All 5 comments

Have you tried to simply put the swiper-button-next,prev outside the swiper-container then adjust with css?

<div class="someWrapper">
    <div class="swiper-button-next"></div>
        <div class="swiper-container">
            <div class="swiper-wrapper">
                <div class="swiper-slide">Slide 1</div>
                <div class="swiper-slide">Slide 2</div>
            </div>
        </div>
    <div class="swiper-button-prev"></div>
</div>  
.somewrapper{
position:relative;
}

mlangone on 2 May 2017

👎4

This does not seem to work for me

theskillwithin on 6 Jun 2017

huuuge bummer in react here is my work around using react-dynamic-swiper, reallly wish they made it easier to do this because there is a lot of times I need the next/prev to be outside the container:

class ThumbSlider extends React.Component {
  constructor(props) {
    super(props)
    this.state = {
      swiperInit: false,
      isBeginning: true,
      isEnd: false,
    }
    this.settings = {
      loop: false,
      speed: 500,
      slidesPerView: 'auto',
      autoHeight: true,
      width: 537,
      height: 72,
      pagination: false,
      spaceBetween: 10,
      uniqueNavElements: false,
      nextButton: '.swiper-button-next',
      prevButton: '.swiper-button-prev',
    }
    this.next = this.next.bind(this)
    this.previous = this.previous.bind(this)
    this.isBeginning = this.isBeginning.bind(this)
    this.isEnd = this.isEnd.bind(this)
    this.initSwiperz = this.initSwiperz.bind(this)
  }
  componentDidUpdate(prevProps) {
    const props = this.props
    const settings = this.settings
  }

  next() {
    this.reactSwiper.swiper().slideNext()
    this.setState({ isBeginning: this.isBeginning() })
    this.setState({ isEnd: this.isEnd() })
  }

  previous() {
    this.reactSwiper.swiper().slidePrev()
    this.setState({ isBeginning: this.isBeginning() })
    this.setState({ isEnd: this.isEnd() })
  }

  isBeginning() {
    return this.reactSwiper.swiper().isBeginning
  }

  isEnd() {
    return this.reactSwiper.swiper().isEnd
  }

  initSwiperz() {
    this.setState({ swiperInit: true })
  }

  render() {
    const props = this.props
    const settings = this.settings

    const Thumbs = props.thumbs.map((thumb, index) => (
      <Slide
        key={index}
        className={classNames(
          'mm-thumb-slider__slide',
          thumb.disabled && 'mm-thumb-slider__slide--disabled',
        )}
        style={{ width: thumb.width, height: thumb.height }}
      >
        <div className="mm-thumb-slider__thumb">
          <img src={thumb.src} alt="thumb" />
          <div className="mm-thumb-slider__remove-thumb" onClick={() => props.onRemove(index)}>
            <CloseIcon size={15} />
          </div>
        </div>
      </Slide>
    ))
    return props.thumbs.length > 4
      ? (<div className="mm-swiper-contain">
          {this.state.swiperInit
            ? (<div onClick={() => this.previous()} className={`swiper-button-prev ${this.state.isBeginning && 'swiper-button-disabled'}`} />)
            : null
          }
          <Swiper
            ref={(c) => { this.reactSwiper = c }}
            className="mm-thumb-slider"
            swiperOptions={settings}
            onInitSwiper={() => this.initSwiperz()}
          >
            {Thumbs}
          </Swiper>
          {this.state.swiperInit
            ? (<div onClick={() => this.next()} className={`swiper-button-next ${this.state.isEnd && 'swiper-button-disabled'}`} />)
            : null
          }
        </div>)
      : (<div className="mm-thumb-sliderless-view">{Thumbs}</div>)
  }
}

export default ThumbSlider

theskillwithin on 6 Jun 2017

Issue is closed because of outdated/irrelevant/not actual/needed more information/inactivity.

If this issue is still actual and reproducible for latest version of Swiper, please create new issue and fill the issue template correctly: