vue3 轮播图的实现

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

想实现的效果

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

安装

swiper的安装是比较简单的。

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

英文官网: swiperjs.com/

css 复制代码
npm i swiper

使用

接下来就是swiper的使用了,swiper的使用非常简单。可查看官网例子
codesandbox.io/p/sandbox/2...

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

xml 复制代码
<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

javascript 复制代码
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编写)

scss 复制代码
.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};
      }
    }
  }
}

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

相关推荐
渣渣盟2 分钟前
探索Word2Vec:从文本向量化到中文语料处理
前端·javascript·python·文本向量化
Pu_Nine_93 分钟前
Vue 3 + TypeScript 项目性能优化全链路实战:从 2.1MB 到 130KB 的蜕变
前端·vue.js·性能优化·typescript·1024程序员节
云枫晖20 分钟前
Webpack系列-Loader
前端·webpack
aggression23 分钟前
代码敲击乐:让你了解前端的动静结合和移动端的适配性
前端
yinuo24 分钟前
深入理解与实战 Git Submodule
前端
骑自行车的码农24 分钟前
React 事件收集函数
前端·react.js
一个处女座的程序猿O(∩_∩)O28 分钟前
Vue CLI 插件开发完全指南:从原理到实战
前端·javascript·vue.js
小蜜蜂dry33 分钟前
JavaScript 原型
前端·javascript
用户904438163246043 分钟前
前端也能玩 AI?用 brain.js 在浏览器里训个 "前后端分类大师",后端同事看了都沉默!
前端
祈祷苍天赐我java之术44 分钟前
什么是Nginx?:掌握高性能 Web 服务器核心技术
服务器·前端·nginx