CODEWITHSUNDEEP
javascriptjqueryhtmlcssswiper.js
Gabriel Souza
Gabriel Souza

Reputation: 1015

Swiper nav buttons outside container

I'm trying to display the nav buttons outside the swiper container, because of the container overflow: hidden i had to create a wrap with position: relative and position the buttons absolutely.

That worked, the problem is that now the nav buttons control all sliders and i can't figure out a way to solve this.

I don't want to initialize multiple sliders with different classes if the slider is the same with different content.

JSFiddle

var sliderProdutosDestaque = new Swiper('.slider-produtos-destaque.swiper-container', {
  slidesPerView: 2,
  spaceBetween: 10,
  navigation: {
    nextEl: '.swiper-next',
    prevEl: '.swiper-prev',
  }
});
body {
  padding: 20px 60px 40px;
}

.slider-produtos-wrap {
  position: relative;
  width: 100%;
  margin-top: 20px;
}

.swiper-slide {
  z-index: 1;
  height: 150px;
  background: blue;
}

.swiper-prev,
.swiper-next {
  width: 60px;
  height: 60px;
  background: red;
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  border-radius: 60px;
  z-index: 9999;
}

.swiper-prev {
  left: -30px;
}

.swiper-next {
  right: -30px;
}
<link href="https://cdnjs.cloudflare.com/ajax/libs/Swiper/4.1.0/css/swiper.min.css" rel="stylesheet" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/Swiper/4.1.0/js/swiper.min.js"></script>
<div class="slider-produtos-wrap">
  <div class="slider-produtos-destaque swiper-container">
    <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-prev"></div>
  <div class="swiper-next"></div>

</div>

<div class="slider-produtos-wrap">
  <div class="slider-produtos-destaque swiper-container">
    <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-prev"></div>
  <div class="swiper-next"></div>

</div>

Upvotes: 5

Views: 25246

Answers (4)

Allen
Allen

Reputation: 11

.swiper-container {
    width: 100%;
    height: 400px;
    padding: 0 50px;
}
.swiper-container::before{
    content: "";
    display: block;
    background: #fff;
    left: 0;
    position: absolute;
    top: 0;
    height: 400px;
    width: 40px;
    z-index: 9;
}
.swiper-container::after{
    content: "";
    display: block;
    background: #fff;
    right: 0;
    position: absolute;
    top: 0;
    height: 400px;
    width: 40px;
    z-index: 9;
}

Upvotes: 1

Amadea Kimmins
Amadea Kimmins

Reputation: 11

Another way for anyone that might find it useful. Pass in count as a props with a different value for each slider. I did count="1" and count="2". This gives each sliders navigation arrows a different class so they will work independently of each other

<div :class="'swiper-button-prev-' + count" slot="button-prev"></div>
<div :class="'swiper-button-next-' + count" slot="button-next"></div>

props: ['count'],
data() {
  return {
    swiperOption: {
    slidesPerView: 'auto',
    spaceBetween: 45,
    grabCursor: true,
    centerInsufficientSlides: true,
    navigation: {
      nextEl: `.swiper-button-next-${this.count}`,
      prevEl: `.swiper-button-prev-${this.count}`
    }
  }
}

Upvotes: 1

Vignesh Raja
Vignesh Raja

Reputation: 8761

Easy, tiny and tidy.

document.querySelectorAll('.swiper-container').forEach(function(elem) {
  new Swiper(elem, {
    slidesPerView: 2,
    spaceBetween: 10,
    navigation: {
      nextEl: elem.nextElementSibling.nextElementSibling,
      prevEl: elem.nextElementSibling,
    }
  });
});
body {
  padding: 20px 60px 40px;
}

.slider-produtos-wrap {
  position: relative;
  width: 100%;
  margin-top: 20px;
}

.swiper-slide {
  z-index: 1;
  height: 150px;
  background: blue;
}

.swiper-prev,
.swiper-next {
  width: 60px;
  height: 60px;
  background: red;
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  border-radius: 60px;
  z-index: 9999;
}

.swiper-prev {
  left: -30px;
}

.swiper-next {
  right: -30px;
}
<link href="https://cdnjs.cloudflare.com/ajax/libs/Swiper/4.1.0/css/swiper.min.css" rel="stylesheet" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/Swiper/4.1.0/js/swiper.min.js"></script>
<div class="slider-produtos-wrap">
  <div class="slider-produtos-destaque swiper-container">
    <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-prev"></div>
  <div class="swiper-next"></div>

</div>

<div class="slider-produtos-wrap">
  <div class="slider-produtos-destaque swiper-container">
    <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-prev"></div>
  <div class="swiper-next"></div>

</div>

Upvotes: 5

Valeklosse
Valeklosse

Reputation: 1017

A possible solution is to loop through the elements that contain the slider container, and then grabbing the elements that are required (Swiper, Next Btn, Prev Btn) and using this in the setup for the Swiper. 

var x = document.getElementsByClassName("slider-produtos-wrap");

for(var i = 0; i < x.length; i++) {

    var el = x[i];

  var swiper = el.getElementsByClassName("swiper-container")[0];
  var nx = el.getElementsByClassName("swiper-next")[0];
  var pr = el.getElementsByClassName("swiper-prev")[0];

  new Swiper(swiper, {
        slidesPerView: 2,  
        spaceBetween: 10,
        navigation: {
          nextEl: nx,
          prevEl: pr
        }
  });
}

JSFiddle

Upvotes: 4

Related Questions