54 lines
1.5 KiB
JavaScript
54 lines
1.5 KiB
JavaScript
import Slider from "react-slick";
|
|
|
|
|
|
const instagramData = [
|
|
{ id: 1, image: "/assets/images/home/bottom/1.webp" },
|
|
{ id: 2, image: "/assets/images/home/bottom/2.webp" },
|
|
{ id: 3, image: "/assets/images/home/bottom/3.webp" },
|
|
{ id: 4, image: "/assets/images/home/bottom/4.webp" },
|
|
{ id: 5, image: "/assets/images/home/bottom/5.webp" },
|
|
];
|
|
|
|
const InstagramArea = () => {
|
|
return (
|
|
<div className="instagram-area">
|
|
<Slider
|
|
dots={false}
|
|
arrows={false}
|
|
infinite={true}
|
|
speed={500}
|
|
slidesToShow={5}
|
|
slidesToScroll={1}
|
|
autoplay={true}
|
|
autoplaySpeed={2500}
|
|
responsive={[
|
|
{ breakpoint: 1400, settings: { slidesToShow: 5 } },
|
|
{ breakpoint: 1200, settings: { slidesToShow: 4 } },
|
|
{ breakpoint: 992, settings: { slidesToShow: 3 } },
|
|
{ breakpoint: 576, settings: { slidesToShow: 3 } },
|
|
{ breakpoint: 0, settings: { slidesToShow: 1 } },
|
|
]}
|
|
>
|
|
{instagramData.map((item, index) => (
|
|
<div
|
|
key={item.id}
|
|
data-aos="fade-up"
|
|
data-aos-delay={index * 50}
|
|
data-aos-duration={1500}
|
|
data-aos-offset={50}
|
|
>
|
|
<div className="instagram-item">
|
|
<img src={item.image} alt={`Instagram ${item.id}`} />
|
|
{/* <a href={item.image}>
|
|
<i className="fab fa-instagram" />
|
|
</a> */}
|
|
</div>
|
|
</div>
|
|
))}
|
|
</Slider>
|
|
</div>
|
|
);
|
|
};
|
|
|
|
export default InstagramArea;
|