title: Swiper nav buttons outside container
body: <p>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.</p>
  
  <p>That worked, the problem is that now the nav buttons control all sliders and i can't figure out a way to solve this.</p>
  
  <p>I don't want to initialize multiple sliders with different classes if the slider is the same with different content.</p>
  
  <p><a href="https://jsfiddle.net/hmLLo1cn/" rel="noreferrer">JSFiddle</a></p>
  
  <p><div class="snippet" data-lang="js" data-hide="true" data-console="true" data-babel="false">
  <div class="snippet-code snippet-currently-hidden">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>var sliderProdutosDestaque = new Swiper('.slider-produtos-destaque.swiper-container', {
    slidesPerView: 2,
    spaceBetween: 10,
    navigation: {
      nextEl: '.swiper-next',
      prevEl: '.swiper-prev',
    }
  });</code></pre>
  <pre class="snippet-code-css lang-css prettyprint-override"><code>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;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;link href="https://cdnjs.cloudflare.com/ajax/libs/Swiper/4.1.0/css/swiper.min.css" rel="stylesheet" /&gt;
  &lt;script src="https://cdnjs.cloudflare.com/ajax/libs/Swiper/4.1.0/js/swiper.min.js"&gt;&lt;/script&gt;
  &lt;div class="slider-produtos-wrap"&gt;
    &lt;div class="slider-produtos-destaque swiper-container"&gt;
      &lt;div class="swiper-wrapper"&gt;
        &lt;div class="swiper-slide"&gt;Slide 1&lt;/div&gt;
        &lt;div class="swiper-slide"&gt;Slide 2&lt;/div&gt;
        &lt;div class="swiper-slide"&gt;Slide 3&lt;/div&gt;
      &lt;/div&gt;
    &lt;/div&gt;
  
    &lt;div class="swiper-prev"&gt;&lt;/div&gt;
    &lt;div class="swiper-next"&gt;&lt;/div&gt;
  
  &lt;/div&gt;
  
  &lt;div class="slider-produtos-wrap"&gt;
    &lt;div class="slider-produtos-destaque swiper-container"&gt;
      &lt;div class="swiper-wrapper"&gt;
        &lt;div class="swiper-slide"&gt;Slide 1&lt;/div&gt;
        &lt;div class="swiper-slide"&gt;Slide 2&lt;/div&gt;
        &lt;div class="swiper-slide"&gt;Slide 3&lt;/div&gt;
      &lt;/div&gt;
    &lt;/div&gt;
  
    &lt;div class="swiper-prev"&gt;&lt;/div&gt;
    &lt;div class="swiper-next"&gt;&lt;/div&gt;
  
  &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>