Why does slick js add 2 extra divs?

Question

Slick

I install slick js in vue or via npm in an html project, and it doesn't matter which way, via vue-slick or using jquery and slick-caousel.

Set this behavior if I install slick-carousel via NPM. Then 2 or one extra div immediately appears. I don't understand why.

How can the problem be solved?

Answer 1

On webpack, a similar problem was solved by connecting a minified file
require('slick-carousel/slick/slick.min.js');

Answer 2

See the Vue code, slick never adds such blocks.

Answer 3

Maybe somewhere stupidly unclosed div =)
Search, of course, by the method of exceptions, plus look inside slick, suddenly there is something like usediv = true somewhere to wrap it in an empty div? In general, a lot of options

Answer 4

If the slider has only 1 row, try adding rows: 0
an Example,

$('.your-slider').slick({
  // your settings
  rows: 0,
});