Funny duplication
wondergitluda opened this issue · 1 comments
wondergitluda commented
Hi, I get a funny error and I can't figure out how to resolve.
Vue file
<template>
<div class="my__slider">
<slick ref="slick" :options="slickOptions">
<div v-for="(slide, index) in slides" class="slick-slide">
<div class="my__item">{{ slide.text }}</div>
</div>
</slick>
</div>
</template>
Blade file
<placehead-slider :slides="{{ $template->medialibrary }}"></placehead-slider>
and the browser renders like this
<div class="my__slider">
<div class="slick-initialized slick-slider">
<div class="slick-list draggable">
<div class="slick-track" style="opacity: 1; width: 6450px;">
<div class="slick-slide slick-current slick-active" data-slick-index="0" aria-hidden="false" style="width: 1290px; position: relative; left: 0px; top: 0px; z-index: 2; opacity: 1;">
<div>
<div class="slick-slide" aria-hidden="true" style="width: 100%; display: inline-block;">
<div class="my__item">Hello world</div>
</div>
</div>
</div>
</div>
</div>
</div>
Why appear these double "slick-slide" with a empty class div inside?
Until a couple of months ago it works like this
<div class="my__slider">
<div class="slick-initialized slick-slider">
<div class="slick-list draggable">
<div class="slick-track" style="opacity: 1; width: 6450px;">
<div class="slick-slide slick-current slick-active" data-slick-index="0" aria-hidden="false" style="width: 1290px; position: relative; left: 0px; top: 0px; z-index: 2; opacity: 1;">
<div class="my__item">Hello world</div>
</div>
</div>
</div>
</div>
</div>
(Node 8.9.1 - NPM 5.5.1 - Vue 2.5.3 - VueSlick 1.1.12)
staskjs commented
It could be that original slick plugin has updated and that's why behaviour has changed. Try downgrading slick-carousel package maybe, or just adapt to new behaviour. It has nothing to do with vue-slick, because it is just a wrapper.