Skip to content

sujata / advithconsulting.io-frontend

Go to a project
Toggle navigation
Toggle navigation pinning
Commit 116ef55c by gaurav
Options

change

1 parent cb6b188a
Inline Side-by-side
Showing 2 changed files with 60 additions and 50 deletions
components/reuseables/IndustryClientele.js
import React from "react"; import React, { useRef, useEffect, useState } from "react";
import { Swiper, SwiperSlide } from "swiper/react";
import { Autoplay, Navigation } from "swiper/modules";
import Image from "next/image"; import Image from "next/image";
import SwiperNav from "./SwiperNav";
import { cleanImage } from "@/layout/imageHandling"; import { cleanImage } from "@/layout/imageHandling";
const IndustryClientele = ({ const IndustryClienteleMarquee = ({
partners = [], partners = [],
spaceBetween = 10,
autoplayDelay = 3000,
slidesPerViewBreakpoints = {
0: { slidesPerView: 2 },
576: { slidesPerView: 3 },
768: { slidesPerView: 4 },
992: { slidesPerView: 4 },
},
sliderClassName = "partner-slides position-relative",
itemClassName = "single-partner-item", itemClassName = "single-partner-item",
baseSpeed = 100, // Pixels per second
}) => { }) => {
console.log("clientlogo",partners) const trackRef = useRef(null);
const [animationDuration, setAnimationDuration] = useState(60);
useEffect(() => {
if (trackRef.current) {
const trackWidth = trackRef.current.scrollWidth;
const duration = trackWidth / baseSpeed;
setAnimationDuration(duration);
}
}, [partners, baseSpeed]);
return ( return (
<div className="partner-area pb-100"> <div className="partner-area pb-100 overflow-hidden">
<div className="container"> <div className="container">
<div className="position-relative"> <div className="marquee-wrapper position-relative">
<Swiper <div
spaceBetween={spaceBetween} className="marquee-track d-flex"
breakpoints={slidesPerViewBreakpoints} ref={trackRef}
loop={true} style={{ animationDuration: `${animationDuration}s` }}
autoplay={{ >
delay: autoplayDelay, {/* Duplicate for seamless effect */}
disableOnInteraction: true, {[...partners, ...partners].map((logo, index) => (
pauseOnMouseEnter: true, <div
}} className={`${itemClassName} d-flex justify-content-center align-items-center`}
// navigation={{ key={`${logo.id}-${index}`}
// nextEl: ".custom-swiper-button-next", style={{ flex: "0 0 auto", width: "250px", height: "80px" }}
// prevEl: ".custom-swiper-button-prev",
// }}
modules={[Autoplay]}
className={sliderClassName}
> >
{partners &&
partners?.map((logo) => (
<SwiperSlide className={itemClassName} key={logo.id}>
<div className="justify-content-center align-items-center ">
<Image <Image
alt={logo?.alternativeText ? logo?.alternativeText : "image"} alt={logo?.alternativeText || "partner logo"}
src={cleanImage(logo?.url)} src={cleanImage(logo?.url)}
fill width={120}
className="img-fluid image industry-logo" height={60}
className="img-fluid industry-logo"
/> />
</div> </div>
</SwiperSlide>
))} ))}
</Swiper>
{/* <div className="cust_nav text-center mt-md-4 mt-2">
<SwiperNav />
</div> */}
</div> </div>
</div> </div>
</div> </div>
<style jsx>{`
.marquee-wrapper {
width: 100%;
overflow: hidden;
position: relative;
}
.marquee-track {
display: flex;
width: max-content;
animation: scroll-left linear infinite;
}
@keyframes scroll-left {
0% {
transform: translateX(0%);
}
100% {
transform: translateX(-50%);
}
}
`}</style>
</div>
); );
}; };
export default IndustryClientele; export default IndustryClienteleMarquee;
pages/industry.js
...@@ -10,10 +10,10 @@ import IndustryClientele from "@/components/reuseables/IndustryClientele"; ...@@ -10,10 +10,10 @@ import IndustryClientele from "@/components/reuseables/IndustryClientele";
import ConversionCode from "@/components/reuseables/ConversionCode/ConversionCode"; import ConversionCode from "@/components/reuseables/ConversionCode/ConversionCode";
const industry = ({ IndustryPage , conversionData }) => { const industry = ({ IndustryPage, conversionData }) => {
console.log("conatct", IndustryPage) console.log("conatct", IndustryPage)
const dynamicdata = IndustryPage?.IndustryDetails; const dynamicdata = IndustryPage?.IndustryDetails;
console.log(dynamicdata , "dynamicdata") console.log(dynamicdata, "dynamicdata")
const banners = [ const banners = [
{ {
imageSrc: cleanImage(IndustryPage?.Banner?.Image?.url), imageSrc: cleanImage(IndustryPage?.Banner?.Image?.url),
...@@ -41,7 +41,7 @@ const industry = ({ IndustryPage , conversionData }) => { ...@@ -41,7 +41,7 @@ const industry = ({ IndustryPage , conversionData }) => {
console.log("section", section); console.log("section", section);
switch (section.__component) { switch (section.__component) {
case "layout.industry-overview": case "layout.industry-overview":
return <IndustryOverview title={section?.title} subtitle={section?.subtitle} description={section?.Description} image={section?.Image}/>; return <IndustryOverview title={section?.title} subtitle={section?.subtitle} description={section?.Description} image={section?.Image} />;
case "layout.cfo-service": case "layout.cfo-service":
return <IndustryTab return <IndustryTab
serviceTitle={section?.Title} serviceTitle={section?.Title}
...@@ -113,7 +113,7 @@ export async function getServerSideProps() { ...@@ -113,7 +113,7 @@ export async function getServerSideProps() {
const conversionData = response2.data.data; const conversionData = response2.data.data;
return { return {
props: { IndustryPage , conversionData }, props: { IndustryPage, conversionData },
}; };
} catch (error) { } catch (error) {
console.log("Error", error); console.log("Error", error);
......
Styling with Markdown is supported
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!