Vue+element 自定义Carousel 走马灯 PC端手机端适配

置顶

D_evin_

已于 2022-01-20 09:19:40 修改

阅读量1.3k

点赞数 1

CC 4.0 BY-SA版权

分类专栏：练习文章标签： vue.js vue elementui carousel 走马灯

于 2022-01-19 14:09:02 首次发布

本文链接：https://blog.csdn.net/D_evin_/article/details/122579780

本文介绍了如何使用Vue.js和Element UI库自定义Carousel组件，实现走马灯效果，并确保其在PC和手机端都能完美适配。通过详细步骤和示例代码，展示了在不同设备上的兼容性和交互设计。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

<template>
 <div id="jump5">
  <div class="box5">
   <div class="section-04-abs">CUSTOMER SAID</div>
   <div class="box5_title">
    <span>客户说</span>
    <div>听听51大师兄的用户如何评价平台</div>
   </div>
   <div class="box5_carousel">
    <el-carousel :interval="4000" type="card" height="500px" width:="100%">
     <el-carousel-item v-for="(item, index) in data" :key="index">
      <div class="item">
       <div class="medium">
        <div class="medium_text" v-html="item.cuscontent"></div>
       </div>
       <div class="item_photo">
        <img :src="item.image" alt="" />