vue pc端element-ui的走马灯carousel实现自适应全屏banner

本文介绍了如何使用Vue和Element-UI的carousel组件创建自适应全屏轮播图。在遇到carousel高度固定导致的空白区域问题后,作者提出了解决方案:动态获取第一张图片高度并应用到容器,利用flex布局实现图片居中,确保轮播图在窗口大小变化时能自适应填充全屏。
摘要由CSDN通过智能技术生成

前提摘要:使用vue很方便做一些效果,目前开源的组件特别的多pc端使用轮播图的话element-ui的carousel是一个不错的选择,当然也可以选择swiper组件。

问题:我发现carousel组件容器的高度是固定写死的,就算是我把image图片的宽度设置100%,它会随着浏览器屏幕的宽度等比例缩小到我设置的最小宽度就不会再变小。但是因为外面的容器已经写死了一个高度,这样的话就会留有一片空白区域。如下:


解决思路:获取当前图片的高度然后赋给swiper外部容器的高度,然后flex布局容器里面的图片居中。

问题解决:这是我的自己的解决方案,大家有更好的可以留言谢谢。

1,template html代码

<div class="swiper">
    <el-carousel indicator-position="none" arrow="always" :height</
评论 7
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值