swiper + vue 中间大两边小轮播图

展示效果

代码

字体16px 框架vuetify

<template><v-main><div class="body_height ofs"><div style="overflow: hidden;"><div style="margin: 0 0.7rem 2rem;"><!-- 轮播 --><div style=""><swiper :options="swiperOption" ref="mySwiper" @swiper="onSwiper"@slideChange="onSlideChange(swiper)" v-if="pics.length"><swiper-slide v-for="(slide, i) in pics"><img :src="slide" height="10rem" style="height: 10rem;"></swiper-slide></swiper></div></div></div></div></v-main>
</template><script>// 引入插件import {swiper,swiperSlide} from "vue-awesome-swiper";import "swiper/css/swiper.css";export default {components: {swiper,swiperSlide,},data() {return {swiperOption: {loop: true,autoplay: true,observer: true, //修改swiper自己或子元素时，自动初始化swiperobserveParents: true, //修改swiper的父元素时，自动初始化swiper slidesPerView: "auto",centeredSlides: true,// 显示分页pagination: {el: ".swiper-pagination",clickable: true //允许分页点击跳转},// 设置点击箭头navigation: {nextEl: ".swiper-button-next",prevEl: ".swiper-button-prev"},on: {init: function(swiper) {//Swiper初始化了// alert('当前的slide序号是'+this.activeIndex);//或者swiper.activeIndex，swiper与this都可指代当前swiper实例/* this.emit('transitionEnd');//在初始化时触发一次transitionEnd事件，需要先设置transitionEnd */console.log("初始化", this.ind)},},},pics: [require("../../images/banner1.png"),require("../../images/banner2.png"),require("../../images/banner3.png"),require("../../images/banner4.png")],}},created() {},computed: {swiper() {return this.$refs.mySwiper.swiper;},},methods: {goBack() {this.$router.go(-1)},onSwiper(swiper) {console.log("swiper");},onSlideChange(e) {console.log("执行暂停播放", e.activeIndex, e.previousIndex)},}}
</script><style scoped>.swiper-container {width: 100%;height: 10rem;overflow: visible !important;}.swiper-container .swiper-wrapper .swiper-slide {width: 100%;border-radius: 0.5rem;}.swiper-container .swiper-wrapper .swiper-slide img {width: 100%;height: 10rem;border-radius: 0.5rem;}.swiper-container .swiper-wrapper .swiper-slide-prev {margin-top: 0.5rem;height: 9rem !important;}.swiper-container .swiper-wrapper .swiper-slide-prev img {height: 9rem !important;}.swiper-container .swiper-wrapper .swiper-slide-next {margin-top: 0.5rem;height: 9rem !important;}.swiper-container .swiper-wrapper .swiper-slide-next img {height: 9rem !important;}.swiper-container .swiper-wrapper .swiper-slide-active {width: 100%;}.swiper-pagination {bottom: -30px !important;}.swiper-pagination .swiper-pagination-bullet {width: 12px;height: 12px;background: #ff1e1e;}.swiper-pagination .swiper-pagination-bullet-active {width: 21px;height: 12px;background: #e75230;border-radius: 6px;}
</style>

swiper + vue 中间大两边小轮播图相关推荐

html中间大两边小轮播代码,vue使用swiper实现中间大两边小的轮播图效果
项目中使用的vue,刚好有需求要实现轮播图,突出显示当前图片,两边展示其他图片:通过查各种资料,实现了,故在此记录下来下面我们来看下实现步骤: 第一步:首先在项目index.html中引入swipe ...
Vue —— mockjs 模拟数据、轮播图插件 Swiper
mockjs 的使用项目安装 mockjs : cnpm install mockjs 使用步骤 (1)在项目 src 下创建 mock 文件夹. (2)mock 文件夹准备相应的 JSON 数据文 ...
swiper怎么在HTML引入JS文件,Swiper.js插件超简单实现轮播图
Swiper是纯javascript打造的滑动特效插件,面向手机.平板电脑等移动终端.能实现触屏焦点图.触屏Tab切换.触屏多图切换等常用效果.超好用话不多说,直接上教程 1.首先加载插件,需要用到 ...
Vue 组件封装之 Carousel 轮播图
Vue 组件封装之 Carousel 轮播图一.Carousel 轮播图组件二.使用案例三.API 使用指南四.源代码一.Carousel 轮播图组件组件说明: 实现无缝轮播. 效果展示: ...
学习使用vue实现一个简单的轮播图
目录关于template外壳: 关于图片的自动切换的处理: 为什么要把第一张图片外的 li 克隆一份放到 li 列表的最后: 函数节流处理 : 关于template外壳: 创建一个div,用于内容的 ...
VUE如何快速做一个轮播图
1. 第三方插件 https://github.com/surmon-china/vue-awesome-swiper npm install swiper vue-awesome-swiper -- ...
vue后台系统管理项目-商城轮播图管理功能
商城轮播图管理功能功能介绍: 1.轮播图列表分页功能: 2.轮播图添加功能: 3.轮播图编辑功能: 4.轮播图删除功能: 5.轮播图启用禁用功能: 6.轮播图获取排序号功能: 7.轮播图查看详情功能 ...
微信小程序实现非swiper组件的自定义伪3D轮播图
效果如下: 我用了很笨的方法实现的,大致就是: 1.当前点击的div(view)如果前后都有内容,那么,当前div(view)就设置到中间,前一个就设置到左边,前一个的前面所有全部设置到最左边,后面一 ...
angular引用swiper插件绘制中间大两边依次缩小的轮播图
初步使用安装前人栽树后人乘凉,已经有大佬们封装好了. npm install swiper npm install @types/swiper 使用在需要应用的模块中引入SwiperModule ...

swiper + vue 中间大两边小轮播图

展示效果

代码

swiper + vue 中间大两边小轮播图相关推荐

最新文章

热门文章