vue專案中如何使用使用swiper
阿新 • • 發佈:2022-05-16
一、在vue專案中安裝swiper
cnpm install [email protected] -S
cnpm install [email protected] -S
二、在main.js中引入swiper.css
import 'swiper/css/swiper.css'
三、在元件中使用
1、引入必要的元件
import { swiper, swiperSlide } from "vue-awesome-swiper";
2、註冊子元件
components: {
swiper,
swiperSlide
}
3、結構新增
data() { return{ swiperOptions: { loop: true, speed: 2000, autoplay: { delay: 3000, stopOnLastSlide: false, disableOnInteraction: false, }, // 顯示分頁 pagination: { el: ".swiper-pagination", clickable: true, //允許分頁點選跳轉 },// 設定點選箭頭 navigation: { nextEl: ".swiper-button-next", prevEl: ".swiper-button-prev", }, // 修改預設點選左右箭頭樣式 // navigation: { // nextEl: ".swiper-button-next", //prevEl: ".swiper-button-prev", //}, }, }; },
4、template 中使用
①template 箭頭放到輪播圖內
<template> <div class="wrapper"> <swiper ref="mySwiper" v-bind:options="swiperOptions"> <swiper-slide v-for="(item, index) in 5" v-bind:key="index"> {{item}} </swiper-slide> <div class="swiper-pagination" slot="pagination"></div> <div class="swiper-button-prev" slot="button-prev"></div> <div class="swiper-button-next" slot="button-next"></div> </swiper> </div> </template>
②template 箭頭放到輪播圖外
<template> <div class="wrapper"> <swiper ref="mySwiper" v-bind:options="swiperOptions"> <swiper-slide v-for="(item, index) in 5" v-bind:key="index"> {{item}} </swiper-slide> <div class="swiper-pagination" slot="pagination"></div> </swiper> <div class="swiper-button-prev swiper-button-prevsp" slot="button-prev"></div> <div class="swiper-button-next swiper-button-nextsp" slot="button-next"></div> </div> </template>
5、修改預設樣式
.swiper-container { background: #f00; } .swiper-slide { height: 180px; } // 若是修改預設樣式,以下內容必須填寫 .wrapper{ position: relative; } .wrapper .swiper-button-nextsp, .wrapper .swiper-button-prevsp { position: absolute; width: 40px; height: 40px; display: inline-block; text-align: center; line-height: 40px; cursor: pointer; z-index: 22222; } .wrapper .swiper-button-prevsp { background: url("~@/assets/images/left.png") no-repeat center center; left: 0; top: 50%; transform: translateY(-50%); } .wrapper .swiper-button-prevsp::after,.wrapper .swiper-button-nextsp::after{ content: ''; } .wrapper .swiper-button-prevsp:hover { background: url("~@/assets/images/leftCur.png") no-repeat center center; } .wrapper .swiper-button-nextsp { background: url("~@/assets/images/right.png") no-repeat center center; right: 0; top: 50%; transform: translateY(-50%); } .wrapper .swiper-button-nextsp:hover { background: url("~@/assets/images/rightCur.png") no-repeat center center; }
大功告成!