search

kenwheeler / slick

the last carousel you'll ever need
kenwheeler.github.io/slick
MIT License
28.54k stars 5.89k forks source link

Slider in a slider responsive images resizing incorrectly #3033

Open BrandonShega opened 7 years ago

BrandonShega commented 7 years ago

Basically we have a slider (just images) within a slider (full product details), when making the page smaller and larger the images start to really get mis-sized, some are correct, some are massive. We're not sure if this is a limitation of the slider or maybe something that we've done wrong to set it up.

I've created a gif of the issue, I tried to reproduce it in jsfiddle but I can't seem to get it to mimic our setup exactly. Feel free to go to www.moen.com and check out the featured products section, just resize the page smaller and larger to see it in action.

====================================================================

[ http://jsfiddle.net/bshega/22ukwc0p/2/ ]

====================================================================

Steps to reproduce the problem

  1. ... create a "main slider"
  2. ... create an "inner slider" for each slide of the "main slider"
  3. ... set the content of each "inner slider" to a single image
  4. ... resize the page

====================================================================

What is the expected behaviour?

... The expected behavior is that the images resize properly when the page is scaled down.

====================================================================

What is observed behaviour?

... The images eventually become all different sizes or too large for the slide.

====================================================================

More Details

slickslideissue

felixmr1 commented 7 years ago

Also haveing this issue

sslgeorge commented 6 years ago

Also, having the same issue, the height becomes ridiculously large

a1iraxa commented 6 years ago

Facing the same issue. Slick 1.8.1

felixmr1 commented 6 years ago

@sslgeorge, @a1iraxa Are you rendering the slide from a php/python script? Or is it markuped directly on the page? (does the slider have pre-alocated space). This can also be caused when you slide the page (as in the gif). But this can be "solved" if you go directly to the responsive mode instead (on chrome: f12 then ctrl + shift + m).

sslgeorge commented 6 years ago

@TheFelixR Not at all, everything for me is marked directly on the DOM

a1iraxa commented 6 years ago

@TheFelixR I am using it in WP.