44 lines
No EOL
1.7 KiB
JavaScript
Executable file
44 lines
No EOL
1.7 KiB
JavaScript
Executable file
import Image from "next/legacy/image";
|
|
import { Navigation, Pagination, Scrollbar, A11y, Autoplay } from 'swiper';
|
|
import { Carousel, CarouselItem } from "react-bootstrap";
|
|
import { useState } from "react";
|
|
import Link from 'next/link'
|
|
|
|
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.attributes.Title}</h3>
|
|
</Carousel.Caption>
|
|
</Carousel.Item>
|
|
)
|
|
)}
|
|
|
|
</Carousel>
|
|
)
|
|
}
|
|
|
|
export default GalleryCarousel |