Vue-awesome-swiper: 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.

[arpagrawal]

中文用户注意：

1. 尽量用英文描述你的 issue
2. 不要把内容堆彻在标题上，逻辑清晰地写在内容区
3. 贴代码要提前格式化好，有颜色高亮那种，贴文本，不要贴图片
4. 提问题前，必须仔细阅读 REMADE.md + 在已关闭的问题中寻找与自身相关的问题，90% 的可能它已经被解决
5. 如果无法做到提一个合格、优秀的问题，则问题会被 close + block

BUG REPORT TEMPLATE

Vue.js version and component version

Reproduction Link

• A minimal JSBin, JSFiddle, Codepen, or a GitHub repository that can reproduce the bug.
• You could start with this template: https://jsfiddle.net/39epgLj0/

Steps to reproduce

What is Expected?

What is actually happening?

[r1chm8]

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;
    }
}

[AndrewBogdanovTSS]

Yeah, basically I did the same by wrapping a swiper into an additional outer wrapper like so:

<template>
<div class="swiper-outer-wrapper">
        <div class="swiper" v-swiper:mySwiper="swiperOptions">
            <div class="swiper-wrapper">

                <div class="swiper-slide" :class="itemClass" v-for="(item,index) in items">
                    <img :src="item.image_url">
                </div>
            </div>
            <div class="swiper-pagination"></div>
        </div>
        <div class="swiper-button-prev">
            <button
                    class="swiper-button-default"
                    @click.stop.prevent="slidePrev"
                    aria-label="Previous"
                    type="button"
                    title="Previous">
                <icon class="icon-arrow" name="arrows/arrow-right-md" dir="down" :original="true"></icon>
            </button>
        </div>
        <div class="swiper-button-next">
            <button
                    class="swiper-button-default"
                    aria-label="Next"
                    @click.stop.prevent="slideNext"
                    type="button"
                    title="Next">
                <icon class="icon-arrow" name="arrows/arrow-right-md" :original="true"></icon>
            </button>
        </div>
    </div>
</template>

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

[AndrewBogdanovTSS]

I wasn't able to pull pagination out that easily though

[Bobur-kobilov]

@AndrewBogdanovTSS Hello, Can you explain how u achieved to use controls outside of swiper please?

[AndrewBogdanovTSS]

@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

[Bobur-kobilov]

thank you! i solved it