vue轮播图中间大两头小
<template>
<div v-if="items.length" class="full-page-slide-wrapper">
<swiper :options="swiperOption" ref="mySwiper">
<!-- slides -->
<template v-for="item in items">
<swiper-slide v-if="item.bannerImageUrl" :key="item.pid">
<img @click="toTopic(item)" :src="item.bannerImageUrl" alt>
</swiper-slide>
</template>
<div class="swiper-pagination" slot="pagination"></div>
</swiper>
</div>
</template>
<script type="text/ecmascript-6">
import 'swiper/dist/css/swiper.css'
import { swiper, swiperSlide } from 'vue-awesome-swiper'
import { getFirstConfig } from '@/services/main.service'
const COMPONENT_NAME = 'pull-page-slide'
export default {
name: COMPONENT_NAME,
data () {
return {
items: [],
defaultIndex: 0,
swiperOption: {
direction: 'horizontal',
loop: true,
autoplay: 5000,
slidesPerView: 'auto',
centeredSlides: true,
spaceBetween: 10,
// 如果需要分页器
pagination: {
el: '.swiper-pagination',
bulletActiveClass: 'slide_dot_active',
bulletClass: 'slide_dot'
}
}
}
},
mounted () {
this.getConfig()
},
components: {
swiper,
swiperSlide
},
methods: {
handleClick () {
},
toTopic (item) {
if (item.topicId) {
this.$router.push({ name: 'topic.detail', params: { id: item.topicId } })
}
},
async getConfig () {
let { datas } = await getFirstConfig().catch(e => console.error(e))
this.items = datas
}
}
}
</script>
<style lang="scss">
.full-page-slide-wrapper {
width: 100%;
height: 140px;
background: white;
box-sizing: content-box;
padding-top: 15px;
margin-top: 10px;
position: relative;
overflow: hidden;
.swiper-container {
width: 100%;
height: 100%;
.swiper-wrapper {
display: flex;
align-items: center;
}
.swiper-slide {
width: calc(100% - 50px);
border-radius: 5px;
}
.swiper-slide-prev {
height: 90% !important;
}
.swiper-slide-next {
height: 90% !important;
}
}
img {
object-fit: fill;
height: 100%;
width: 100%;
border-radius: 5px;
}
.slide_dot {
display: inline-block;
margin: 5px;
width: 3px;
height: 3px;
background-color: #f2f2f2;
border-radius: 50%;
opacity: 0.5;
}
.swiper-pagination {
bottom: 0;
}
.slide_dot_active {
display: inline-block;
width: 7px;
height: 3px;
border-radius: 5px;
background: white;
opacity: 1;
}
}
</style>
图例
vue轮播图中间大两头小的更多相关文章
- vue轮播图插件之vue-awesome-swiper
移动端轮播图插件,在使用iview图形界面插件中的carousel组件无法实现触摸滑动后,转而使用vue-awesome-swiper插件 1.npm安装 npm i vue-awesome-swip ...
- vue轮播图插件vue-awesome-swiper的使用与组件化
不管是APP还是移动端网页开发,轮播图在大部分项目当中都是存在的,这时候如果用vue开发项目,选择一款好的插件并且封装好是很重要的 1. 推荐使用vue-awesome-swiper 安装:cnpm ...
- vue轮播图
vue开发中遇到这样一个需求实现导航栏和中间内容相结合实现页面滑动导航跟随改变的效果.看效果: 这里我用的是vue所带的插件:vue-awesome-swiper,传送门:https://www.np ...
- Vue轮播图插件---Vue-Awesome-Swiper
轮播图插件 Vue-Awesome-Swiper 地址:https://github.com/surmon-china/vue-awesome-swiper 安装:npm install vue-aw ...
- 做一个vue轮播图组件
根据huangyi老师的慕课网vue项目跟着做的,下面大概记录了下思路 1.轮播图的图 先不做轮播图逻辑部分,先把数据导进来,看看什么效果.在recommend组件新建一个recommends的数组, ...
- vue --轮播图
轮播图,可以使用mint-ui中的swipe HTML: <Swipe :auto="4000"> <SwipeItem v-for="item in ...
- vue轮播图实现
1.先安装组件 cnpm install vue-awesome-swiper; 2.在main.js下引入文件: import VueAwsomeSwiper from 'vue-awesome-s ...
- vue 轮播图插件 vue-awesome-swiper
1.npm安装 npm install vue-awesome-swiper --save 2.vue 引入 //在main.js 中全局引入 import VueAwesomeSwiper from ...
- vue music-抓取歌单列表数据(渲染轮播图)
下载安装新依赖 babel-runtime:对es6语法进行转译 fastclick:对移动端进行点击300毫秒延迟 ,,取消掉 babel-polyfill:API 先添加,在npm install ...
随机推荐
- Vue.js 2.x笔记:基本语法(2)
1. Vue实例及选项 1.1 创建Vue实例(new Vue instance) 每个Vue Application必须创建一个root Vue Instance. <script> v ...
- ueditor 回显html样式会直接出来,无效
百度了好久,后面发现可以直接这样
- Jetson TX1 install Opencv3
https://jkjung-avt.github.io/opencv3-on-tx2/ 注意:在编译的时候会遇到内存空间不足的情况,可以插入U盘,将程序拷贝到U盘内编译,然后安装到Jetson上.U ...
- 标准3层神经网络搭建Demo
上面我们说了神经网络的基础知识,根据上章的基础尝试搭建一个标准的3层神经网络,参考https://www.cnblogs.com/bestExpert/p/9128645.html 1.框架代码 1. ...
- [洛谷P1392] 取数
无法用复杂状态进行转移时改变计算方式:巧妙的整体考虑:压缩空间优化时间 传送门:$>here<$ 题意 给出一个n*m矩阵,从每一行选一个数加起来,可以得到一个和.易知总共会有$n^n$个 ...
- [POI2015]KIN[线段树]
很套路的维护最大和子段 #include <cmath> #include <cstring> #include <cstdio> #include <cst ...
- 移动端适配单位rem
0 写在前面 本周惊喜地发现,其他各个老师的软工班(罗杰老师班和欧阳老师班)的软工项目的alpha版本都已经发布了!(然而我们软工项目还没开始写代码…逃…) 十分好奇的我第一时间下载了一些他们的产品进 ...
- Java算法 -- 二分查找
折半查找,要求待查找的序列有序.每次取中间位置的值与待查关键字比较,如果中间位置的值比待查关键字大,则在前半部分循环这个查找的过程,如果中间位置的值比待查关键字小,则在后半部分循环这个查找的过程.直到 ...
- Nginx下配置SSL模块,支持https
Http与Https的区别 HTTP:是互联网上应用最为广泛的一种网络协议,是一个客户端和服务器端请求和应答的标准(TCP),用于从WWW服务器传输超文本到本地浏览器的传输协议,它可以使浏览器更加高效 ...
- PMP是什么,PMP最难的是哪些内容?
目前在国内很多人还不了解PMP是什么,甚至不知道PMP认证的内容是哪些,考来有什么用,今天我这边就普及一下. PMP认证是美国项目管理协会发起的一项针对项目管理专业人士资格认证.取得认证需要学习项目管 ...