el-carousel和el-image组合实现swiper左右滑动图片,点击某张图片放大预览的效果

简介: el-carousel和el-image组合实现swiper左右滑动图片,点击某张图片放大预览的效果

image.png

<template>
    <el-carousel 
        class="image-swiper" 
        :height="'100%'" 
        :indicator-position="swiperItems.length <= 1 ? 'none' : ''"
        :arrow="swiperItems.length <= 1 ? 'never' : ''">
        <el-carousel-item v-for="(a, $i) in swiperItems" :key="$i">
            <el-image 
                style="width: 100%; height: 100%" 
                :src="a.sm" 
                :preview-src-list="swiperItems.map(v => v.lg)" 
                :initial-index="$i"
                :fit="'cover'">
            </el-image>
        </el-carousel-item>
    </el-carousel>
</template>
<script>
export default {
    data() {
        return {
            swiperItems: [
                {
                    sm: "static/img/sm/1.jpg",
                    lg: "static/img/lg/1.jpg",
                },
                {
                    sm: "static/img/sm/2.jpg",
                    lg: "static/img/lg/2.jpg",
                },
                {
                    sm: "static/img/sm/3.jpg",
                    lg: "static/img/lg/3.jpg",
                },
            ],
        };
    },
};
</script>
<style lang="scss" scoped>
.image-swiper {
    position: absolute;
    width: 400px;
    height: 300px;
    position: absolute;
    margin: auto;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
}
</style>


目录
打赏
0
0
0
0
73
分享
相关文章
element中使用走马灯效果el-carousel点击按钮切换第几页demo效果示例(整理)
element中使用走马灯效果el-carousel点击按钮切换第几页demo效果示例(整理)
u-view使用轮播组件u-swiper不能正常显示
Swiper 轮播图 | uView 2.0 - 全面兼容nvue的uni-app生态框架 - uni-app UI框架
1127 0
u-view使用轮播组件u-swiper不能正常显示
uni-app实现swiper滑动放大缩小、实现scroll-view与swiper双向联动
uni-app实现swiper滑动放大缩小、实现scroll-view与swiper双向联动
1559 0
Element-ui中 使用图片查看器(el-image-viewer) 预览图片
Element-ui中 使用图片查看器(el-image-viewer) 预览图片
2241 1
Element-ui中 使用图片查看器(el-image-viewer) 预览图片
VUE element-ui之el-popover弹出框在局部全屏下不显示问题及弹框、小箭头背景修改
VUE element-ui之el-popover弹出框在局部全屏下不显示问题及弹框、小箭头背景修改
2880 0
VUE element-ui之el-popover弹出框在局部全屏下不显示问题及弹框、小箭头背景修改
vue中关于element的el-image 图片预览功能增加一个下载按钮
vue中关于element的el-image 图片预览功能增加一个下载按钮
1083 0
|
9月前
el-dialog中内容自定义滚动条
el-dialog中内容自定义滚动条
254 0
【经验分享】如何使用scroll-view + swiper制作tabs导航条组件。
【经验分享】如何使用scroll-view + swiper制作tabs导航条组件。
100 6
element-ui框架的el-dialog弹出框被遮罩层挡住了/el-drawer....会生成v-model元素的组件被遮罩层挡住
element-ui框架的el-dialog弹出框被遮罩层挡住了/el-drawer....会生成v-model元素的组件被遮罩层挡住
549 1

热门文章

最新文章

AI助理

你好,我是AI助理

可以解答问题、推荐解决方案等