[Vuejs]-Carousel Vue.js

by

0👍

✅

Try this:

<div id="carousel2">
  <el-carousel :interval="4000" type="card">
    // If background color
    <el-carousel-item v-for="item in twoItems" :key="item" :style="{ backgroundColor : item.bgColor }">
      <h3>{{item.title}}</h3>
    </el-carousel-item>

    // If background image
    <el-carousel-item v-for="item in twoItems" :key="item" :style="{backgroundImage : `url(${ $item.bgImg })`}">
      <h3>{{item.title}}</h3>
    </el-carousel-item>
  </el-carousel>
</div>

And your data in script:

<script>
  export default {
    data() {
      return {
        twoItems: [
          { title: 'Item One', bgColor: 'red', bgImg: 'lorem.jpg'  },
          { title: 'Item Two', bgColor: 'blue', bgImg: 'ipsum.jpg' },
        ],
      };
    },
  };
</script>
👤Syed

0👍

If you only need to set backgroundColor, then you can set in the style like

.el-carousel__item:nth-child(n) {
   background-color: green;
}

also you can finish it with vue:

<el-carousel-item :style="{ background: 'green' }" v-if="item === 1"></el-carousel-item>
     <h3>{{item}}</h3>
 </el-carousel-item>
👤Tony_zha

Leave a comment