Extra divs in slick - Githubissues

jpunith commented 7 years ago

2 Extra div for in slick when used version 1.8.1

When i used slick.js 1.8.1 unminifed file: https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.8.1/slick.js

I got two extra div when i inspect.

hear is the js fiddle https://jsfiddle.net/cz5nds1e/

Now When i use minifed file of the version 1.8.1 https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.8.1/slick.min.js

when i inspect there is no extra div

hear is the js fiddle https://jsfiddle.net/offzcn8s/

When i debugged this issue i got to know that in minifed file a function 'buildRows' as this condition below l.options.rows > 1 and in unminifed file this condition _.options.rows > 0

GrayYoung commented 7 years ago

I use 1.8.0, have the same issue.

gserrg commented 7 years ago

https://github.com/kenwheeler/slick/commit/be0d17cc858fb30e6a4d6b28cc29860c7170040d#commitcomment-25450873

madhaze commented 7 years ago

I see this same issue. And since we are doing some custom positioning of content with flexbox. the extra <div> causes layout issues.

pierre-r commented 7 years ago

The comment linked by @gserrg is very interresting. A quick (temporary) fix is to add "rows: 0" to the options of your slick slider.

Here is an example of mine :

$('.slick-frontpage').slick({
            dots: false,
            arrows: false,
            slidesToShow: 1,
            slidesToScroll: 1,
            infinite: true,
            rows: 0 // Fix vor v1.8.0-1
        });

jpunith commented 7 years ago

@gserrg Thanks man for quick fix

oliverkierepka commented 6 years ago

works like a charme

gdrkbones commented 5 years ago

You just saved my life

vanillycpp commented 4 years ago

O! Thanks man!

arielmoguillansky commented 4 years ago

Anyone using @pierre-r solution for React Slick? It crashes when setting rows:0

VitaliyVorobey commented 3 years ago

rows: 0

Great, thank you. This also solved the white padding issue at the bottom

bpinazmul18 commented 3 years ago

The comment linked by @gserrg is very interresting. A quick (temporary) fix is to add "rows: 0" to the options of your slick slider.

Here is an example of mine :
$('.slick-frontpage').slick({
            dots: false,
            arrows: false,
            slidesToShow: 1,
            slidesToScroll: 1,
            infinite: true,
            rows: 0 // Fix vor v1.8.0-1
        });

--It's work-- that's crazy man!

thank you

kyesh commented 2 years ago

Hmm, when I set rows to 0 my whole React application fails to load. Is there something wrong with how I'm doing it or does this work around no longer work?

const defaultSettings: Settings = {
  dots: false,
  infinite: true,
  centerMode: true,
  slidesToShow: 1,
  slidesToScroll: 1,
  speed: 2000,
  autoplay: false,
  autoplaySpeed: 2000,
  nextArrow: <NextNavArrow />,
  prevArrow: <PrevNavArrow />,
  rows: 0, //see https://github.com/kenwheeler/slick/issues/3207
  responsive: [
    {
      breakpoint: 950,
      settings: {
        slidesToShow: 1,
        slidesToScroll: 1,
        initialSlide: 1,
        centerMode: false,
      }
    }
  ]
}

KashishBansal1 commented 2 years ago

rows: 0 //

same is happening with me, any idea how to fix it?

rohilpinto commented 1 year ago

my app crashes when i do rows: 0 any fix?

mknmohit commented 1 year ago

My react-app is crashing if I pass the prop rows:0. Any solution or fix?

zain64-design commented 2 weeks ago

any fix for this versions "react-slick": "^0.30.2", "slick-carousel": "^1.8.1",

kenwheeler / slick

Extra divs in slick #3207