vue使用swiper vue-awesome-swiper记录
作者:互联网
1.安装swiper(默认安装最新版本)
npm i swiper
2.安装vue-awesome-swiper(这里需要指定版本---有坑)
npm install swiper vue-awesome-swiper@3.1.3 --save
3.页面使用
<template> <div class="productIntroduce"> <div class="recommendPage"> <swiper :options="swiperOption" ref="mySwiper"> <swiper-slide class="swiper-slide" v-for="(item,index) in arr1" :key="index"> <img :src="item.img_url"/> </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> </div> </template> <script> import { swiper, swiperSlide } from "vue-awesome-swiper"; import 'swiper/swiper-bundle.css'; export default { name: 'productIntroduce', components: { swiper, swiperSlide }, data () { return { arr1: [ { img_url: require("@/assets/about/culture1.png") }, { img_url: require("@/assets/about/culture1.png") }, { img_url: require("@/assets/about/culture1.png") }, { img_url: require("@/assets/about/culture1.png") }, { img_url: require("@/assets/about/culture1.png") } ], swiperOption: { slidesPerView: 5, loop: true, autoplay: { delay: 3000, stopOnLastSlide: false, disableOnInteraction: false }, // 显示分页 // pagination: { // el: ".swiper-pagination", // clickable: true //允许分页点击跳转 // }, // 设置点击箭头 navigation: { nextEl: ".swiper-button-next", prevEl: ".swiper-button-prev" } } } }, mounted () { }, methods: { } } </script> <style lang="scss" scoped> .recommendPage { position: relative; width: 100vw; margin-bottom: 50px; } .swiper-container .swiper-slide{ width: 100%; }</style>
爬坑推荐博客:
1.https://blog.csdn.net/u012570307/article/details/107203851
2.https://blog.csdn.net/qq_36877078/article/details/116640842
3.https://blog.csdn.net/Decade0712/article/details/107949760
标签:about,vue,img,awesome,swiper,require,png 来源: https://www.cnblogs.com/Strangers/p/15675002.html