Updated content

Fixed carousel in news
This commit is contained in:
Julio Ruiz 2026-02-12 19:40:22 -05:00
parent aae5591b1c
commit 5d233a409f
4 changed files with 38 additions and 24 deletions

View File

@ -16,7 +16,7 @@ const { images } = Astro.props;
<div class="swiper-slide"> <div class="swiper-slide">
<div class="flex! flex-col items-center justify-center relative"> <div class="flex! flex-col items-center justify-center relative">
<div class="uppercase text-2xl lg:text-9xl text-white shadow-2xl absolute font-secondary"> <div class="uppercase text-2xl lg:text-9xl text-white text-shadow-lg absolute font-secondary">
{image.text} {image.text}
</div> </div>
<Image src={image.image} alt="" /> <Image src={image.image} alt="" />
@ -42,23 +42,24 @@ const { images } = Astro.props;
<script> <script>
import Swiper from "swiper"; import Swiper from "swiper";
import { Navigation, Pagination, Scrollbar } from 'swiper/modules'; const swiper = new Swiper(".swiper", {
// Optional parameters
const swiper = new Swiper('.swiper', {
modules: [Navigation, Pagination, Scrollbar],
loop: true, loop: true,
navigation: { // If we need pagination
nextEl: '.swiper-button-next',
prevEl: '.swiper-button-prev',
},
pagination: { pagination: {
el: '.swiper-pagination', el: ".swiper-pagination",
}, },
// Navigation arrows
navigation: {
nextEl: ".swiper-button-next",
prevEl: ".swiper-button-prev",
},
// And if we need scrollbar
scrollbar: { scrollbar: {
el: '.swiper-scrollbar', el: ".swiper-scrollbar",
}, },
}); });
</script> </script>

View File

@ -13,7 +13,10 @@ const news = defineCollection({
country: z.string().optional(), country: z.string().optional(),
thumbnail: z.string().optional(), thumbnail: z.string().optional(),
youtube: z.string().optional(), youtube: z.string().optional(),
gallery: z.string().array().optional().nullable() gallery: z.array(z.object({
image: z.string().optional(),
text: z.string().optional()
})).optional().nullable()
}), }),
}); });

View File

@ -9,11 +9,21 @@ country: 'CO'
thumbnail: https://ik.imagekit.io/crpy/JBP-CONDECORACION-25.webp thumbnail: https://ik.imagekit.io/crpy/JBP-CONDECORACION-25.webp
youtube: https://www.youtube.com/watch?v=ENQE4stFb4A youtube: https://www.youtube.com/watch?v=ENQE4stFb4A
gallery: [ gallery: [
'https://ik.imagekit.io/crpy/JBP-CONDECORACION-16.webp', {
'https://ik.imagekit.io/crpy/JBP-CONDECORACION-05.webp', image: 'https://ik.imagekit.io/crpy/JBP-CONDECORACION-16.webp',
'https://ik.imagekit.io/crpy/JBP-CONDECORACION-22.webp', },
'https://ik.imagekit.io/crpy/JBP-CONDECORACION-04.webp', {
'https://ik.imagekit.io/crpy/JBP-CONDECORACION-25.webp' image: 'https://ik.imagekit.io/crpy/JBP-CONDECORACION-05.webp',
},
{
image: 'https://ik.imagekit.io/crpy/JBP-CONDECORACION-22.webp',
},
{
image: 'https://ik.imagekit.io/crpy/JBP-CONDECORACION-04.webp',
},
{
image: 'https://ik.imagekit.io/crpy/JBP-CONDECORACION-25.webp'
}
] ]
--- ---

View File

@ -41,7 +41,7 @@ const { Content } = await render(post);
{post.data.gallery && ( {post.data.gallery && (
post.data.gallery.map(galleryImage => ( post.data.gallery.map(galleryImage => (
<Image src={galleryImage} alt="" /> <Image src={galleryImage.image} alt={galleryImage.text} />
)) ))
)} )}