将轮播/导航箭头放在 vue-awesome-slider 之外答案

【问题标题】：Place carousel/navigation arrows outside the vue-awesome-slider将轮播/导航箭头放在 vue-awesome-slider 之外
【发布时间】：2018-07-07 13:13:32
【问题描述】：

我正在使用 Vue-awesome-slider 作为轮播库，并希望将滑动箭头放置在轮播主体之外。但由于 carousel 容器已溢出隐藏，我无法将其放置在 carousel 之外。

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

【问题讨论】：

我知道现在回答这个问题为时已晚。但是我在搜索时放置了答案并且找不到解决方案。作为我所做的研究，我在下面添加了我的答案

标签： vue.js carousel swiper

【解决方案1】：

只需添加到 swiperOptions navigation: { nextEl: '.swiper-button-prev', prevEl: '.swiper-button-next', }

【讨论】：

【解决方案2】：

只需将按钮元素移到 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>

【讨论】：

你试过这个吗？这不起作用，请确保在发布之前先尝试解决方案