最近开发过程中，有一些轮播图的需求，虽然公司的组件库已经有swiper的组件，但是功能不全，很多效果实现不了，于是经过翻找swiper的官网，发现你想要的样式都有，下面来说一下swiper的简单使用。

想实现的效果

点击prev和next可实现图片的切换

安装

swiper的安装是比较简单的。

中文官网：http://www.swiper.com.cn/index.html

英文官网: swiperjs.com/

npm i swiper

使用

接下来就是swiper的使用了，swiper的使用非常简单。可查看官网例子

codesandbox.io/p/sandbox/2…


例子有归有，使用简单归简单，但是实现的样式和自己想要的差距还是很大，查了一波资料，现将代码放出，哈哈。

html

<swiper
:navigation="{

    nextEl: '.swiper-button-next1',

    prevEl: '.swiper-button-prev1'

  }"
:modules="modules"
class="mySwiper"
:slides-per-view="3"

>
<swiper-slide>
<img src="图片地址" alt="" />
</swiper-slide>
<swiper-slide>
<img src="图片地址" alt="" />
</swiper-slide>
<swiper-slide>
<img src="图片地址" alt="" />
</swiper-slide>
<swiper-slide>
<img src="图片地址" alt="" />
</swiper-slide>
<swiper-slide>
<img src="图片地址" alt="" />
</swiper-slide>
<swiper-slide>
<img src="图片地址" alt="" />
</swiper-slide>
<swiper-slide>
<img src="图片地址" alt="" />
</swiper-slide>
<swiper-slide>
<img src="图片地址" alt="" />
</swiper-slide>
<div class="swiper-button-prev-one" slot="button-prev">
<Button>
</Button>
</div>
<div class="swiper-button-next-one" slot="button-next">
<Button>
</Button>
</div>
</swiper>

通过navigation来控制轮播图的上一页，下一页，通过slides-per-view来控制每页显示几张图片。
js

import { Swiper, SwiperSlide, navigationPrev } from 'swiper/vue'
import 'swiper/css'
import 'swiper/css/navigation'
import { Navigation } from 'swiper/modules'
const modules = [Navigation]

js部分也是毕竟简单的，把该引入的文件引入即可。这样难道就实现效果了吗，当然不是，还需要改css样式

css(css部分部分采用tailwindcss编写)

.mySwiper {
@apply pb-2xl;
.swiper-button-prev-one {
@apply text-[#333] absolute text-[.875rem] left-0 bottom-0 cursor-pointer;

    :deep(.m-button) {
@apply w-6 h-6;

span {
@apply text-sm #{!important};

      }

    }

  }
.swiper-button-next-one {
@apply text-[#333] absolute text-[.875rem] left-[2.5rem] bottom-0 cursor-pointer;

    :deep(.m-button) {
@apply w-6 h-6 bg-[#000] text-[#fff];
span {
@apply text-sm #{!important};

      }

    }

  }

}

至此轮播图的效果就实现了，在做轮播图的需求时，需要仔细认真地查看文档，我是比较喜欢看英文文档，我觉得讲述比较全，大家学习的时候自行选择即可。