How can I place controls outside of the swipable area?

@surmon-china could you add an example of the swiper with arrows outside of the swipable area and how can that be achieved with the current swiper architecture? I would like to get this look https://take.ms/YC1Zw Right now swiper class get overflow-hidden by default that means that controls will cut off if a negative margin is applied. Please, help me understand how to work around this issue?

[surmon-china]

@AndrewBogdanovTSS

1. remove navigation option from swiperOptions
2. remove navigation slot element
3. custom element and bind event to control the swiper

e.g.

<div class="container">
  <swiper ref="swiper">
    <swiper-slide>Slide 1</swiper-slide>
  </swiper>
  <div class="navigation">
    <button @click="prev">Prev</button>
    <button @click="next">Next</button>
  </div>
</div>

prev() {
  this.$refs.swiper.$swiper.slidePrev()
},
next() {
  this.$refs.swiper.$swiper.slideNext()
}

[AndrewBogdanovTSS]

@johnyluyte yeah, I also end up with similar solution. But the problem with it is that it’s not universal and always requires to pass that customClassName for every swiper instance which is very inconvenient and counter intuitive so I would rather call it a hack rather than something that can be accepted as a proper fix