今天在使用 swiper 時，遇到一個 坑爹的 問題。

swiper 組件的本來樣式長這樣：

左右切換的按鈕在滑動容器內部，但是我們想要它跑到容器外面去。

網上找了一堆方法都不好使
也不知道是不是因為 我使用的是 高版本原因

最終實驗結果：

給swiper組件外面包上一層div、并設置其 position: relative; padding: 0 50px; 樣式，再去除 swiper-container 本身 position，就可以了。

代碼：

我保證，這是最簡單的方法，網上包括官網說的各種方法都比較麻煩，還不好用！！！！！

總結

以上是生活随笔為你收集整理的vue3中 使用 swiper 插件，自定义切换按钮， 将 前进后退 、左右切换 按钮放到容器外部的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。