当我添加 Slick Slider 时，图像会进入底部

问题描述

我想为我的组件添加滑块，但是当我添加它时，它看起来与以前不同。光滑使图像底部。不是 Flex。我将展示一些照片以使其更清晰。

例如，如果我不使用像 :

        <div className="header has-style6 bg-white">
      <div className="container">
        <div className="header-wrap">
          
            {sliderData.length === 0 ? (
              <span>Loading.....</span>
            ) : (
              sliderData.map((slide) => {
                return (
                  <div className=" row  align-items-center">
                    <div className="col-lg-6">
                      <h2
                        className="header-title"
                        data-aos="fade-up"
                        data-aos-delay="500"
                      >
                        {slide.Title}
                      </h2>
                      <p className="header-desc">{slide.Summary}</p>
                      <div className="d-flex justify-content-sm-center justify-content-lg-start">
                        <a
                          href={slide.ButtonLink}
                          className="btn btn-secondary "
                        >
                          {" "}
                          {slide.ButtonText}{" "}
                        </a>
                      </div>
                    </div>
                    <div className="col-lg-6">
                      <div className="header-img">
                        <img
                          data-aos="fade-left"
                          data-aos-delay="700"
                          src={slide.ImageUrl}
                          alt=""
                        />
                      </div>
                    </div>
                  </div>
                );
              })
            )}
           
        </div>
      </div>
    </div>

它看起来像：https://prnt.sc/1h08240 就像我想要的。但我想把它放在光滑的滑块上。所以当我说：

<div className="header has-style6 bg-white">
      <div className="container">
        <div className="header-wrap">
          <Slider {...settings}>
            {sliderData.length === 0 ? (
              <span>Loading.....</span>
            ) : (
              sliderData.map((slide) => {
                return (
                  <div className=" row  align-items-center">
                    <div className="col-lg-6">
                      <h2
                        className="header-title"
                        data-aos="fade-up"
                        data-aos-delay="500"
                      >
                        {slide.Title}
                      </h2>
                      <p className="header-desc">{slide.Summary}</p>
                      <div className="d-flex justify-content-sm-center justify-content-lg-start">
                        <a
                          href={slide.ButtonLink}
                          className="btn btn-secondary "
                        >
                          {" "}
                          {slide.ButtonText}{" "}
                        </a>
                      </div>
                    </div>
                    <div className="col-lg-6">
                      <div className="header-img">
                        <img
                          data-aos="fade-left"
                          data-aos-delay="700"
                          src={slide.ImageUrl}
                          alt=""
                        />
                      </div>
                    </div>
                  </div>
                );
              })
            )}
            
          </Slider>
        </div>
      </div>
    </div>

它就像：https://prnt.sc/1h09r0r 我希望它看起来和第一个一样。

我的漂亮设置：

const settings = {
    dots: true,infinite: true,slidesToShow: 1,slidesToScroll: 1,autoplay: false,speed: 500,autoplaySpeed: 2500,cssEase: "ease",variableWidth: false,};

我该如何解决？谢谢回复！！

解决方法

暂无找到可以解决该程序问题的有效方法，小编努力寻找整理中！

如果你已经找到好的解决方法，欢迎将解决方案带上本链接一起发送给小编。

小编邮箱:dio#foxmail.com (将#修改为@）