Svelte + tailwindcss image preview with zoom

Svelte component to display and zoom on product images

install

$npm i @fouita/images-carousel-zoom -D

Responsive display

How to use?

<script>
    import ImgZoom from '@fouita/images-carousel-zoom'
    const base_url = "https://multimedia.bbycastatic.ca/multimedia/products/500x500/130/13021"
</script>

<ImgZoom images ={
    selected :`${base_url}/13021743.jpg`,
    List :  [
     `${base_url}/13021743.jpg`,
     `${base_url}/13021743_1.jpg`,
     `${base_url}/13021743_2.jpg`,
     `${base_url}/13021743_3.jpg`,
     `${base_url}/13021743_4.jpg`
    ]
   } >

Requirements

• Tailwindcss
• Svelte project

About

Fouita : UI framework for svelte + tailwind components