全宽反应滑块反应滑块

如何解决全宽反应滑块反应滑块

我正在为我的 react 滑块组件使用 react slick Carousel。我面临的问题是它与我在谷歌上搜索但没有找到答案的幻灯片重叠。如果有的话，建议我用文本动画做出好的反应滑块。这里我的组件是 ` 导出默认函数 AppSlider() {

const beforechange = () => {
    var slickActive = document.getElementsByClassName("slick-active")
    var slideContent = document.getElementsByClassName("slide-content")
    slickActive.className = "animation"
    slideContent.className = "animation"
}
const settings = {
    dots: false,pauSEOnHover: true,slidesToShow: 1,autoplaySpeed: 7000,speed: 2000,fade: true,beforechange,slidesToScroll: 1
};

return (

    <div>
        <Slider {...settings}>
            <div>
                <div className='slide slide-1'>
                    <div className=" capitalize">
                        <div className="myintro slide-content">
                            <h1 className="slide1-h1"> zeeshan shabbir</h1>
                            <p className="slide1-p">
                                front  end <br /> web developer
                            </p>
                            <div className="center slide1-btn">
                                <button className='btn introbtn center'>Contact me</button>
                            </div>
                        </div>
                        <div className="my-pic-Box">
                            <div>
                                <img className="my-img" src={ZeeshanImg} alt="Zeeshan Web developer" width='100%' height='100%' />
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div>
                <div className='slide slide-2'>
                    <div className=" capitalize">
                        <div className="myintro slide-content">
                            <h1 className="slide2-h1"> zeeshan shabbir</h1>
                            <p className="slide2-p">
                                front  end <br /> web developer
                            </p>
                            <div className="center slide1-btn">
                                <button className='btn introbtn center'>Contact me</button>
                            </div>
                        </div>
                        <div className="my-pic-Box">
                            <div>
                                <img className="my-img" src={ZeeshanImg} alt="Zeeshan Web developer" width='100%' height='100%' />
                            </div>
                        </div>
                    </div>
                </div>
            </div>
    

        </Slider>
    </div>
)

}`

它显示了幻灯片 2 我尝试了 z-index 但没有用。