-
安装
npm i swiper
-
按官方使用用来引入(官方的引用路径终于正确了)
<template> <swiper // 页面中一次显示几个图片 :slides-per-view="3" // 轮播图之间的间距 :space-between="50" @swiper="onSwiper" @slideChange="onSlideChange" > <swiper-slide>Slide 1</swiper-slide> <swiper-slide>Slide 2</swiper-slide> <swiper-slide>Slide 3</swiper-slide> ... </swiper> </template> <script> // Import Swiper Vue.js components import { Swiper, SwiperSlide } from 'swiper/vue'; // Import Swiper styles import 'swiper/css'; export default { components: { Swiper, SwiperSlide, }, setup() { const onSwiper = (swiper) => { console.log(swiper); }; const onSlideChange = () => { console.log('slide change'); }; return { onSwiper, onSlideChange, }; }, }; </script>
-
个性化设置
-
五步走
- 引入模块
- 引入样式
- 返回模块
- 在swiper标签添加模块属性
- 在swiper标签设置样式属性(一些简单的)
<template> <div class="container_header"> <header class="header" id="HOME"> <swiper // 在swiper标签添加模块属性 :modules="modules" // 垂直方向轮播 注意一定要有两对引号包裹 // :direction="'vertical'" :slides-per-view="1" // 滑动速度 :speed="1200" // 开启循环 :loop="true" // 轮播图之间的间距 :space-between="0" @swiper="onSwiper" @slideChange="onSlideChange" // 设置自动播放样式属性 :autoplay="{ delay: 3000, disableOnInteraction: false }" // 设置淡出样式效果 effect="fade" > <swiper-slide> <img src="@/assets/background.webp" alt="" /> </swiper-slide> <swiper-slide> <img src="@/assets/background_two.webp" alt="" /> </swiper-slide> <swiper-slide> <img src="@/assets/background_three.webp" alt="" /> </swiper-slide> </swiper> </header> </div> </template> <script> // 引入想要效果模块 import { Autoplay, EffectFade } from 'swiper' import { Swiper, SwiperSlide } from 'swiper/vue' // 引入样式 import 'swiper/css' import 'swiper/css/autoplay' import 'swiper/css/effect-fade' // 嫌麻烦,直接引入了所有 Swiper 样式,包括所有模块样式 // import 'swiper/css/bundle' export default { components: { Swiper, SwiperSlide, }, setup() { const onSwiper = (swiper) => {} const onSlideChange = () => {} return { onSwiper, onSlideChange, // 返回模块 modules: [Autoplay, EffectFade], } }, } </script>
-
-
组件样式修改:
-
因为vue为了不让单页的样式污染全局,通常会在style标签加上scoped,这就导致了我们无法替换掉组件的样式,我们可以用
::v-deep
把样式抛出去替换到全局的,例如我们要把swiper的pagination页面小圆点改成白色。<style scoped> .swiper-slide { height: 300px; line-height: 300px; font-size: 30px; text-align: center; background-color: pink; } .swiper::v-deep .swiper-pagination .swiper-pagination-bullet { background: rgb(255, 255, 255); } .swiper::v-deep .swiper-pagination .swiper-pagination-bullet-active { background: rgb(255, 255, 255); } </style>
-
用预处理器例如sass可以用
:deep()
<style lang="scss" scoped> .swiper:deep() { .swiper-slide { height: 300px; line-height: 300px; font-size: 30px; text-align: center; background-color: pink; } .swiper-pagination { .swiper-pagination-bullet { background: rgb(255, 255, 255); } .swiper-pagination-bullet-active { background: rgb(255, 255, 255); } } } </style>
-