search

akiran / react-slick

React carousel component
http://react-slick.neostack.com/
MIT License
11.72k stars 2.1k forks source link

Please! let me know how to solve, I added another component under the slick slider component, why overlap new <div>? It can be solve possible or not? #1951

Open KyawNyeinNaing opened 3 years ago

KyawNyeinNaing commented 3 years ago

image

KyawNyeinNaing commented 3 years ago 
<BlogSliderStyled>
      <Slider>
        <BlogCard {...props} />
      </Slider>
    </BlogSliderStyled>

image

It's my code

VadimSvirdoff commented 3 years ago

Hi, @KyawNyeinNaing Use this sample to resolve you problem, https://github.com/akiran/react-slick/blob/master/examples/SimpleSlider.js. Also use settings props and try to move Slider instead your fragment component.

isabellasantiago commented 11 months ago

It didn't work for me...

I have two components inside (and I'm also using Chakra-ui).

I have these settings: 

   const sliderSettings = {
    arrows: false,
    fade: true,
    speed: 500,
    autoplay: true,
    autoplaySpeed: 150000,
    slidesToShow: 1,
    slideToScroll: 1,
    initialSlide: 0,
    beforeChange: (_old: number, newIdx: number) => setIndex(newIdx),
  };

these two components behave as "banners", that means that they have buttons that work as <a> tag (cause they send you to another page), the thing is that my slide 1 is overlaped by slide 2 at DOM. It doesn't appear in the screen but if I pass my cursor where the button from slide 2 stands it makes hover behavior. But the worst part is that slide 1 also has a button that is overlap by button from slide 2.