vue中允许你继续使用swiper的组件 vue-awesome-swiper---切图网
2020-03-04 23:21
1166 查看
swiper是一个在切图中好用到不行的图片轮播插件,包括3d轮播、h5滑屏等复杂应用都不在话下,到了vue项目一切逻辑完全颠覆了,没有获取dom的概念,还好有 vue-awesome-swiper组件,让我们可以无缝的继续使用swiper。如果没记错的话vue-awesome-swiper基于swiper3.x 开发得来。
1.npm安装
npm install vue-awesome-swiper –save
2.main.js全局安装
import Vue from 'vue' import VueAwesomeSwiper from 'vue-awesome-swiper' // require styles import 'swiper/dist/css/swiper.css' Vue.use(VueAwesomeSwiper, /* { default global options } */)
3.组件里调用
import 'swiper/dist/css/swiper.css' import { swiper, swiperSlide } from 'vue-awesome-swiper' export default { components: { swiper, swiperSlide } }
4、缩略图(普通的swiper很简单,网上有很多可以借鉴 我备注一下缩略图的)
template中
<div class="swiper-box" style="height: 500px"> <!-- swiper1 --> <swiper :options="swiperOptionTop" class="gallery-top" ref="swiperTop"> <swiper-slide class="slide-1"></swiper-slide> <swiper-slide class="slide-2"></swiper-slide> <swiper-slide class="slide-3"></swiper-slide> <swiper-slide class="slide-4"></swiper-slide> <swiper-slide class="slide-5"></swiper-slide> <div class="swiper-button-next swiper-button-white" slot="button-next"></div> <div class="swiper-button-prev swiper-button-white" slot="button-prev"></div> </swiper> <!-- swiper2 Thumbs --> <swiper :options="swiperOptionThumbs" class="gallery-thumbs" ref="swiperThumbs"> <swiper-slide class="slide-1"></swiper-slide> <swiper-slide class="slide-2"></swiper-slide> <swiper-slide class="slide-3"></swiper-slide> <swiper-slide class="slide-4"></swiper-slide> <swiper-slide class="slide-5"></swiper-slide> </swiper> </div>
data中定义
data() { return { swiperOptionTop: { spaceBetween: 10, navigation: { nextEl: '.swiper-button-next', prevEl: '.swiper-button-prev' } }, swiperOptionThumbs: { spaceBetween: 10, centeredSlides: true, slidesPerView: 'auto', touchRatio: 0.2, slideToClickedSlide: true } } },
mounted中
mounted() { this.$nextTick(() => { const swiperTop = this.$refs.swiperTop.swiper const swiperThumbs = this.$refs.swiperThumbs.swiper swiperTop.controller.control = swiperThumbs swiperThumbs.controller.control = swiperTop }) }
style部分
<style lang="scss" scoped> .swiper-container { background-color: #000; } .swiper-slide { background-size: cover; background-position: center; &.slide-1 { background-image:url('/static/images/surmon-1.jpg'); } &.slide-2 { background-image:url('/static/images/surmon-6.jpg'); } &.slide-3 { background-image:url('/static/images/surmon-8.jpg'); } &.slide-4 { background-image:url('/static/images/surmon-9.jpg'); } &.slide-5 { background-image:url('/static/images/surmon-10.jpg'); } } .gallery-top { height: 80%!important; width: 100%; } .gallery-thumbs { height: 20%!important; box-sizing: border-box; padding: 10px 0; } .gallery-thumbs .swiper-slide { width: 25%; height: 100%; opacity: 0.4; } .gallery-thumbs .swiper-slide-active { opacity: 1; } </style>
- 点赞
- 收藏
- 分享
- 文章举报
相关文章推荐
- 在vue-cli的组件模板里使用font-awesome的两种方法
- VueAwesomeSwiper在VUE中的使用以及遇到的一些问题
- 使用vue-awesome-swiper滑块插件
- vue中使用轮播图 vue-awesome-swiper
- vue-awesome-swiper的使用
- vue-cli中轮播图vue-awesome-swiper使用方法
- vue轮播图插件vue-awesome-swiper的使用
- vue-awesome-swiper 的使用
- vue2.0使用swiper组件实现轮播
- vue2.0使用swiper组件实现轮播的示例代码
- vue轮播图插件vue-awesome-swiper的引入及使用
- Vue如何使用vue-awesome-swiper实现轮播效果
- vue 中使用swiper 【vue-awesome-swiper】无限循环加自动播放时loop属性无效
- Vue中怎样使用swiper组件?
- vue-awesome-swiper滑块插件使用方法详解
- 在vue-cli的组件模板里使用font-awesome的两种方法
- vue-13-swiper组件的使用
- 使用vue-awesome-swiper滑块插件
- Vue-Awesome-Swiper(Vue使用Swiper)
- vue2.0使用swiper组件实现轮播效果