Search code examples
htmlcsslayoutz-indexslick.js

Overflow for slick slider with fixed background, how to prevent image cropping on slide?

There is a stylized slick-slider where the image should go beyond the top border: image At the same time, for .slick-list I have a background set (which is fixed, only the content is scrolled - text, picture and button): image How can I prevent the picture from being cropped?

Solution

  • Here are steps how to fix it

    1. add to css

    .home-slider .slick-list { overflow: visible !important; } - you need IMPORTANT as {overflow: hidden} will be added to the element style during the animation. Clones on left/right should be visible

    1. add new CSS selector + styles
    .home-slider.slick-slider {
  position: static;
  overflow: hidden;
}

    Clones shouldn't be visible. But you have wrong position for the button and dots at the bottom

    1. wrap(create parent div.home-slider-wrapper) the div.home-slider in the div.home-slider-wrapper at your html

    2. add to css

    .home-slider-wrapper {position: relative;}
    1. align button + dots, position of these elements calculated from .home-slider-wrapper