@danilr

Как отключить стрелки слайдера скриптом у крайних слайдов Vue-Slick?

Никак не могу придумать условие как убрать стрелки у крайних слайдов, если проброшена пропса с true.
Вот компонент со слайдером.
Затык в том, что есть breakpoint и у каждого своё количество слайдов при данном разрешении. Вот и не понятно как это динамично каждый раз пересчитывать.
<template>
  <div class="slider-wrapper">
    <Slick
      @click.native="handleClick"
      ref="slick"
      :options="slickOptions"
      @init="handleInit"
      @beforeChange="handleBeforeChange"
      >
        <slot></slot>
    </Slick>
  </div>
</template>

<script>
import Slick from 'vue-slick';

export default {
  data() {
    return {
      currentSlide: 0,
      slideCount: 0
    }
  },
  props: {
    clickSlide: {
      type: Function,
      default: () => {console.log('default fn prop')}
    },
    slidesToShow: {
      type: Number,
      default: 4
    },
    nextArrow: {
      type: String,
      default: `<div class="arrow-wraper next"><img src="/img/common/arrow-right.svg"></div>`
    },
    prevArrow: {
      type: String,
      default: `<div class="arrow-wraper prev"><img src="/img/common/arrow-left.svg"></div>`
    },
    infinite: {
      type: Boolean,
      default: true
    },
    hideArrowEnd: {
      type: Boolean,
      default: false
    },
    responsive: {
      type: Array,
      default: () => ([
         {
           breakpoint: 992,
           settings: {
             slidesToShow: 3
           },
         },
         {
           breakpoint: 600,
           settings: {
             slidesToShow: 2
           },
         },
         {
           breakpoint: 500,
           settings: {
             slidesToShow: 1
           } 
         }
       ])
    }
  },
  computed: {
    slickOptions() {
      return {
       slidesToShow: this.slidesToShow,
       nextArrow: this.hideArrowEndNext && this.nextArrow,
       prevArrow: this.hideArrowEndPrev && this.prevArrow,
       swipeToSlide: true,
       infinite: this.infinite,
       responsive: this.responsive
        // Any other options that can be got from plugin documentation 
      } 
    },

    hideArrowEndNext() {
      return !(this.slideCount !== this.currentSlide && this.hideArrowEnd);
    },

    hideArrowEndPrev() {
      return !(this.slideCount !== 0 && this.hideArrowEnd);
    }
  },
  
  methods: {

    /* это приседание пришлось сделать так как через @click при infinite слайдера не навешваются события click,
      в обертку элемента слайдера надо добавлять data-slide-index="с номером индекса в массиве элементов"
    */
    handleClick({ target: t }) {
      const slickSlide = t.closest(".slick-slide");
      const mySlide = t.closest("div[data-slide-index]");
      if (slickSlide && mySlide) {
        const indexMySlide = mySlide.getAttribute('data-slide-index');
        this.clickSlide(indexMySlide);
      }
    },
    handleBeforeChange(event, slick, currentSlide, nextSlide) {
      this.currentSlide = nextSlide;
        console.log('handleBeforeChange', event, slick, currentSlide, nextSlide);
    },
    handleInit(event, slick) {
      this.currentSlide = slick.currentSlide;
      console.log('this.currentSlide: ', this.currentSlide);
      this.slideCount = slick.slideCount-1;
      console.log('this.slideCount: ', this.slideCount);
      console.log('this.hideArrowEnd: ', this.hideArrowEnd);
  },

  mounted(){

  },
  updated() {
console.log('this.hideArrowEndNext: ', this.hideArrowEndNext);
  },

  components: {
    Slick
  }
}
</script>

Видел тут подобный вопрос, но там решение мне не нравится, там предлагают как-то через класс, который навешивает слайдер (у меня, будет возможность infinite прокрутки, но без этих стрелок, так что то решение тем более не подходит)
  • Вопрос задан
  • 57 просмотров
Пригласить эксперта
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы