feat: href for carousel (#1047)

* feat: href for carousel

* fix: better link

src/lib/carousels/Carousel.svelte

@@ -14,15 +14,16 @@
   import { twMerge } from 'tailwind-merge';
   import Controls from './Controls.svelte';
   import Indicators from './Indicators.svelte';
+  import Slide from './Slide.svelte';
 
   type TransitionFunc = (node: HTMLElement, params: any) => TransitionConfig;
 
   export let images: HTMLImgAttributes[];
   export let index: number = 0;
   export let transition: TransitionFunc = (x) => fade(x, { duration: 700, easing: quintOut });
   export let duration: number = 0;
-  export let ariaLabel: string = 'Draggable Carousel'; 
-  
+  export let ariaLabel: string = 'Draggable Carousel';
+
   // Carousel
   let divClass: string = 'overflow-hidden relative rounded-lg h-56 sm:h-64 xl:h-80 2xl:h-96';
 
@@ -149,9 +150,9 @@
 <svelte:document on:mousemove={onDragMove} on:mouseup={onDragStop} on:touchmove={onDragMove} on:touchend={onDragStop} />
 <div bind:this={carouselDiv} class="relative" on:mousedown={onDragStart} on:touchstart|passive={onDragStart} role="button" aria-label={ariaLabel} tabindex="0">
   <div style={`transform: translateX(${percentOffset}%)`} {...$$restProps} class={twMerge(divClass, activeDragGesture === undefined ? 'transition-transform' : '', $$props.class)} use:loop={duration}>
-    {#key images[index]}
-      <img alt="..." {...images[index]} transition:transition={{}} class="absolute block w-full -translate-x-1/2 -translate-y-1/2 top-1/2 left-1/2 object-cover" />
-    {/key}
+    <slot name="slide" {Slide} {index}>
+      <Slide image={images[index]} {transition} />
+    </slot>
   </div>
   <slot {index} {Controls} {Indicators} />
 </div>

src/lib/carousels/Slide.svelte

@@ -0,0 +1,14 @@
+<script lang="ts">
+  import { quintOut } from 'svelte/easing';
+  import type { HTMLImgAttributes } from 'svelte/elements';
+  import { fade, type TransitionConfig } from 'svelte/transition';
+
+  type TransitionFunc = (node: HTMLElement, params: any) => TransitionConfig;
+
+  export let image: HTMLImgAttributes;
+  export let transition: TransitionFunc = (x) => fade(x, { duration: 700, easing: quintOut });
+</script>
+
+{#key image}
+  <img alt="..." {...image} transition:transition={{}} class="absolute block w-full -translate-x-1/2 -translate-y-1/2 top-1/2 left-1/2 object-cover" />
+{/key}

src/routes/docs/components/carousel.md

@@ -166,6 +166,26 @@ The `Carousel` exposes the `change` event containing info about the currently di
 </div>
 ```
 
+## Carousel with links
+
+You can use `slot="slide"` and internal component `Slide` to control the image display. Here's an example how to wrap images with the anchor element.
+
+```svelte example
+<script>
+  import { Carousel } from 'flowbite-svelte';
+  import { images } from './imageData/+server.js';
+</script>
+
+<div class="max-w-4xl space-y-4">
+  <Carousel {images} duration={3900} let:Indicators>
+    <a slot="slide" href="http://google.com/search?q={images[index].title}" target="_blank" let:Slide let:index>
+      <Slide image={images[index]} />
+    </a>
+    <Indicators />
+  </Carousel>
+</div>
+```
+
 ## Customization
 
 ### Basic customization