Никак не могу придумать условие как убрать стрелки у крайних слайдов, если проброшена пропса с 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 прокрутки, но без этих стрелок, так что то решение тем более не подходит)
Средний
