Added basic carousel to gallery page

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
   }

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 { Carousel, CarouselItem } from "react-bootstrap";
-import 'swiper/css';
+import { useState } from "react";
-import 'swiper/css/navigation';
+import Link from 'next/link'
-import 'swiper/css/pagination';
-import 'swiper/css/scrollbar';
 
-const GalleryCarousel = ({galleryImages, basepath}) => {
+const GalleryCarousel = ({galleryImages, basepath, gallery}) => {
-    console.log(galleryImages.data[0])
+    const bootstrap = galleryImages.data;
-    return(
+    const [index, setIndex] = useState(0);
-        <Swiper
+
-        modules={[Navigation, Pagination, Scrollbar, A11y, Autoplay]}
+    console.log(bootstrap)
-        spaceBetween={50}
+
-        slidesPerView={1}
+    const handleSelect = (selectedIndex, e) => {
-        onSlideChange={() => console.log('slide change')}
+        setIndex(selectedIndex);
-        onSwiper={(swiper) => console.log(swiper)}
+      };
-        scrollbar={{ draggable: true }}
+
-        >
+      return(
-            {galleryImages.data.map(item => (
+        <Carousel activeIndex={index} onSelect={handleSelect} fade>
-                <SwiperSlide
+            {bootstrap.map((item => 
-                    key={item.attributes.Title}
+                <Carousel.Item key={item.id} interval={4000}>
-                >
+                  <Link href={"/gallery/" + gallery.attributes.Slug + "/" + item.attributes.Slug}><Image 
-                    <img 
+                                  src={basepath + item.attributes.Image.data.attributes.formats.large.url}
-                        src={basepath + item.attributes.Image.data.attributes.formats.medium.url}
+                                  style={{
-                        alt={item.attributes.Title}></img>
+                                    width: '100%',
-                </SwiperSlide>
+                                    height: 'auto',
-            ))}
+                                  }}
-        </Swiper>
+                                  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

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>
     )
 }