Skip to content

Commit cf62791

Browse files
abheektripathyabheektripathy
committed
added autoplay to slider
1 parent b773e2c commit cf62791

3 files changed

Lines changed: 82 additions & 103 deletions

File tree

‎components/Slider.tsx‎

Lines changed: 77 additions & 98 deletions
Original file line numberDiff line numberDiff line change
@@ -1,125 +1,104 @@
1+
/* eslint-disable @next/next/no-img-element */
12
"use client";
23

34
import { TestimonialData } from "../constants/testimonialsdata";
45
import { Sponsordata } from "../constants/sponsordata";
5-
import { useEffect } from "react";
6-
import Swiper from "swiper";
76
import Link from "next/link";
7+
import { Autoplay, Pagination, Navigation } from "swiper";
8+
import { Swiper, SwiperSlide } from "swiper/react";
9+
import "swiper/css";
810

911
interface sliderProps {
1012
isTestimonial: boolean;
1113
}
1214

1315
export default function Slider(props: sliderProps) {
1416
const { isTestimonial } = props;
15-
useEffect(() => {
16-
let swiper: Swiper | null = null; // Declare swiper variable
17-
18-
const initializeSwiper = () => {
19-
swiper = new Swiper(".swiper-container", {
20-
loop: true,
21-
slidesPerView: 1,
22-
spaceBetween: 8,
23-
autoplay: {
24-
delay: 8000,
25-
},
26-
pagination: {
27-
el: ".swiper-pagination",
28-
clickable: true,
29-
},
30-
breakpoints: {
31-
640: {
32-
slidesPerView: 1.5,
33-
},
34-
1024: {
35-
slidesPerView: 3,
36-
},
37-
},
38-
});
39-
};
40-
41-
initializeSwiper();
42-
43-
return () => {
44-
if (swiper && typeof swiper.destroy === "function") {
45-
swiper.destroy(); // Call destroy function if available
46-
}
47-
};
48-
}, []);
49-
17+
5018
return (
5119
<>
5220
{isTestimonial ? (
5321
<div id="testimonials-element" className="w-[90%]">
5422
<div className="mx-auto max-w-screen-xl px-4 py-16 sm:px-6 lg:px-8">
55-
<div className="swiper-container !overflow-hidden">
56-
<div className="swiper-wrapper">
57-
{TestimonialData.map((testimonial, index) => {
58-
return (
59-
<div key={index} className="swiper-slide">
60-
<blockquote className="bg-[#16161D] p-8 xl:p-16 rounded-xl mx-2 border-solid border border-[#39393F] ">
61-
<p className="relative mt-4 text-gray-500">
62-
<span className="text-xl">&ldquo;</span>
63-
{testimonial.review}
64-
<span className="text-xl">&rdquo;</span>
65-
</p>
66-
<div className="flex items-center gap-4">
67-
<div className="text-lg mt-14">
68-
<p className="font-medium font-SpaceGrotesk opacity-90 text-white text-xl">
69-
{testimonial.name}
70-
</p>
71-
<p className="font-medium font-SpaceGrotesk text-white opacity-70 text-lg">
72-
{testimonial.designation}
73-
</p>
74-
</div>
23+
<Swiper
24+
spaceBetween={25}
25+
slidesPerView={3}
26+
autoplay={{
27+
delay: 2000,
28+
disableOnInteraction: false,
29+
}}
30+
modules={[Autoplay]}
31+
className="h-full"
32+
>
33+
{TestimonialData.map((testimonial, index) => {
34+
return (
35+
<div key={index} className="swiper-slide h-full bg-white">
36+
<SwiperSlide className="bg-[#16161D] !h-[30rem] p-8 xl:p-16 rounded-xl mx-2 border-solid border border-[#39393F]">
37+
<p className="relative mt-4 text-gray-500">
38+
<span className="text-xl">&ldquo;</span>
39+
{testimonial.review}
40+
<span className="text-xl">&rdquo;</span>
41+
</p>
42+
<div className="flex items-center gap-4">
43+
<div className="text-lg mt-14">
44+
<p className="font-medium font-SpaceGrotesk opacity-90 text-white text-xl">
45+
{testimonial.name}
46+
</p>
47+
<p className="font-medium font-SpaceGrotesk text-white opacity-70 text-lg">
48+
{testimonial.designation}
49+
</p>
7550
</div>
76-
</blockquote>
77-
</div>
78-
);
79-
})}
80-
</div>
81-
<div className="swiper-pagination !relative !bottom-0 mt-12"></div>
82-
</div>
51+
</div>
52+
</SwiperSlide>
53+
</div>
54+
);
55+
})}
56+
</Swiper>
8357
</div>
8458
</div>
8559
) : (
8660
<div id="sponsor-element" className="w-[90%]">
8761
<div className="mx-auto max-w-screen-xl px-4 py-16 sm:px-6 lg:px-8">
88-
<div className="swiper-container !overflow-hidden">
89-
<div className="swiper-wrapper">
90-
{Sponsordata.map((sponsor, index) => {
91-
return (
92-
<div key={index} className="swiper-slide">
93-
<blockquote className="bg-[#16161D] p-8 xl:p-16 rounded-xl mx-2 border-solid border border-[#39393F] flex flex-col justify-center items-center space-y-7 ">
94-
<p className="relative mt-4 text-gray-500">
95-
{sponsor.companydesc}
96-
</p>
97-
<Link href={sponsor.companylink}>
98-
<img
99-
className="items-center justify-center "
100-
src={sponsor.companylogo}
101-
width={250}
102-
height={50}
103-
alt="hj"
104-
></img>
105-
</Link>
106-
<div className="flex items-center gap-4">
107-
<div className="text-lg ">
108-
<p className="font-medium font-SpaceGrotesk opacity-90 text-white text-lg">
109-
{sponsor.companyname}
110-
</p>
111-
<p className="font-medium font-SpaceGrotesk text-white opacity-70 text-md">
112-
{sponsor.companylevel}
113-
</p>
114-
</div>
62+
<Swiper
63+
spaceBetween={25}
64+
slidesPerView={3}
65+
autoplay={{
66+
delay: 2000,
67+
disableOnInteraction: false,
68+
}}
69+
modules={[Autoplay]}
70+
>
71+
{Sponsordata.map((sponsor, index) => {
72+
return (
73+
<div key={index} className="swiper-slide">
74+
<SwiperSlide className="bg-[#16161D] !h-[35rem] p-8 xl:p-16 rounded-xl mx-2 border-solid border border-[#39393F] flex flex-col justify-center items-center space-y-7 ">
75+
<p className="relative mt-4 text-gray-500">
76+
{sponsor.companydesc}
77+
</p>
78+
<Link href={sponsor.companylink}>
79+
<img
80+
className="items-center justify-center "
81+
src={sponsor.companylogo}
82+
width={250}
83+
height={50}
84+
alt="hj"
85+
></img>
86+
</Link>
87+
<div className="flex items-center gap-4">
88+
<div className="text-lg ">
89+
<p className="font-medium font-SpaceGrotesk opacity-90 text-white text-lg">
90+
{sponsor.companyname}
91+
</p>
92+
<p className="font-medium font-SpaceGrotesk text-white opacity-70 text-md">
93+
{sponsor.companylevel}
94+
</p>
11595
</div>
116-
</blockquote>
117-
</div>
118-
);
119-
})}
120-
</div>
121-
<div className="swiper-pagination !relative !bottom-0 mt-12"></div>
122-
</div>
96+
</div>
97+
</SwiperSlide>
98+
</div>
99+
);
100+
})}
101+
</Swiper>
123102
</div>
124103
</div>
125104
)}

‎components/sections/VideoSection.tsx‎

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -7,12 +7,12 @@ export default function VideoSection() {
77
id="text"
88
className="flex flex-col w-full md:h-2/5 items-center justify-center -mt-12"
99
>
10-
<h2 className="w-4/5 text-center text-xl text-white md:text-4xl xl:text-5xl leading-snug lg:leading-snug xl:leading-snug font-SpaceGrotesk font-semibold ">
11-
Your Open Source Solution for your day-to-day activities.
10+
<h2 className="w-4/5 text-center text-xl text-white md:text-5xl xl:text-6xl leading-snug lg:leading-snug xl:leading-snug font-SpaceGrotesk font-semibold ">
11+
Your <span className="text-[#00ADEF]">Open Source </span> Solution for your day-to-day activities.
1212
</h2>
1313
<h3 className="text-center md:w-2/3 mx-6 text-white text-lg md:text-2xl lg:text-2xl xl:text-3xl leading-snug lg:leading-snug xl:leading-snug font-SpaceGrotesk font-light opacity-70 mt-2">
1414
<br/>
15-
Threat Hunting, SOC operations, Incident Response, Threat Intelligence, Vulnerability Management, etc... <br/> We got you covered. You can adapt the application to your specific use cases.
15+
Threat Hunting, SOC operations, Incident Response, Threat Intelligence, Vulnerability Management, etc. We got you covered. You can adapt the application to your specific use cases.
1616
</h3>
1717
</div>
1818
</div>

‎src/app/page.tsx‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -109,7 +109,7 @@ export default function Home() {
109109
</section>
110110
<section
111111
id="faq-section"
112-
className="flex flex-col items-center justify-start w-screen md:h-screen"
112+
className="flex flex-col items-center justify-start w-screen pb-32"
113113
>
114114
<h2 className="text-center text-3xl text-white md:text-5xl xl:text-6xl leading-snug lg:leading-snug xl:leading-snug font-SpaceGrotesk font-semibold ">
115115
FAQs
@@ -126,7 +126,7 @@ export default function Home() {
126126
<h2 className="text-center text-4xl text-white lg:text-5xl xl:text-6xl leading-snug lg:leading-snug xl:leading-snug font-SpaceGrotesk font-semibold ">
127127
Our Sponsors
128128
</h2>
129-
<h3 className="text-center md:w-2/3 mx-6 text-white text-lg md:text-2xl lg:text-2xl xl:text-3xl leading-snug lg:leading-snug xl:leading-snug font-SpaceGrotesk font-light opacity-70 mt-2">
129+
<h3 className="text-center md:w-2/3 mx-6 text-white text-lg md:text-xl lg:text-xl xl:text-2xl leading-snug lg:leading-snug xl:leading-snug font-SpaceGrotesk font-light opacity-70 mt-2">
130130
As open source project maintainers, we strongly rely on external support to get the resources and time to work on keeping the project alive, with a constant release of new features, bug fixes and general improvements. Thanks to all the following Sponsors!
131131
</h3>
132132
<Slider isTestimonial={false} />

0 commit comments

Comments
 (0)