staskjs/vue-slick

Funny duplication

wondergitluda opened this issue · 1 comments

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)

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.