vue 卡片轮播中间大两边小复制代码就可使用

vue开发中遇到类似原生这种卡片轮播，中间大两边小的需求

网上搜了下，很多都是修改前一个和后一个的高度，然后设置了margin-top，但个人感觉这样病不能保证很好的居中，在研究了官网的demo后，发现https://www.swiper.com.cn/demo/240-effect-coverflow.html这个很好，可以实现需求，而且比网上那种那更好些。

1.安装swiper

cnpm install --save-dev swiper@3.4.2 （此处注意不要使用npm install swiper，安装4.x的版本会在ie和某些手机的浏览器显示白屏）

2.页面的代码

<template>

<div class="swiper-container">

<div class="swiper-wrapper">

<div class="swiper-slide" v-for="(item,index) in images" :key="index">

<img class="swiper-img" :src="item" />

</div>

</div>

</div>

</template>

<script>

import Swiper from "swiper"

import 'swiper/dist/css/swiper.min.css'

export default {

data() {

return {

images: [

require('../../../static/image/sunshine/banner1.png'),

require('../../../static/image/sunshine/banner2.png'),

require('../../../static/image/sunshine/banner3.png'),

require('../../../static/image/sunshine/banner4.png'),

require('../../../static/image/sunshine/banner5.png'),

require('../../../static/image/sunshine/banner6.png'),

require('../../../static/image/sunshine/banner7.png')

],

}

},

methods: {

},

mounted() {

var swiper = new Swiper('.swiper-container', {

effect: 'coverflow',

loop: true,

grabCursor: true,

centeredSlides: true,

slidesPerView: 'auto',

autoplay: 3000,

autoplayDisableOnInteraction:false,

coverflow: {

rotate: 10,

stretch: 0,

depth: 100,

modifier: 1,

slideShadows: false,

},

spaceBetween: 30,

});

},

}

</script>

<style lang="scss">

.swiper-container {

background-color: rgb(58, 138, 251);

z-index: 0;

width: 100%;

padding-top: 10px;

padding-bottom: 15px;

.swiper-slide {

background-position: center;

background-size: cover;

width: 80%;

.swiper-img {

border-radius: 10px;

width: 100%;

}

}

}

</style>

vue 卡片轮播中间大两边小复制代码就可使用相关推荐

微信小程序轮播中间大两边小
wxml: <view class="swiper"><swiper autoplay="{{autoplay}}& ...
html中间大两边小轮播代码,vue使用swiper实现中间大两边小的轮播图效果
项目中使用的vue,刚好有需求要实现轮播图,突出显示当前图片,两边展示其他图片:通过查各种资料,实现了,故在此记录下来下面我们来看下实现步骤: 第一步:首先在项目index.html中引入swipe ...
uniapp实现轮播中间大两头小
这个效果我搞了整整两天时间,这个事情是uniapp的current和active-class使用时好像没有变化,不知道是它们有问题还是我使用的不对. 直接贴代码下面展示一些内联代码片. html ...
html实现轮播图--小圆圈呈中间大两边小的样式
这个轮播图的样式是参照奔驰官网的,原始效果图大概是这样轮播图下面的小圆圈呈现出中间大,两边小的效果.先来看看最终的成品: 分析:假设按照奔驰官网的一样,轮播的图片有6张.明显可以看出,每个大圆的一侧 ...
ios中间大,两边小的轮播图
首先上图 , 中间大,两边小的轮播图 ,git地址 : https://github.com/guochaoshun/LunBoTu 主要参考代码 : https://github.com/orzzh ...
js实现轮播图(点击小图片切换大图片+自动切换)
js实现轮播图(点击小图片切换大图片+自动切换) 实现效果如下: 点击小图切换大图和轮播标题,点击左右按钮大小图和轮播标题切换,鼠标进入清除定时器,鼠标移出恢复轮播 html代码如下: <div ...
php 走马灯轮播,Vue.js轮播图走马灯代码实例（全）
这个是html, 数据中我用了一个数组来放图片的目录, data() { return { superurl: [ { url: '', img: '../../../../static/image/ ...
3d饼图 vue_这是我见过最优雅的Vue图片轮播插件——Vue-Awesome-Swiper
介绍在Web网页开发中,我们经常需要用到图片轮播,在以往传统的开发方式中有很多基于jquery的插件可供使用,但是随着目前各类前端框架层出不穷的现状,在某些方面特别是针对特定的场景,还是有不少地方不 ...
Vue实现轮播的方法
Vue实现轮播的方法 1.定义图片数组 2.添加图片索引 3.绑定src属性(v-bind) 4.图片切换逻辑 html代码如下: <!DOCTYPE html> <html lan ...

vue 卡片轮播中间大两边小复制代码就可使用

vue 卡片轮播中间大两边小复制代码就可使用相关推荐

最新文章

热门文章

vue 卡片轮播 中间大两边小 复制代码就可使用

vue 卡片轮播 中间大两边小 复制代码就可使用相关推荐

最新文章

热门文章

vue 卡片轮播中间大两边小复制代码就可使用

vue 卡片轮播中间大两边小复制代码就可使用相关推荐