What's wrong with my slider

[lisovskiy1337]

Hi guys, I'm a bit tired of not being able to find the problem, so.......I have something like this:

and the next slide is like that)

I just copypasted slider from my last project and Idk wtf)

import React from 'react' import "slick-carousel/slick/slick.css"; import "slick-carousel/slick/slick-theme.css"; import { StyledCarousel, StyledCarouselWrapper } from './TopMatchSliderElements';

const TopMatchSlider = () => {
    const settings = {
        dots: true,
        infinite: false,
        speed: 500,
        slidesToShow: 1,
        slidesToScroll: 1,
        autoplay: true
    }

    return (
        <StyledCarousel {...settings}>
            <div>
                <StyledCarouselWrapper>
                    <div className="wrapp">
                        <h3>LALALA</h3>
                        <p>Man U - Chelsea</p>
                    </div>

                </StyledCarouselWrapper>
            </div>
            <div>
                <StyledCarouselWrapper>
                    <div className="wrapp">
                        <h3>LALALA</h3>
                        <p>Man U - Chelsea</p>
                    </div>

                </StyledCarouselWrapper>
            </div>

        </StyledCarousel>
    )
}

export default TopMatchSlider

styled components:

import styled from "styled-components";
import Slider from "react-slick";

export const StyledCarousel = styled(Slider)`
padding-top: 20px;
`

export const StyledCarouselWrapper = styled.div`
    width: 100%;
    height: 200px;
    background: url("/images/match.jpg") no-repeat center center fixed; 
    background-size: cover;  
    border-radius: 20px;
    display: flex;
    align-items: center;
`

Please help me

[juninhokaponne]

Hi there, I took a look at your examples, I saw that you have another file where you didn't type the example, which could be useful to help you in the meantime from what I saw the error seems to me when using flexbox.

Since StyledCarouselWrapper takes a flex display, there is a parent div right on top of it that is not flexed either!

You would need to insert in the parent Div of StyledCarouselWrapper , Display flex and flex-wrap: nowrap, to be exact there is a div above the StyledCarouselWrapper component that needs to be flex.

Or you can do as the example below, pass a className and then adjust the size and flexibility as well.

Hope this helps, I tested it on my machine and it worked correctly.