Place carousel arrows outside in vue-awesome-slider

Question

I'm using Vue-awesome-slider as a carousel library and wanted to place swipe arrows outside the carousel body. But since the carousel container has overflow-hidden, i'm not able to place it outside the carousel.

https://github.com/surmon-china/vue-awesome-swiper

Answer 1

Just move the buttons elements outside the swiper-container.

<div>
  <swiper :options="swiperOption">
    <swiper-slide>I'm Slide 1</swiper-slide>
    <swiper-slide>I'm Slide 2</swiper-slide>
    <swiper-slide>I'm Slide 3</swiper-slide>
    <swiper-slide>I'm Slide 4</swiper-slide>
  </swiper>
  <div class="swiper-button-prev" slot="button-prev"></div>
  <div class="swiper-button-next" slot="button-next"></div>
</div>