title: Display the nav arrows outside the swiper-container
body: <p>I'm trying to display the nav arrows outside the swiper-container and not over the slider.
  I tried positioning with CSS:</p>
  
  <pre><code>.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;
  }
  </code></pre>
  
  <p>But the arrows won't display because of the swiper-container CSS overflow: hidden;</p>
  
  <p>So I tried moving the nav arrows outside the swiper-container, now they display but they effect all the Swipers in the page.</p>
  
  <p>My Swiper is configured like this:</p>
  
  <pre><code>initialize swiper 
      */
      var mySwiper = new Swiper ('.swiper-container', {
        // Optional parameters
          nextButton: '.swiper-button-next',
          prevButton: '.swiper-button-prev',
          slidesPerView: 2,
          spaceBetween: 30,
          loop: true
      });
  </code></pre>
  
  <p>Any ideas? </p>