I have been working on a project that requires a Carousel, and I decided to incorporate the flowbit-svelte carousel into my svelte project. While the carousel is functioning well, I am facing an issue with the component size. It seems to be cutting off my images and is restricted to a fixed size. I have gone through the flowbit-svelte carousel documentation but have not been able to find a solution. Can someone please assist me?
<script>
import { Carousel } from 'flowbite-svelte';
import { scale } from 'svelte/transition';
import { quintOut } from 'svelte/easing';
const scaleAnimation = (x) => scale(x, { duration: 500, easing: quintOut });
export let images = [];
</script>
<div class="carousel-container aspect-4/3 sm-h-full w-3/4 object-cover sm:w-full">
<Carousel {images} transition={scaleAnimation} duration="7000" let:Controls let:Indicators>
<Controls />
<Indicators />
</Carousel>
</div>
<style>
</style>
This is the code snippet and:
the size of the carousel at 100% browser window size is:
the size of the carousel at 200% browser window size is:
I would like the 200% size to be displayed at 100% browser window size. Any suggestions on how to achieve this adjustment in the tailwind CSS property for the carousel to show the entire image size properly would be greatly appreciated.