我是 Web 开发新手,正在学习使用 React 和 Tailwind。
我正在尝试做“关于我们”部分,应该按以下方式制作。
有两个组件:每秒自动更改的图像幻灯片和带有一些文本的段落。
两者应该这样排列:
这是我目前拥有的代码。它可以工作,但有一个问题:似乎对于情况 2,它没有正确理解幻灯片的高度,因此段落文本位于幻灯片图像的顶部。
有什么办法可以解决这个问题吗?谢谢。
const [currentSlide, setCurrentSlide] = useState(0);
useEffect(() => {
const interval2 = setInterval(() => {
setCurrentSlide((prevSlide) =>
prevSlide === images.length - 1 ? 0 : prevSlide + 1
);
}, 3000);
return () => {
clearInterval(interval2);
};
}, []);
<div className="grid grid-cols-1 grid-rows-2 lg:grid-rows-1 lg:grid-cols-2 w-full">
{/* Images */}
<div className="images lg:order-1" data-aos="fade-up">
<div className="relative">
{images.map((image, index) => (
<div
key={image.id}
className={`absolute top-0 left-0 w-full h-full transition-opacity duration-1000 ${
index === currentSlide ? "opacity-100" : "opacity-0"
}`}
>
<img src={image.img} className="rounded-md" alt="" />
</div>
))}
</div>
</div>
{/* About us */}
<div className="lg:order-2 lg:mt-0 mx-auto space-y-4 lg:w-3/4 text-black" data-aos="fade-up">
<h2 className="text-2xl font-semibold"> Title</h2>
<p className="text-justify lg:text-start">
About us 1.
</p>
<p className="text-justify lg:text-start">
About us 2.
</p>
<p className="text-justify lg:text-start">
About us 3.
</p>
</div>
</div>
div.relative
元素具有0
高度,因为里面的所有元素都有position: absolute
。如果所有图像的大小相同,您可以考虑not将position: absolute
应用于第一张图像。然后,这会给出布局矩形间距,确保文本在滑块下方流动。
const { useEffect, useState } = React;
const images = [
{ img: 'https://picsum.photos/1920/1080' },
{ img: 'https://picsum.photos/1920/1080?' },
{ img: 'https://picsum.photos/1920/1080?0' },
];
function App() {
const [currentSlide, setCurrentSlide] = useState(0);
useEffect(() => {
const interval2 = setInterval(() => {
setCurrentSlide((prevSlide) =>
prevSlide === images.length - 1 ? 0 : prevSlide + 1,
);
}, 3000);
return () => {
clearInterval(interval2);
};
}, []);
return (
<div className="grid grid-cols-1 grid-rows-2 lg:grid-rows-1 lg:grid-cols-2 w-full">
{/* Images */}
<div className="images lg:order-1" data-aos="fade-up">
<div className="relative">
{images.map((image, index) => (
<div
key={image.id}
className={`top-0 left-0 w-full h-full transition-opacity duration-1000 ${
index === currentSlide ? 'opacity-100' : 'opacity-0'
} ${index > 0 ? 'absolute' : ''}`}
>
<img src={image.img} className="rounded-md" alt="" />
</div>
))}
</div>
</div>
{/* About us */}
<div
className="lg:order-2 lg:mt-0 mx-auto space-y-4 lg:w-3/4 text-black"
data-aos="fade-up"
>
<h2 className="text-2xl font-semibold"> Title</h2>
<p className="text-justify lg:text-start">About us 1.</p>
<p className="text-justify lg:text-start">About us 2.</p>
<p className="text-justify lg:text-start">About us 3.</p>
</div>
</div>
);
}
ReactDOM.createRoot(document.getElementById('app')).render(<App />);
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/18.2.0/umd/react.production.min.js" integrity="sha512-8Q6Y9XnTbOE+JNvjBQwJ2H8S+UV4uA6hiRykhdtIyDYZ2TprdNmWOUaKdGzOhyr4dCyk287OejbPvwl7lrfqrQ==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/18.2.0/umd/react-dom.production.min.js" integrity="sha512-MOCpqoRoisCTwJ8vQQiciZv0qcpROCidek3GTFS6KTk2+y7munJIlKCVkFCYY+p3ErYFXCjmFjnfTTRSC1OHWQ==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
<script src="https://cdn.tailwindcss.com/3.4.3"></script>
<div id="app"></div>