From ef7cfccab8acbe6e45e446447bc32a525d2ff142 Mon Sep 17 00:00:00 2001
From: James Purser <james@angrybeanie.com>
Date: Sun, 10 Dec 2023 15:22:32 +1100
Subject: [PATCH] Added basic carousel to gallery page

---
 components/css/styles.css     | 10 +++++-
 components/gallerycarousel.js | 66 +++++++++++++++++++++--------------
 pages/gallery/[gallery].js    |  4 ++-
 3 files changed, 51 insertions(+), 29 deletions(-)

diff --git a/components/css/styles.css b/components/css/styles.css
index 6f9ac76..ccc4762 100755
--- a/components/css/styles.css
+++ b/components/css/styles.css
@@ -89,7 +89,7 @@
   }
   
   .show_block{
-    *display: inline;
+    display: inline;
     zoom: 1;
     height: 100%;
     padding: 5px;
@@ -306,4 +306,12 @@
 
   table td {
     font-size: 1em;
+  }
+
+  .carousel {
+    height: 100%
+  }
+
+  .carousel-item {
+    display: block
   }
\ No newline at end of file
diff --git a/components/gallerycarousel.js b/components/gallerycarousel.js
index abbce7c..e47e633 100755
--- a/components/gallerycarousel.js
+++ b/components/gallerycarousel.js
@@ -1,33 +1,45 @@
 import Image from "next/legacy/image";
 import { Navigation, Pagination, Scrollbar, A11y,  Autoplay  } from 'swiper';
-import { Swiper, SwiperSlide } from 'swiper/react';
-import 'swiper/css';
-import 'swiper/css/navigation';
-import 'swiper/css/pagination';
-import 'swiper/css/scrollbar';
+import { Carousel, CarouselItem } from "react-bootstrap";
+import { useState } from "react";
+import Link from 'next/link'
 
-const GalleryCarousel = ({galleryImages, basepath}) => {
-    console.log(galleryImages.data[0])
-    return(
-        <Swiper
-        modules={[Navigation, Pagination, Scrollbar, A11y, Autoplay]}
-        spaceBetween={50}
-        slidesPerView={1}
-        onSlideChange={() => console.log('slide change')}
-        onSwiper={(swiper) => console.log(swiper)}
-        scrollbar={{ draggable: true }}
-        >
-            {galleryImages.data.map(item => (
-                <SwiperSlide
-                    key={item.attributes.Title}
-                >
-                    <img 
-                        src={basepath + item.attributes.Image.data.attributes.formats.medium.url}
-                        alt={item.attributes.Title}></img>
-                </SwiperSlide>
-            ))}
-        </Swiper>
-    )
+const GalleryCarousel = ({galleryImages, basepath, gallery}) => {
+    const bootstrap = galleryImages.data;
+    const [index, setIndex] = useState(0);
+
+    console.log(bootstrap)
+
+    const handleSelect = (selectedIndex, e) => {
+        setIndex(selectedIndex);
+      };
+
+      return(
+        <Carousel activeIndex={index} onSelect={handleSelect} fade>
+            {bootstrap.map((item => 
+                <Carousel.Item key={item.id} interval={4000}>
+                  <Link href={"/gallery/" + gallery.attributes.Slug + "/" + item.attributes.Slug}><Image 
+                                  src={basepath + item.attributes.Image.data.attributes.formats.large.url}
+                                  style={{
+                                    width: '100%',
+                                    height: 'auto',
+                                  }}
+                                  height={item.attributes.Image.data.attributes.formats.large.height}
+                                  width={item.attributes.Image.data.attributes.formats.large.width}
+                                  key={item.attributes.id}
+                                  //className="card-img-top"
+                                  alt={item.attributes.Title}
+                                  ></Image></Link>
+                <Carousel.Caption >
+                  <h3>{item.title}</h3>
+                  <p>{item.body}</p>
+                </Carousel.Caption>
+              </Carousel.Item>
+                )
+            )}
+
+        </Carousel>
+      )
 }
 
 export default GalleryCarousel
\ No newline at end of file
diff --git a/pages/gallery/[gallery].js b/pages/gallery/[gallery].js
index fb00de2..0f12e02 100644
--- a/pages/gallery/[gallery].js
+++ b/pages/gallery/[gallery].js
@@ -5,6 +5,7 @@ import { getGallery, getGalleryImages } from "../../data/external/cms.js"
 import GalleryPager from "../../components/gallerypager.js"
 import Head from 'next/head'
 import config from "../../data/internal/config.js"
+import GalleryCarousel from "../../components/gallerycarousel.js"
 
 export async function getServerSideProps(context) {
 
@@ -47,7 +48,8 @@ const Gallery = ({pagedata, gallery, galleryImages, serverRuntimeConfig, og_imag
             <meta name="og:description" content={ gallery.attributes.Description } key="description"></meta>
         </Head>
             <h1 className="page_title col-sm-12">{gallery.attributes.Title}</h1>
-            <GalleryPager galleryImages={galleryImages} basepath={serverRuntimeConfig.media_path} gallery={gallery}></GalleryPager>
+            <GalleryCarousel galleryImages={galleryImages} basepath={serverRuntimeConfig.media_path} gallery={gallery}></GalleryCarousel>
+           <GalleryPager galleryImages={galleryImages} basepath={serverRuntimeConfig.media_path} gallery={gallery}></GalleryPager>
         </Layout>
     )
 }