如何解决当我添加 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 举报,一经查实,本站将立刻删除。