purserj/angrybeanie-front-end
1
0
Fork 0
Code Issues 1 Pull requests Projects Releases Packages Wiki Activity Actions

Added basic carousel to gallery page

Browse source
This commit is contained in:
James Purser 2023-12-10 15:22:32 +11:00
parent 8cbb19ee78
commit ef7cfccab8
3 changed files with 51 additions and 29 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

10
components/css/styles.css
View file

@ -89,7 +89,7 @@
}
.show_block{
*display: inline;
display: inline;
zoom: 1;
height: 100%;
padding: 5px;
@ -307,3 +307,11 @@
table td {
font-size: 1em;
}
.carousel {
height: 100%
}
.carousel-item {
display: block
}

66
components/gallerycarousel.js
View file

@ -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

4
pages/gallery/[gallery].js
View file

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