# Carousel

For the Carousel we used a Vue.js library named Element-Ui who also have the carousel directive already integrated.

# Global Usage

  1. First you need to import:
import Vue from 'vue';
import { Carousel, CarouselItem } from 'element-ui';
  1. Now you need to declare:
Vue.use(Carousel);
Vue.use(CarouselItem);

In this product already this plugin it's globally installed

This is an preview example of our beautiful carousel.

    <div class="md-layout">
  <div class="md-layout-item md-size-66 mx-auto md-small-size-100">
    <md-card>
      <el-carousel
        trigger="click"
        :interval="5000">
        <el-carousel-item v-for="item in carousel" :key="item.image">
          <h4 class="carousel-caption">
            <md-icon>location_on</md-icon>
            {{item.title}}
          </h4>
          <img :src="item.image" alt="">
        </el-carousel-item>
      </el-carousel>
    </md-card>
  </div>
</div>

<script>
  export default {
    data() {
     return {
       carousel: [
         {image: require("@/assets/img/nature-2.jpg"), title: 'Somewhere Beyond, United States'},
         {image: require("@/assets/img/nature.jpg"), title: 'Yellowstone National Park, United States'} ,
         {image: require("@/assets/img/nature-3.jpg"), title: 'National Park, United States'}
       ]
      }
    }
  }  
</script>

    ← Vue Product Zoomer →