[Vuejs]-How to implement your own action buttons using the vue-slick package

by

0👍

✅

<template>
  <div class="drag">
    <VueSlickCarousel v-bind="settings" ref="carousel">
      <div v-for="(item, index) in homePageImageList" :key="index" class="hero-image"
           :style="{ backgroundImage: 'url(' + item.imageURL + ')' }">
        <div class="hero-text">
          <div>
            <button @click="Prev">Prev</button>
          </div>
          <div class="slide-counter">
            <h4>{{ index + 1 }} / {{ homePageImageList.length }}</h4>
          </div>
          <div>
            <button @click="showNext">show me the next</button>
          </div>
        </div>
      </div>
    </VueSlickCarousel>
  </div>
</template>

<script>
import 'vue-slick-carousel/dist/vue-slick-carousel.css'
import 'vue-slick-carousel/dist/vue-slick-carousel-theme.css'
import VueSlickCarousel from 'vue-slick-carousel'

export default {
  components: {VueSlickCarousel},
  name: 'HelloWorld',
  methods: {
    Prev() {
      this.$refs.carousel.prev()
    },
    showNext() {
      this.$refs.carousel.next()
    },
  },
  data() {
    return {
      homePageImageList: [
        {
          imageURL: "http://astragem.com/static/images/MenuGirl/HomePageBackground/15-min.png",
        },
        {
          imageURL: "http://astragem.com/static/images/MenuGirl/HomePageBackground/15-min.png",
        },
        {
          imageURL: "http://astragem.com/static/images/MenuGirl/HomePageBackground/15-min.png",
        }
      ],

      settings: {
        "dots": false,
        "dotsClass": "slick-dots custom-dot-class",
        "edgeFriction": 0.35,
        "infinite": false,
        "speed": 500,
        "slidesToShow": 1,
        "slidesToScroll": 1,
        "arrows": false,
      },
    }
  }
}
</script>

Leave a comment