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>


相关文章
element中使用走马灯效果el-carousel点击按钮切换第几页demo效果示例(整理)
element中使用走马灯效果el-carousel点击按钮切换第几页demo效果示例(整理)
|
JavaScript 前端开发
Vue3--Vue Router详解--学习笔记
Vue3--Vue Router详解--学习笔记
275 3
|
中间件 API
nuxt3:接口转发,实现跨域
nuxt3:接口转发,实现跨域
1183 0
|
JavaScript
Element-ui中 使用图片查看器(el-image-viewer) 预览图片
Element-ui中 使用图片查看器(el-image-viewer) 预览图片
2800 1
Element-ui中 使用图片查看器(el-image-viewer) 预览图片
Elementui-Image组件,单个图片点击放大展示
Elementui-Image组件,单个图片点击放大展示
488 2
vue3 element-ui-plus Carousel 跑马灯 的使用 及 踩坑记录
本文介绍了在Vue 3中使用Element UI Plus的Carousel组件实现跑马灯效果的方法,并分享了在实现过程中遇到的常见问题和解决方案。
vue3 element-ui-plus Carousel 跑马灯 的使用 及 踩坑记录
Vue3项目使用 wow.js 让页面滚动更有趣~
本文介绍了如何在Vue3项目中集成wow.js库,通过实现滚动动画效果来增强页面的动态性和趣味性,并提供了详细的使用示例和参数说明。
767 0
Vue3项目使用 wow.js 让页面滚动更有趣~
|
JavaScript UED
以 Vue 3 项目为例,多个请求下如何全局封装 Loading 的展示与关闭?其中大有学问!
以 Vue 3 项目为例,多个请求下如何全局封装 Loading 的展示与关闭?其中大有学问!
element el-table 设置fixed导致行错乱问题
文章讨论了在使用Element UI的`el-table`组件时,设置固定列(`fixed`)导致行错乱的问题,并提供了解决方案。问题产生的原因是当表格底部有滚动条而固定列底部没有滚动条时,行无法对齐。解决办法是在表格中设置`padding-bottom`的内边距与滚动条高度相等,确保固定列和非固定列的行能够对齐。
2995 0
|
JavaScript
vue中关于element的el-image 图片预览功能增加一个下载按钮
vue中关于element的el-image 图片预览功能增加一个下载按钮
1449 0