ProjectSlider.js
4.44 KB
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
import React, { useRef } from "react";
import { Swiper, SwiperSlide } from "swiper/react";
import "swiper/css";
import "swiper/css/navigation";
import "swiper/css/pagination";
import { Autoplay, Navigation, Pagination } from "swiper/modules";
import { Container, Row, Col } from "react-bootstrap";
import FadeInStagger from "@/components/FadeInStagger";
import Heading from "@/components/Heading";
const CollectionData = [
{ image: "/image/project.png", title: "The Imperial – Mumbai" },
{ image: "/image/project.png", title: "Azure Heights – Bengaluru" },
{ image: "/image/project.png", title: "The Imperial – Mumbai" },
{ image: "/image/project.png", title: "Azure Heights – Bengaluru" },
];
const ProjectSlider = () => {
const prevRef = useRef(null);
const nextRef = useRef(null);
return (
<div className="project-section py-5 position-relative">
<Container className="custom_container">
{/* Heading */}
<Row className="text-md-center mb-4">
<Col lg={12} md={12}>
<FadeInStagger direction="top">
<Heading el="h2" heading="Projects" />
{/* <h2 className="heading mb-2">Projects</h2> */}
<p className="mb-0 gray-text">
Our Exclusive Collections Blend Creativity, Comfort, And
Craftsmanship For Your Perfect Home.
</p>
</FadeInStagger>
</Col>
</Row>
{/* Swiper */}
<Swiper
slidesPerView={4}
spaceBetween={30}
autoplay={{ delay: 5000, disableOnInteraction: false }}
speed={1000}
loop={true}
pagination={{ clickable: true }}
navigation={{
prevEl: prevRef.current,
nextEl: nextRef.current,
}}
onBeforeInit={(swiper) => {
swiper.params.navigation.prevEl = prevRef.current;
swiper.params.navigation.nextEl = nextRef.current;
}}
modules={[Navigation, Pagination, Autoplay]}
className="projectSwiper pb-5"
breakpoints={{
320: { slidesPerView: 1, spaceBetween: 15 },
640: { slidesPerView: 1.5, spaceBetween: 20 },
992: { slidesPerView: 1.5, spaceBetween: 25 },
1200: { slidesPerView: 1.5, spaceBetween: 30 },
}}
>
{CollectionData.map((item, index) => (
<SwiperSlide key={index}>
<div className="project-card">
<img
src={item.image}
alt={item.title}
className="img-fluid rounded-lg hover-zoom"
/>
<p className="mt-3">{item.title}</p>
</div>
</SwiperSlide>
))}
</Swiper>
</Container>
{/* Swiper buttons outside container */}
<div className="position-absolute swiperbtn1 d-lg-flex d-none justify-content-between px-5 align-items-center w-100">
{/* Attach refs to buttons */}
<button ref={prevRef} className="hm-swpr-btn cust-swiper-button-prev">
<svg
width="15"
height="13"
viewBox="0 0 15 13"
fill="none"
xmlns="http://www.w3.org/2000/svg"
>
<path
d="M14.9688 7C14.9688 7.5625 14.5312 8 14 8H4.40625L7.6875 11.3125C8.09375 11.6875 8.09375 12.3438 7.6875 12.7188C7.5 12.9062 7.25 13 7 13C6.71875 13 6.46875 12.9062 6.28125 12.7188L1.28125 7.71875C0.875 7.34375 0.875 6.6875 1.28125 6.3125L6.28125 1.3125C6.65625 0.90625 7.3125 0.90625 7.6875 1.3125C8.09375 1.6875 8.09375 2.34375 7.6875 2.71875L4.40625 6H14C14.5312 6 14.9688 6.46875 14.9688 7Z"
fill="white"
/>
</svg>
</button>
<button ref={nextRef} className="hm-swpr-btn cust-swiper-button-next">
<svg
width="15"
height="13"
viewBox="0 0 15 13"
fill="none"
xmlns="http://www.w3.org/2000/svg"
>
<path
d="M0.03125 7C0.03125 7.5625 0.46875 8 1 8H10.5938L7.3125 11.3125C6.90625 11.6875 6.90625 12.3438 7.3125 12.7188C7.5 12.9062 7.75 13 8 13C8.28125 13 8.53125 12.9062 8.71875 12.7188L13.7188 7.71875C14.125 7.34375 14.125 6.6875 13.7188 6.3125L8.71875 1.3125C8.34375 0.90625 7.6875 0.90625 7.3125 1.3125C6.90625 1.6875 6.90625 2.34375 7.3125 2.71875L10.5938 6H1C0.46875 6 0.03125 6.46875 0.03125 7Z"
fill="white"
/>
</svg>
</button>
</div>
</div>
);
};
export default ProjectSlider;