OurMembers.js
4.4 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
116
117
118
119
120
121
122
123
124
125
126
127
128
129
import React from "react";
import { fadeIn, zoomIn, slideFromLeft, slideFromRight } from "../animationvariants.js";
import { Swiper, SwiperSlide } from "swiper/react";
import { Navigation, Autoplay, Pagination } from "swiper/modules";
import { motion } from "framer-motion";
// Import Swiper styles
import "swiper/css";
import "swiper/css/pagination";
import "swiper/css/navigation";
import Image from "next/image.js";
const OurMembers = () => {
const ourMembersData = [
{
image: "/images/our-members/01.png",
name: "Dave Smith",
disc: "Lorem ipsum dolor sit amet, "
},
{
image: "/images/our-members/02.png",
name: "Silva Johnson",
disc: "Lorem ipsum dolor sit amet, "
},
{
image: "/images/our-members/03.png",
name: "Will Miller",
disc: "Lorem ipsum dolor sit amet, "
},
{
image: "/images/our-members/04.png",
name: "Noah Jones",
disc: "Lorem ipsum dolor sit amet, "
}
];
return (
<section className="our-members-session">
<div className="container">
<div className="row">
<div className="col-12">
<div className="head-btn">
<motion.div variants={slideFromRight(0.4)} initial={"hidden"} whileInView={"show"} viewport={{ once: false, amount: 0.2 }}>
<div className="head01">
<div className="title">Our</div>
<h2>Members</h2>
</div>
</motion.div>
</div>
</div>
</div>
<div className="row">
<div className="col-12">
<div className=" position-relative">
<Swiper
slidesPerView={1}
loop={false}
spaceBetween={10}
navigation={{ nextEl: ".aboutus-arrow-left", prevEl: ".aboutus-arrow-right" }}
pagination={{
clickable: true
}}
autoHeight={true}
breakpoints={{
640: {
slidesPerView: 1,
spaceBetween: 20,
autoplay: true
},
768: {
slidesPerView: 4,
spaceBetween: 40
},
1024: {
slidesPerView: 4,
spaceBetween: 40
}
}}
modules={[Navigation, Autoplay, Pagination]}
className="mySwiper01 mySwiper02"
>
{ourMembersData &&
ourMembersData.map((data, index) => {
return (
<SwiperSlide>
<motion.div
variants={zoomIn("left", 0.3)}
initial={"hidden"}
whileInView={"show"}
viewport={{ once: false, amount: 0.2 }}
>
<div className="our-member-item">
<div className="img">
<span className="image-container">
<Image layout="fill" alt="" className="image img-fluid" src={data.image} />
</span>
</div>
<div className="details">
<div className="name"> {data.name}</div>
<div className="disc"> {data.disc} </div>
</div>
</div>
</motion.div>
</SwiperSlide>
);
})}
</Swiper>
<div className="swiper-nav">
<div className="navbutton d-flex justify-content-between ">
<button className="aboutus-arrow-right arrow">
<span className="image-container">
<Image layout="fill" alt="" className="image img-fluid" src="/images/icons/arrow-left.svg" />
</span>
</button>
<button className="aboutus-arrow-left arrow">
<span className="image-container">
<Image layout="fill" alt="" className="image img-fluid" src="/images/icons/arrow-right.svg" />
</span>
</button>
</div>
</div>
</div>
</div>
</div>
</div>
</section>
);
};
export default OurMembers;