-
-
Notifications
You must be signed in to change notification settings - Fork 2k
Is there any way I can place arrows outside the slider. I want to place it on extreme left and extreme right on the page. #371
Comments
This is best way I have found of achieving what you're looking for is with the follow code: In my template <swiper ref="swiper">
<swiper-slide></swiper-slide>
<swiper-slide></swiper-slide>
</swiper>
<a class="swiper-navigation is-previous" @click="swiper.slidePrev()"></a>
<a class="swiper-navigation is-next" @click="swiper.slideNext()"></a> And then in my javascript computed: {
swiper() {
return this.$refs.swiper.swiper;
}
} |
Yeah, basically I did the same by wrapping a swiper into an additional outer wrapper like so:
and then I'm just triggering those slider functions from my methods object. I can't understand why this additional wrapepr is not there by default. Having controls outside the slider itself is very common and cutting it with overflow feels counter-intuitive to me |
I wasn't able to pull pagination out that easily though |
@AndrewBogdanovTSS Hello, Can you explain how u achieved to use controls outside of swiper please? |
@Bobur-kobilov actually I've already explained above. The only thing that can't be pulled out that easily is pagination since it's generated by slider itself but you can override that option by creating your own. A bit tidious, but it'll work |
thank you! i solved it |
@AndrewBogdanovTSS hello, can you put your code for achieved to use controls outside of swiper please? because when use above code, slider and navigation button not show inline |
中文用户注意:
BUG REPORT TEMPLATE
Vue.js version and component version
Reproduction Link
Steps to reproduce
What is Expected?
What is actually happening?
The text was updated successfully, but these errors were encountered: