CODEWITHSUNDEEP
reactjssliderslick.jsreact-slick
Radu Dascălu
Radu Dascălu

Reputation: 318

React-Slick wraps content in div when shouldn't

React-Slick worked as should some days ago, now I updated the version and it wraps all slides in a div that breaks the old structure and behaves weird.

I've tried to downgrade and remove all settings but it didn't help. I know it's weird that after the downgrade to the previous version I have the same problem, but I am completely sure that 2 days ago it worked correctly.

Here is how I use react-slick:

<Slider {...sliderSettings}>
  <div><h1>test</h1></div>
  <div><h1>test 1</h1></div>
  <div><h1>test 2</h1></div>
</Slider>

And here are the settings:

const sliderSettings = {
  dots: true,
  lazyLoad: true,
  className: 'slider',
  dotsClass: 'dots',
  arrows: false,
  autoplay: true,
}

Here is the markup in the browser:

<div data-index="0" class="slick-slide" tabindex="-1" aria-hidden="true" style="outline: none; width: 1275px;">
  <div> <<-- This div shouldn't be here
    <div tabindex="-1" style="width: 100%; display: inline-block;">
      <h1>test</h1>
    </div>
  </div>
</div>

Upvotes: 1

Views: 2238

Answers (1)

Radu Dascălu
Radu Dascălu

Reputation: 318

The problem was with the new version, 0.23.1. For some reason it wrapped all slides in a div, that would break the structure and the props would arrive on an unexpected element.

Fixed it by downgrading to 0.16.0.

Upvotes: 2

Related Questions