如何使用 vue-slick 包实现自己的操作按钮

如何解决如何使用 vue-slick 包实现自己的操作按钮

我正在使用 vue-slick 包创建一个滑块，我知道这个包允许您设置它提供的按钮/箭头的样式，但我想创建自己的 通过单击更改图片的自己的工作按钮我不知道也许这个包提供了这样的机会这里是 my project in codesandbox,Link to the documentation for this package

的链接

<template>
  <div class="drag">
    <VueSlickCarousel v-bind="settings">
      <div v-for="(item,index) in homePageImageList" :key="index" class="hero-image"
           :style="{ backgroundImage: 'url(' + item.imageURL + ')' }">
        <div class="hero-text">
          <div>
            <button>Prev</button>
          </div>
          <div class="slide-counter">
            <h4>{{ index + 1 }} / {{ homePageImageList.length }}</h4>
          </div>
          <div>
            <button>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',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",}
      ],settings: {
        "dots": false,"dotsClass": "slick-dots custom-dot-class","edgeFriction": 0.35,"infinite": false,"speed": 500,"slidesToShow": 1,"slidesToScroll": 1,"arrows": false,}
    }
  }
}
</script>

解决方法

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