Merge pull request #4 from Brahmware:add-carousel-home

Add-carousel-home
Brahmware · Sep 8, 2023 · 7130fee · 7130fee
2 parents 1f35976 + 84cb435
commit 7130fee
Show file tree

Hide file tree

Showing 9 changed files with 16 additions and 3 deletions.
diff --git a/public/images/home/container-1/slide-1-blur.png b/public/images/home/container-1/slide-1-blur.png
diff --git a/public/images/home/container-1/slide-2-blur.png b/public/images/home/container-1/slide-2-blur.png
diff --git a/public/images/home/container-1/slide-3-blur.png b/public/images/home/container-1/slide-3-blur.png
diff --git a/public/images/home/container-1/slide-4-blur.png b/public/images/home/container-1/slide-4-blur.png
diff --git a/public/images/home/container-1/slide-5-blur.png b/public/images/home/container-1/slide-5-blur.png
diff --git a/public/images/home/container-1/slide-6-blur.png b/public/images/home/container-1/slide-6-blur.png
diff --git a/src/components/Carousel/DynamicSlides/UnitSlide/index.tsx b/src/components/Carousel/DynamicSlides/UnitSlide/index.tsx
@@ -16,6 +16,7 @@ const UnitSlide: React.FC<UnitSlideProps> = ({
   image,
   tagline,
   title,
+  bluredImage,
   id,
   description,
   link,
@@ -40,10 +41,12 @@ const UnitSlide: React.FC<UnitSlideProps> = ({
       data-splide-interval={pauseTime}
     >
       <StyledImage
-        width="900"
-        height="600"
         src={image}
         alt={title}
+        placeholder='blur'
+        blurDataURL={bluredImage}
+        width="1920"
+        height="1080"
       />
       <CarouselDataCard
         title={title}

diff --git a/src/components/Carousel/DynamicSlides/index.tsx b/src/components/Carousel/DynamicSlides/index.tsx
@@ -21,10 +21,13 @@ const options: SplideProps["options"] = {
   pauseOnHover: false,
   gap: theme.Spaces.md,
   padding: theme.Spaces.mega,
+  keyboard: 'global',
+  preloadPages: 2,
+  interval: carouselData[0].pauseTime,
 
   breakpoints: {
     1024: {
-      padding: '0',
+      padding: 0,
     },
   },
 };

diff --git a/src/components/Carousel/carouselData.ts b/src/components/Carousel/carouselData.ts
@@ -4,6 +4,7 @@ export interface CarouselData {
   title: string;
   description: string;
   image: string;
+  bluredImage?: string;
   pauseTime?: number;
   link: string;
 }
@@ -15,6 +16,7 @@ const carouselData : CarouselData[] = [
     title: "Discover Bharat",
     description: "This is an Indian family of informational, educational and entertainment-oriented Television, Applications and Websites offering value to how Education is developed and accessed by Global Societies.",
     image: "/images/home/container-1/slide-1.jpg",
+    bluredImage: "/images/home/container-1/slide-1-blur.png",
     pauseTime: 30000,
     link: "/",
   },
@@ -24,6 +26,7 @@ const carouselData : CarouselData[] = [
     title: "Discover Bharat",
     description: "This is an Indian family of informational, educational and entertainment-oriented Television, Applications and Websites offering value to how Education is developed and accessed by Global Societies.",
     image: "/images/home/container-1/slide-2.jpg",
+    bluredImage: "/images/home/container-1/slide-2-blur.png",
     pauseTime: 10000,
     link: "/",
   },
@@ -33,6 +36,7 @@ const carouselData : CarouselData[] = [
     title: "Discover Bharat",
     description: "This is an Indian family of informational, educational and entertainment-oriented Television, Applications and Websites offering value to how Education is developed and accessed by Global Societies.",
     image: "/images/home/container-1/slide-3.jpg",
+    bluredImage: "/images/home/container-1/slide-3-blur.png",
     pauseTime: 15000,
     link: "/",
   },
@@ -42,6 +46,7 @@ const carouselData : CarouselData[] = [
     title: "Discover Bharat",
     description: "This is an Indian family of informational, educational and entertainment-oriented Television, Applications and Websites offering value to how Education is developed and accessed by Global Societies.",
     image: "/images/home/container-1/slide-4.jpg",
+    bluredImage: "/images/home/container-1/slide-4-blur.png",
     pauseTime: 10000,
     link: "/",
   },
@@ -51,6 +56,7 @@ const carouselData : CarouselData[] = [
     title: "Discover Bharat",
     description: "This is an Indian family of informational, educational and entertainment-oriented Television, Applications and Websites offering value to how Education is developed and accessed by Global Societies.",
     image: "/images/home/container-1/slide-5.jpg",
+    bluredImage: "/images/home/container-1/slide-5-blur.png",
     pauseTime: 20000,
     link: "/",
   },
@@ -60,6 +66,7 @@ const carouselData : CarouselData[] = [
     title: "Discover Bharat",
     description: "This is an Indian family of informational, educational and entertainment-oriented Television, Applications and Websites offering value to how Education is developed and accessed by Global Societies.",
     image: "/images/home/container-1/slide-6.jpg",
+    bluredImage: "/images/home/container-1/slide-6-blur.png",
     pauseTime: 8000,
     link: "/",
   },