{"id":27837,"date":"2023-07-31T07:00:00","date_gmt":"2023-07-31T14:00:00","guid":{"rendered":"http:\/\/how-to-create-a-carousel-in-3-ways-in-svelte"},"modified":"2025-10-29T13:05:52","modified_gmt":"2025-10-29T20:05:52","slug":"how-to-create-a-carousel-in-3-ways-in-svelte","status":"publish","type":"post","link":"https:\/\/cloudinary.com\/blog\/how-to-create-a-carousel-in-3-ways-in-svelte","title":{"rendered":"3 Ways to Create a Svelte Carousel"},"content":{"rendered":"<div class=\"wp-block-cloudinary-markdown \"><p>Carousels, referred to as image sliders or sliders, provide an improved visual experience on websites by highlighting essential aspects of a product, service, or value proposition.<\/p>\n<p>An <a href=\"https:\/\/cloudinary.com\/glossary\/image-carousels\">image carousel<\/a> is a series of images that are moved automatically with a timer or manually using some buttons.<\/p>\n<p>This article discusses three different ways you can add carousels to a Svelte application. You\u2019ll get a Svelte carousel example for each of svelte-carousel, siema carousel, and svelte-transition.<\/p>\n<h2>Sandbox<\/h2>\n<p>The completed project is on CodeSandbox. Fork it via the link in the sandbox and run it to quickly get started.<\/p>\n<\/div>\n\n\n  <div class=\"wp-block-cloudinary-code-sandbox \">\n    <iframe\n      src=\"https:\/\/codesandbox.io\/embed\/svelte-carousels-8qk3br?theme=dark&amp;codemirror=1&amp;highlights=&amp;editorsize=50&amp;fontsize=14&amp;expanddevtools=0&amp;hidedevtools=0&amp;eslint=0&amp;forcerefresh=0&amp;hidenavigation=0&amp;initialpath=%2F&amp;module=&amp;moduleview=0&amp;previewwindow=&amp;view=&amp;runonclick=1\"\n      height=\"500\"\n      style=\"width: 100%;\"\n      title=\"svelte-carousels\"\n      loading=\"lazy\"\n      allow=\"accelerometer; ambient-light-sensor; camera; encrypted-media; geolocation; gyroscope; hid; microphone; midi; payment; usb; vr; xr-spatial-tracking\"\n      sandbox=\"allow-forms allow-modals allow-popups allow-presentation allow-same-origin allow-scripts\"\n    ><\/iframe>\n  <\/div>\n\n\n<div class=\"wp-block-cloudinary-markdown \"><p>View the source code on <a href=\"https:\/\/github.com\/Tundesamson26\/svelte-carousel\">Github<\/a>.<\/p>\n<h2>Prerequisites<\/h2>\n<p>Before we start creating a Svelte image carousel, you should have:<\/p>\n<ul>\n<li>A basic understanding of HTML, CSS, and JavaScript.<\/li>\n<li>Node and its package manager, npm (we run the command <code>node -v &amp;&amp; npm -v<\/code> to verify we have them installed or install them from here).<\/li>\n<li>A Cloudinary account for storing and delivering our images. You can <a href=\"https:\/\/cloudinary.com\/users\/register\/free\">create a Cloudinary account<\/a> for free and for life and get full Cloudinary functionality, including of course, handling the Svelte image carousel.<\/li>\n<li>Knowledge of Svelte, which will help you follow this tutorial more easily.<\/li>\n<\/ul>\n<h2>Setting Up a Svelte Project<\/h2>\n<p>Svelte is a radical new approach to building user interfaces. Svelte is a compiler and syntax. The entire Svelte project compiles into a single JavaScript file; it\u2019s not an external library included in the bundle like React, which allows Svelte projects to be tiny and fast.<\/p>\n<p>To set up our Svelte carousel project, we\u2019ll open our terminal or command line and run:<\/p>\n<pre class=\"js-syntax-highlighted\"><code>npx degit sveltejs\/template svelte-carousel\nnpm install\nnpm run dev\n<\/code><\/pre>\n<p>This will create a new project in the Svelte carousel directory, install its dependencies, and start a server on <a href=\"http:\/\/localhost:8080\">http:\/\/localhost:8080<\/a>.<\/p>\n<p><img decoding=\"async\" src=\"https:\/\/cloudinary-marketing-res.cloudinary.com\/image\/upload\/c_limit,w_2000\/f_auto\/q_auto\/media_jams_sanity\/406c5a90073005ced91c50f535f9d8a58b583ad2-1142x592.png\" alt=\"Image Screenshot of the Svelte welcome page used in the Svelte image carousel project\" loading=\"lazy\" class=\"c-transformed-asset\"  width=\"1142\" height=\"592\"\/><\/p>\n<p>Carousels don\u2019t automatically create optimal slide dimensions. We\u2019ll use additional utilities or custom styles to size it appropriately.<\/p>\n<h2>Uploading Images to Cloudinary<\/h2>\n<p>Cloudinary allows us to upload images via the dashboard by clicking the <strong>Media Library<\/strong> tab.<\/p>\n<p><img decoding=\"async\" src=\"https:\/\/cloudinary-marketing-res.cloudinary.com\/image\/upload\/c_limit,w_2000\/f_auto\/q_auto\/media_jams_sanity\/eaca9fbd3f2642964087be0558e0160020973b2f-889x46.png\" alt=\"Image showing screenshot of the Cloudinary media library used in the Svelte image carousel project\" loading=\"lazy\" class=\"c-transformed-asset\"  width=\"889\" height=\"46\"\/><\/p>\n<p>Next, we\u2019ll need to copy the publicId for the saved images from our dashboard, which will be necessary to generate the article banner.<\/p>\n<p><img decoding=\"async\" src=\"https:\/\/cloudinary-marketing-res.cloudinary.com\/image\/upload\/c_limit,w_2000\/f_auto\/q_auto\/media_jams_sanity\/672e0420f39fdd64b3e87dad7ff06af30d32bf36-815x347.png\" alt=\"Image showing screenshot of the Cloudinary media library with the images to be used in the Svelte image carousel project \u2013 including an image of a building, a person in the woods, and a woman standing in an industrial setting\" loading=\"lazy\" class=\"c-transformed-asset\"  width=\"815\" height=\"347\"\/><\/p>\n<h2>Svelte Carousel Example 1: Svelte Carousel<\/h2>\n<p><a href=\"https:\/\/github.com\/vadimkorr\/svelte-carousel#readme\">Svelte-carousel<\/a> is an incredible component for Svelte 3. This carousel automatically cycles through a series of images, text, or custom markup. It supports next\/prev controls and also supports indicators.<\/p>\n<p>We\u2019ll start by installing the <code>svelte-carousel<\/code> with the following command so that we have access to the carousel component:<\/p>\n<pre class=\"js-syntax-highlighted\"><code>npm install svelte-carousel\n<\/code><\/pre>\n<p>Next, let\u2019s create a carousels folder in the <code>src<\/code> directory, and inside the folder, create <code>SvelteCarousel.svelte<\/code> file with the following code:<\/p>\n<pre class=\"js-syntax-highlighted\" aria-describedby=\"shcb-language-1\" data-shcb-language-name=\"HTML, XML\" data-shcb-language-slug=\"xml\"><span><code class=\"hljs language-xml shcb-wrap-lines\"><span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">script<\/span>&gt;<\/span><span class=\"javascript\">\n  <span class=\"hljs-keyword\">import<\/span> Carousel <span class=\"hljs-keyword\">from<\/span> <span class=\"hljs-string\">\"svelte-carousel\"<\/span>;\n  <span class=\"hljs-keyword\">const<\/span> images = &#91;\n    {\n      <span class=\"hljs-attr\">url<\/span>: <span class=\"hljs-string\">\"https:\/\/res.cloudinary.com\/beswift\/image\/upload\/v1650391490\/photo-1644241687200-eadaf7601290_xcz2kh.jpg\"<\/span>,\n      <span class=\"hljs-attr\">description<\/span>: <span class=\"hljs-string\">\"image1\"<\/span>,\n    },\n    {\n      <span class=\"hljs-attr\">url<\/span>: <span class=\"hljs-string\">\"https:\/\/res.cloudinary.com\/beswift\/image\/upload\/v1650391337\/photo-1647067867267-e01d98462f3c_ugtnwe.jpg\"<\/span>,\n      <span class=\"hljs-attr\">description<\/span>: <span class=\"hljs-string\">\"image2\"<\/span>,\n    },\n    {\n      <span class=\"hljs-attr\">url<\/span>: <span class=\"hljs-string\">\"https:\/\/res.cloudinary.com\/beswift\/image\/upload\/v1650391131\/photo-1648800475313-2bb7fbec8701_ae60yw.jpg\"<\/span>,\n      <span class=\"hljs-attr\">description<\/span>: <span class=\"hljs-string\">\"image3\"<\/span>,\n    },\n    {\n      <span class=\"hljs-attr\">url<\/span>: <span class=\"hljs-string\">\"https:\/\/res.cloudinary.com\/beswift\/image\/upload\/v1650390102\/photo-1649894222226-056a1a79d9fb_xlv73h.jpg\"<\/span>,\n      <span class=\"hljs-attr\">description<\/span>: <span class=\"hljs-string\">\"image4\"<\/span>,\n    },\n    {\n      <span class=\"hljs-attr\">url<\/span>: <span class=\"hljs-string\">\"https:\/\/res.cloudinary.com\/beswift\/image\/upload\/v1650389425\/photo-1649894221695-45abb718a190_sgjhwd.jpg\"<\/span>,\n      <span class=\"hljs-attr\">description<\/span>: <span class=\"hljs-string\">\"image5\"<\/span>,\n    },\n  ];\n  <span class=\"hljs-keyword\">let<\/span> carousel; <span class=\"hljs-comment\">\/\/ for calling methods of the carousel instance<\/span>\n  <span class=\"hljs-keyword\">const<\/span> handleNextClick = <span class=\"hljs-function\"><span class=\"hljs-params\">()<\/span> =&gt;<\/span> {\n    carousel.goToNext();\n  };\n<\/span><span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">script<\/span>&gt;<\/span>\n\n<span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">Carousel<\/span>\n    <span class=\"hljs-attr\">bind:this<\/span>=<span class=\"hljs-string\">{carousel}<\/span>\n    <span class=\"hljs-attr\">let:loaded<\/span>\n    <span class=\"hljs-attr\">autoplay<\/span>\n    <span class=\"hljs-attr\">autoplayDuration<\/span>=<span class=\"hljs-string\">{3000}<\/span>\n    <span class=\"hljs-attr\">autoplayProgressVisible<\/span>\n&gt;<\/span>\n    {#each images as src, imageIndex (src)}\n      <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">div<\/span> <span class=\"hljs-attr\">class<\/span>=<span class=\"hljs-string\">\"img-container\"<\/span>&gt;<\/span>\n        {#if loaded.includes(imageIndex)}\n          <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">img<\/span> <span class=\"hljs-attr\">src<\/span>=<span class=\"hljs-string\">{src.url}<\/span> <span class=\"hljs-attr\">alt<\/span>=<span class=\"hljs-string\">{src.description}<\/span> <span class=\"hljs-attr\">width<\/span>=<span class=\"hljs-string\">{1000}<\/span> <span class=\"hljs-attr\">height<\/span>=<span class=\"hljs-string\">{600}<\/span> \/&gt;<\/span>\n        {\/if}\n      <span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">div<\/span>&gt;<\/span>\n    {\/each}\n<span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">Carousel<\/span>&gt;<\/span>\n<\/code><\/span><small class=\"shcb-language\" id=\"shcb-language-1\"><span class=\"shcb-language__label\">Code language:<\/span> <span class=\"shcb-language__name\">HTML, XML<\/span> <span class=\"shcb-language__paren\">(<\/span><span class=\"shcb-language__slug\">xml<\/span><span class=\"shcb-language__paren\">)<\/span><\/small><\/pre>\n<p>From the code snippet above, we\u2019ll:<\/p>\n<ul>\n<li>Import the <code>Carousel<\/code> dependency from <code>svelte-carousel<\/code>.<\/li>\n<li>Create an array of items that contain the URL and descriptions of the images.<\/li>\n<li>Create a variable called <code>carousel<\/code> for calling methods of the carousel instance.<\/li>\n<li>Declare a <code>handleNextClick()<\/code> function.<\/li>\n<li>Loop through the array with <code>#each<\/code> and then use the <code>src<\/code> as the key for the loop.<\/li>\n<\/ul>\n<p>In the <code>App.svelte<\/code>, let\u2019s clean it up, import the <code>SvelteCarousel.svelte<\/code> component, and render it.<\/p>\n<pre class=\"js-syntax-highlighted\" aria-describedby=\"shcb-language-2\" data-shcb-language-name=\"HTML, XML\" data-shcb-language-slug=\"xml\"><span><code class=\"hljs language-xml shcb-wrap-lines\"><span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">script<\/span>&gt;<\/span><span class=\"javascript\">\n    <span class=\"hljs-keyword\">import<\/span> Carousel <span class=\"hljs-keyword\">from<\/span> <span class=\"hljs-string\">'.\/carousels\/SvelteCarousel.svelte'<\/span> \n<\/span><span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">script<\/span>&gt;<\/span>\n\n<span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">main<\/span>&gt;<\/span>\n    <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">h1<\/span>&gt;<\/span>Svelte-carousel<span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">h1<\/span>&gt;<\/span>\n    <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">Carousel<\/span> \/&gt;<\/span>\n<span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">main<\/span>&gt;<\/span>\n<\/code><\/span><small class=\"shcb-language\" id=\"shcb-language-2\"><span class=\"shcb-language__label\">Code language:<\/span> <span class=\"shcb-language__name\">HTML, XML<\/span> <span class=\"shcb-language__paren\">(<\/span><span class=\"shcb-language__slug\">xml<\/span><span class=\"shcb-language__paren\">)<\/span><\/small><\/pre>\n<p>Now, if we go to the browser, we should see a functional carousel.<\/p>\n<p><img decoding=\"async\" src=\"https:\/\/cloudinary-marketing-res.cloudinary.com\/image\/upload\/v1690819720\/blog-carousel-1.png\" alt=\"Image showing screenshot of the carousel used in the Svelte image carousel project of an image of knickknacks on a table\" loading=\"lazy\" class=\"c-transformed-asset\"  width=\"2032\" height=\"1540\"\/><\/p>\n<h2>Svelte Carousel Example 2: Svelte Transitions Carousel<\/h2>\n<p>Svelte contains some in-built transitions that are useful for creating an easy animation. Let\u2019s learn about transitions in Svelte by creating an image carousel component.<\/p>\n<p>We\u2019ll create a new file called <code>SvelteTransition.svelte<\/code> file in the <code>src<\/code> directory and start adding a simple image component.<\/p>\n<pre class=\"js-syntax-highlighted\" aria-describedby=\"shcb-language-3\" data-shcb-language-name=\"HTML, XML\" data-shcb-language-slug=\"xml\"><span><code class=\"hljs language-xml shcb-wrap-lines\"><span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">script<\/span>&gt;<\/span><span class=\"javascript\">\n    <span class=\"hljs-keyword\">import<\/span> {slide, fade} <span class=\"hljs-keyword\">from<\/span> <span class=\"hljs-string\">'svelte\/transition'<\/span>; \n    <span class=\"hljs-keyword\">import<\/span> {elasticInOut} <span class=\"hljs-keyword\">from<\/span> <span class=\"hljs-string\">'svelte\/easing'<\/span>;\n  <span class=\"hljs-keyword\">const<\/span> gallery_items = &#91;\n    {\n      <span class=\"hljs-attr\">url<\/span>: <span class=\"hljs-string\">\"https:\/\/res.cloudinary.com\/beswift\/image\/upload\/v1650390102\/photo-1649894222226-056a1a79d9fb_xlv73h.jpg\"<\/span>,\n      <span class=\"hljs-attr\">description<\/span>: <span class=\"hljs-string\">\"Dog\"<\/span>,\n    },\n    {\n      <span class=\"hljs-attr\">url<\/span>: <span class=\"hljs-string\">\"https:\/\/res.cloudinary.com\/beswift\/image\/upload\/v1650391131\/photo-1648800475313-2bb7fbec8701_ae60yw.jpg\"<\/span>,\n      <span class=\"hljs-attr\">description<\/span>: <span class=\"hljs-string\">\"Building\"<\/span>,\n    },\n    {\n      <span class=\"hljs-attr\">url<\/span>: <span class=\"hljs-string\">\"https:\/\/res.cloudinary.com\/beswift\/image\/upload\/v1650391337\/photo-1647067867267-e01d98462f3c_ugtnwe.jpg\"<\/span>,\n      <span class=\"hljs-attr\">description<\/span>: <span class=\"hljs-string\">\"Staircase\"<\/span>,\n    },\n    {\n      <span class=\"hljs-attr\">url<\/span>: <span class=\"hljs-string\">\"https:\/\/res.cloudinary.com\/beswift\/image\/upload\/v1650391490\/photo-1644241687200-eadaf7601290_xcz2kh.jpg\"<\/span>,\n      <span class=\"hljs-attr\">description<\/span>: <span class=\"hljs-string\">\"Staircase\"<\/span>,\n    },\n  ];\n  <span class=\"hljs-keyword\">let<\/span> currentSlideItem = <span class=\"hljs-number\">0<\/span>;\n  <span class=\"hljs-keyword\">const<\/span> nextImage = <span class=\"hljs-function\"><span class=\"hljs-params\">()<\/span> =&gt;<\/span> {\n    currentSlideItem = (currentSlideItem + <span class=\"hljs-number\">1<\/span>) % gallery_items.length;\n  }\n  <span class=\"hljs-keyword\">const<\/span> prevImage = <span class=\"hljs-function\"><span class=\"hljs-params\">()<\/span> =&gt;<\/span> {\n    <span class=\"hljs-keyword\">if<\/span> (currentSlideItem != <span class=\"hljs-number\">0<\/span>) {\n        currentSlideItem = (currentSlideItem - <span class=\"hljs-number\">1<\/span>) % gallery_items.length;\n    } <span class=\"hljs-keyword\">else<\/span> {\n        currentSlideItem = gallery_items.length - <span class=\"hljs-number\">1<\/span>;\n    }\n  }\n<\/span><span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">script<\/span>&gt;<\/span>\n\n  {#each &#91;gallery_items&#91;currentSlideItem]] as item (currentSlideItem)}\n    <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">img<\/span> <span class=\"hljs-attr\">in:slide<\/span>=<span class=\"hljs-string\">\"{{ duration: 1000, easing: elasticInOut}}\"<\/span> <span class=\"hljs-attr\">out:fade<\/span> <span class=\"hljs-attr\">src<\/span>=<span class=\"hljs-string\">{item.url}<\/span> <span class=\"hljs-attr\">alt<\/span>=<span class=\"hljs-string\">{item.description}<\/span> <span class=\"hljs-attr\">width<\/span>=<span class=\"hljs-string\">{1000}<\/span> <span class=\"hljs-attr\">height<\/span>=<span class=\"hljs-string\">{600}\/<\/span>&gt;<\/span>\n  {\/each}\n  <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">div<\/span> <span class=\"hljs-attr\">class<\/span>=<span class=\"hljs-string\">\"carousel-buttons\"<\/span>&gt;<\/span>\n    <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">button<\/span> <span class=\"hljs-attr\">class<\/span>=<span class=\"hljs-string\">\"btn\"<\/span> <span class=\"hljs-attr\">on:click<\/span>=<span class=\"hljs-string\">{()<\/span> =&gt;<\/span> prevImage()}&gt;Previous<span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">button<\/span>&gt;<\/span>\n    <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">button<\/span> <span class=\"hljs-attr\">class<\/span>=<span class=\"hljs-string\">\"btn\"<\/span> <span class=\"hljs-attr\">on:click<\/span>=<span class=\"hljs-string\">{()<\/span> =&gt;<\/span> nextImage()}&gt;Next<span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">button<\/span>&gt;<\/span>\n  <span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">div<\/span>&gt;<\/span>\n<\/code><\/span><small class=\"shcb-language\" id=\"shcb-language-3\"><span class=\"shcb-language__label\">Code language:<\/span> <span class=\"shcb-language__name\">HTML, XML<\/span> <span class=\"shcb-language__paren\">(<\/span><span class=\"shcb-language__slug\">xml<\/span><span class=\"shcb-language__paren\">)<\/span><\/small><\/pre>\n<p>From the code snippet above, we\u2019ll:<\/p>\n<ul>\n<li>Import the required dependencies from <code>svelte\/transition<\/code>.<\/li>\n<li>Create an array of items that contain the URL and descriptions of the images.<\/li>\n<li>Create a variable called <code>currentSlideItem()<\/code> which will decide the item to show from the array.<\/li>\n<li>Declare <code>nextImage()<\/code> and <code>prevImage()<\/code> function that\u2019ll control the carousel.<\/li>\n<li>Loop through the array with <code>#each<\/code> and then using the <code>src<\/code> as the key for the loop.<\/li>\n<li>Invoke the <code>nextImage()<\/code> and <code>prevImage()<\/code> inside the <code>button<\/code> element.<\/li>\n<\/ul>\n<p>In the <code>App.svelte<\/code>, we\u2019ll import the <code>SvelteTransition.svelte<\/code> component, and render it.<\/p>\n<pre class=\"js-syntax-highlighted\" aria-describedby=\"shcb-language-4\" data-shcb-language-name=\"HTML, XML\" data-shcb-language-slug=\"xml\"><span><code class=\"hljs language-xml shcb-wrap-lines\"><span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">script<\/span>&gt;<\/span><span class=\"javascript\">\n    <span class=\"hljs-keyword\">import<\/span> Carousel <span class=\"hljs-keyword\">from<\/span> <span class=\"hljs-string\">'.\/carousels\/SvelteCarousel.svelte'<\/span> \n    <span class=\"hljs-keyword\">import<\/span> SvelteTransition <span class=\"hljs-keyword\">from<\/span> <span class=\"hljs-string\">'.\/carousels\/SvelteTransition.svelte'<\/span>\n<\/span><span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">script<\/span>&gt;<\/span>\n\n<span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">main<\/span>&gt;<\/span>\n    <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">h1<\/span>&gt;<\/span>Svelte-carousel<span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">h1<\/span>&gt;<\/span>\n      <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">Carousel<\/span> \/&gt;<\/span>\n    <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">h1<\/span>&gt;<\/span>Svelte Transition<span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">h1<\/span>&gt;<\/span>\n      <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">SvelteTransition<\/span> \/&gt;<\/span>\n<span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">main<\/span>&gt;<\/span>\n<\/code><\/span><small class=\"shcb-language\" id=\"shcb-language-4\"><span class=\"shcb-language__label\">Code language:<\/span> <span class=\"shcb-language__name\">HTML, XML<\/span> <span class=\"shcb-language__paren\">(<\/span><span class=\"shcb-language__slug\">xml<\/span><span class=\"shcb-language__paren\">)<\/span><\/small><\/pre>\n<p>Now, from the browser, we would see a functional carousel.<\/p>\n<p><img decoding=\"async\" src=\"https:\/\/cloudinary-marketing-res.cloudinary.com\/image\/upload\/v1690819720\/blog-carousel-2.png\" alt=\"Image showing screenshot of the carousel used in the Svelte image carousel project of an image of happy kids sitting on a wall\" loading=\"lazy\" class=\"c-transformed-asset\"  width=\"2132\" height=\"1542\"\/><\/p>\n<h2>Svelte Carousel Example 3: Siema Carousel<\/h2>\n<p>Siema is a lightweight (only 3kb gzipped) carousel plugin without dependencies or styling. It\u2019s 100% open source and <a href=\"https:\/\/github.com\/pawelgrzybek\/siema\">available on Github<\/a>. Also, it\u2019s free to use on personal and commercial projects.<\/p>\n<p>We\u2019ll start by installing <code>siema<\/code> with the following command so that we\u2019ll have access to the carousel component:<\/p>\n<pre class=\"js-syntax-highlighted\" aria-describedby=\"shcb-language-5\" data-shcb-language-name=\"HTML, XML\" data-shcb-language-slug=\"xml\"><span><code class=\"hljs language-xml shcb-wrap-lines\">    <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">script<\/span>&gt;<\/span><span class=\"javascript\">\n        <span class=\"hljs-keyword\">import<\/span> Siema <span class=\"hljs-keyword\">from<\/span> <span class=\"hljs-string\">'siema'<\/span>;\n        <span class=\"hljs-keyword\">import<\/span> { onMount } <span class=\"hljs-keyword\">from<\/span> <span class=\"hljs-string\">'svelte'<\/span>;\n        \n        <span class=\"hljs-keyword\">let<\/span> slider, prev, next, radioSlider\n        <span class=\"hljs-keyword\">let<\/span> select = <span class=\"hljs-number\">0<\/span>\n    \n        onMount(<span class=\"hljs-function\"><span class=\"hljs-params\">()<\/span> =&gt;<\/span> {\n            slider = <span class=\"hljs-keyword\">new<\/span> Siema({\n                    <span class=\"hljs-attr\">selector<\/span>: <span class=\"hljs-string\">'.siema'<\/span>,\n                    <span class=\"hljs-attr\">duration<\/span>: <span class=\"hljs-number\">200<\/span>,\n                    <span class=\"hljs-attr\">easing<\/span>: <span class=\"hljs-string\">'ease-in-out'<\/span>,\n                    <span class=\"hljs-attr\">perPage<\/span>: <span class=\"hljs-number\">2<\/span>,\n                    <span class=\"hljs-attr\">startIndex<\/span>: <span class=\"hljs-number\">0<\/span>,\n                    <span class=\"hljs-attr\">draggable<\/span>: <span class=\"hljs-literal\">true<\/span>,\n                    <span class=\"hljs-attr\">multipleDrag<\/span>: <span class=\"hljs-literal\">true<\/span>,\n                    <span class=\"hljs-attr\">threshold<\/span>: <span class=\"hljs-number\">20<\/span>,\n                    <span class=\"hljs-attr\">loop<\/span>: <span class=\"hljs-literal\">true<\/span>,\n                    <span class=\"hljs-attr\">rtl<\/span>: <span class=\"hljs-literal\">false<\/span>,\n                    <span class=\"hljs-attr\">onInit<\/span>: <span class=\"hljs-function\"><span class=\"hljs-params\">()<\/span> =&gt;<\/span> {},\n                    <span class=\"hljs-attr\">onChange<\/span>: <span class=\"hljs-function\"><span class=\"hljs-params\">()<\/span> =&gt;<\/span> {},\n                }); <span class=\"hljs-comment\">\/\/end Siema constructor<\/span>\n            prev = <span class=\"hljs-function\"><span class=\"hljs-params\">()<\/span> =&gt;<\/span> {\n                slider.prev()\n                <span class=\"hljs-keyword\">if<\/span> (select &gt; <span class=\"hljs-number\">0<\/span>) {\n                    select--\n                }\n            }\n            next = <span class=\"hljs-function\"><span class=\"hljs-params\">()<\/span> =&gt;<\/span> {\n                slider.next()\n                <span class=\"hljs-keyword\">if<\/span> (select &gt;= <span class=\"hljs-number\">0<\/span>) {\n                    select++\n                }\n            }\n        }) <span class=\"hljs-comment\">\/\/end onMount<\/span>\n      <span class=\"hljs-keyword\">const<\/span> images = &#91;\n        {\n          <span class=\"hljs-attr\">url<\/span>: <span class=\"hljs-string\">\"https:\/\/res.cloudinary.com\/beswift\/image\/upload\/v1650391490\/photo-1644241687200-eadaf7601290_xcz2kh.jpg\"<\/span>,\n          <span class=\"hljs-attr\">description<\/span>: <span class=\"hljs-string\">\"image1\"<\/span>,\n        },\n        {\n          <span class=\"hljs-attr\">url<\/span>: <span class=\"hljs-string\">\"https:\/\/res.cloudinary.com\/beswift\/image\/upload\/v1650391337\/photo-1647067867267-e01d98462f3c_ugtnwe.jpg\"<\/span>,\n          <span class=\"hljs-attr\">description<\/span>: <span class=\"hljs-string\">\"image2\"<\/span>,\n        },\n        {\n          <span class=\"hljs-attr\">url<\/span>: <span class=\"hljs-string\">\"https:\/\/res.cloudinary.com\/beswift\/image\/upload\/v1650391131\/photo-1648800475313-2bb7fbec8701_ae60yw.jpg\"<\/span>,\n          <span class=\"hljs-attr\">description<\/span>: <span class=\"hljs-string\">\"image3\"<\/span>,\n        },\n        {\n          <span class=\"hljs-attr\">url<\/span>: <span class=\"hljs-string\">\"https:\/\/res.cloudinary.com\/beswift\/image\/upload\/v1650390102\/photo-1649894222226-056a1a79d9fb_xlv73h.jpg\"<\/span>,\n          <span class=\"hljs-attr\">description<\/span>: <span class=\"hljs-string\">\"image4\"<\/span>,\n        },\n        {\n          <span class=\"hljs-attr\">url<\/span>: <span class=\"hljs-string\">\"https:\/\/res.cloudinary.com\/beswift\/image\/upload\/v1650389425\/photo-1649894221695-45abb718a190_sgjhwd.jpg\"<\/span>,\n          <span class=\"hljs-attr\">description<\/span>: <span class=\"hljs-string\">\"image5\"<\/span>,\n        },\n      ];\n    <\/span><span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">script<\/span>&gt;<\/span>\n    <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">main<\/span>&gt;<\/span>\n        <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">div<\/span> <span class=\"hljs-attr\">class<\/span>=<span class=\"hljs-string\">\"siema\"<\/span>&gt;<\/span>\n        {#each images as src, imageIndex (src)}\n          <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">div<\/span> <span class=\"hljs-attr\">class<\/span>=<span class=\"hljs-string\">\"slider\"<\/span>&gt;<\/span>\n              <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">img<\/span> <span class=\"hljs-attr\">src<\/span>=<span class=\"hljs-string\">{src.url}<\/span> <span class=\"hljs-attr\">alt<\/span>=<span class=\"hljs-string\">{src.description}<\/span> <span class=\"hljs-attr\">width<\/span>=<span class=\"hljs-string\">{1000}<\/span> <span class=\"hljs-attr\">height<\/span>=<span class=\"hljs-string\">{600}<\/span> \/&gt;<\/span>\n          <span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">div<\/span>&gt;<\/span>\n        {\/each}\n        <span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">div<\/span>&gt;<\/span>\n    <span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">main<\/span>&gt;<\/span>\n    <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">button<\/span> <span class=\"hljs-attr\">on:click<\/span>=<span class=\"hljs-string\">{prev}<\/span>&gt;<\/span>\n        prev\n    <span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">button<\/span>&gt;<\/span>\n    <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">button<\/span> <span class=\"hljs-attr\">on:click<\/span>=<span class=\"hljs-string\">{next}<\/span>&gt;<\/span>\n        next\n    <span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">button<\/span>&gt;<\/span>\n<\/code><\/span><small class=\"shcb-language\" id=\"shcb-language-5\"><span class=\"shcb-language__label\">Code language:<\/span> <span class=\"shcb-language__name\">HTML, XML<\/span> <span class=\"shcb-language__paren\">(<\/span><span class=\"shcb-language__slug\">xml<\/span><span class=\"shcb-language__paren\">)<\/span><\/small><\/pre>\n<p>From the code snippet above, we\u2019ll:<\/p>\n<ul>\n<li>Import the required dependencies.<\/li>\n<li>Create an array of items that contain the URL and descriptions of the images.<\/li>\n<li>Passed the <code>Siema()<\/code> constructor <code>onMount<\/code> of the app. The <code>Siema()<\/code> constructor has argument of <code>selector<\/code>, <code>duration<\/code>, <code>easing<\/code>, <code>perPage<\/code>, <code>startIndex<\/code>, <code>draggable<\/code>, <code>multipleDrag<\/code>, etc.<\/li>\n<li>Declare <code>prev()<\/code> and <code>next()<\/code> function that\u2019ll control the carousel.<\/li>\n<li>Loop through the array with <code>#each<\/code> and then using the <code>src<\/code> as the key for the loop.<\/li>\n<li>Invoke the <code>next()<\/code> and <code>prev()<\/code> inside the <code>button<\/code> element.<\/li>\n<\/ul>\n<p>In the <code>App.svelte<\/code>, we\u2019ll import the <code>SvelteSiema.svelte<\/code> component, and render it.<\/p>\n<pre class=\"js-syntax-highlighted\" aria-describedby=\"shcb-language-6\" data-shcb-language-name=\"HTML, XML\" data-shcb-language-slug=\"xml\"><span><code class=\"hljs language-xml shcb-wrap-lines\"><span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">script<\/span>&gt;<\/span><span class=\"javascript\">\n    <span class=\"hljs-keyword\">import<\/span> Carousel <span class=\"hljs-keyword\">from<\/span> <span class=\"hljs-string\">'.\/carousels\/SvelteCarousel.svelte'<\/span> \n    <span class=\"hljs-keyword\">import<\/span> SvelteTransition <span class=\"hljs-keyword\">from<\/span> <span class=\"hljs-string\">'.\/carousels\/SvelteTransition.svelte'<\/span>\n    <span class=\"hljs-keyword\">import<\/span> SvelteSiema <span class=\"hljs-keyword\">from<\/span> <span class=\"hljs-string\">'.\/carousels\/SvelteSiema.svelte'<\/span>\n<\/span><span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">script<\/span>&gt;<\/span>\n\n<span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">main<\/span>&gt;<\/span>\n    <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">h1<\/span>&gt;<\/span>Svelte-carousel<span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">h1<\/span>&gt;<\/span>\n      <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">Carousel<\/span> \/&gt;<\/span>\n    <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">h1<\/span>&gt;<\/span>Svelte Transition<span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">h1<\/span>&gt;<\/span>\n      <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">SvelteTransition<\/span> \/&gt;<\/span>\n    <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">h1<\/span>&gt;<\/span>Svelte Transition<span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">h1<\/span>&gt;<\/span>\n      <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">SvelteTransition<\/span> \/&gt;<\/span>   \n<span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">main<\/span>&gt;<\/span>\n<\/code><\/span><small class=\"shcb-language\" id=\"shcb-language-6\"><span class=\"shcb-language__label\">Code language:<\/span> <span class=\"shcb-language__name\">HTML, XML<\/span> <span class=\"shcb-language__paren\">(<\/span><span class=\"shcb-language__slug\">xml<\/span><span class=\"shcb-language__paren\">)<\/span><\/small><\/pre>\n<p>Now, if we go over to the browser, we should see a functional carousel.<\/p>\n<p><img decoding=\"async\" src=\"https:\/\/cloudinary-marketing-res.cloudinary.com\/image\/upload\/v1690819722\/blog-carousel-3.png\" alt=\"Image showing screenshot of the carousel used in the Svelte image carousel project of an image of happy kids sitting on a wall and an empty industrial space.\" loading=\"lazy\" class=\"c-transformed-asset\"  width=\"2172\" height=\"1428\"\/><\/p>\n<h2>Conclusion<\/h2>\n<p>We discussed three different ways to add a carousel in a Svelte project. Although this article covers the basic implementation of these carousels, there are more configurations in their various documentation.<\/p>\n<\/div>","protected":false},"excerpt":{"rendered":"","protected":false},"author":87,"featured_media":30724,"comment_status":"closed","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"_cloudinary_featured_overwrite":false,"footnotes":""},"categories":[1],"tags":[134,370,177,376],"class_list":["post-27837","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-uncategorized","tag-guest-post","tag-image","tag-javascript","tag-svelte"],"acf":[],"yoast_head":"<!-- This site is optimized with the Yoast SEO Premium plugin v25.6 (Yoast SEO v26.9) - https:\/\/yoast.com\/product\/yoast-seo-premium-wordpress\/ -->\n<title>3 Ways to Create a Svelte Carousel<\/title>\n<meta name=\"description\" content=\"This article shows 3 easy ways to add carousels to a Svelte application. You\u2019ll get a Svelte carousel example for each of svelte-carousel, siema carousel, and svelte-transition.\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/cloudinary.com\/blog\/how-to-create-a-carousel-in-3-ways-in-svelte\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"3 Ways to Create a Svelte Carousel\" \/>\n<meta property=\"og:description\" content=\"This article shows 3 easy ways to add carousels to a Svelte application. You\u2019ll get a Svelte carousel example for each of svelte-carousel, siema carousel, and svelte-transition.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/cloudinary.com\/blog\/how-to-create-a-carousel-in-3-ways-in-svelte\" \/>\n<meta property=\"og:site_name\" content=\"Cloudinary Blog\" \/>\n<meta property=\"article:published_time\" content=\"2023-07-31T14:00:00+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2025-10-29T20:05:52+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/res.cloudinary.com\/cloudinary-marketing\/images\/f_auto,q_auto\/v1690232108\/Blog-image_carousel\/Blog-image_carousel.jpg?_i=AA\" \/>\n\t<meta property=\"og:image:width\" content=\"2000\" \/>\n\t<meta property=\"og:image:height\" content=\"1100\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/jpeg\" \/>\n<meta name=\"author\" content=\"melindapham\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"NewsArticle\",\"@id\":\"https:\/\/cloudinary.com\/blog\/how-to-create-a-carousel-in-3-ways-in-svelte#article\",\"isPartOf\":{\"@id\":\"https:\/\/cloudinary.com\/blog\/how-to-create-a-carousel-in-3-ways-in-svelte\"},\"author\":{\"name\":\"melindapham\",\"@id\":\"https:\/\/cloudinary.com\/blog\/#\/schema\/person\/0d5ad601e4c3b5be89245dfb14be42d9\"},\"headline\":\"3 Ways to Create a Svelte Carousel\",\"datePublished\":\"2023-07-31T14:00:00+00:00\",\"dateModified\":\"2025-10-29T20:05:52+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\/\/cloudinary.com\/blog\/how-to-create-a-carousel-in-3-ways-in-svelte\"},\"wordCount\":6,\"publisher\":{\"@id\":\"https:\/\/cloudinary.com\/blog\/#organization\"},\"image\":{\"@id\":\"https:\/\/cloudinary.com\/blog\/how-to-create-a-carousel-in-3-ways-in-svelte#primaryimage\"},\"thumbnailUrl\":\"https:\/\/res.cloudinary.com\/cloudinary-marketing\/images\/f_auto,q_auto\/v1690232108\/Blog-image_carousel\/Blog-image_carousel.jpg?_i=AA\",\"keywords\":[\"Guest Post\",\"Image\",\"Javascript\",\"Svelte\"],\"inLanguage\":\"en-US\",\"copyrightYear\":\"2023\",\"copyrightHolder\":{\"@id\":\"https:\/\/cloudinary.com\/#organization\"}},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/cloudinary.com\/blog\/how-to-create-a-carousel-in-3-ways-in-svelte\",\"url\":\"https:\/\/cloudinary.com\/blog\/how-to-create-a-carousel-in-3-ways-in-svelte\",\"name\":\"3 Ways to Create a Svelte Carousel\",\"isPartOf\":{\"@id\":\"https:\/\/cloudinary.com\/blog\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\/\/cloudinary.com\/blog\/how-to-create-a-carousel-in-3-ways-in-svelte#primaryimage\"},\"image\":{\"@id\":\"https:\/\/cloudinary.com\/blog\/how-to-create-a-carousel-in-3-ways-in-svelte#primaryimage\"},\"thumbnailUrl\":\"https:\/\/res.cloudinary.com\/cloudinary-marketing\/images\/f_auto,q_auto\/v1690232108\/Blog-image_carousel\/Blog-image_carousel.jpg?_i=AA\",\"datePublished\":\"2023-07-31T14:00:00+00:00\",\"dateModified\":\"2025-10-29T20:05:52+00:00\",\"description\":\"This article shows 3 easy ways to add carousels to a Svelte application. You\u2019ll get a Svelte carousel example for each of svelte-carousel, siema carousel, and svelte-transition.\",\"breadcrumb\":{\"@id\":\"https:\/\/cloudinary.com\/blog\/how-to-create-a-carousel-in-3-ways-in-svelte#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/cloudinary.com\/blog\/how-to-create-a-carousel-in-3-ways-in-svelte\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/cloudinary.com\/blog\/how-to-create-a-carousel-in-3-ways-in-svelte#primaryimage\",\"url\":\"https:\/\/res.cloudinary.com\/cloudinary-marketing\/images\/f_auto,q_auto\/v1690232108\/Blog-image_carousel\/Blog-image_carousel.jpg?_i=AA\",\"contentUrl\":\"https:\/\/res.cloudinary.com\/cloudinary-marketing\/images\/f_auto,q_auto\/v1690232108\/Blog-image_carousel\/Blog-image_carousel.jpg?_i=AA\",\"width\":2000,\"height\":1100,\"caption\":\"Image showing graphic representation of a Svelte image carousel including an image of a room, Svelte code, and the Svelte logo\"},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/cloudinary.com\/blog\/how-to-create-a-carousel-in-3-ways-in-svelte#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\/\/cloudinary.com\/blog\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"3 Ways to Create a Svelte Carousel\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/cloudinary.com\/blog\/#website\",\"url\":\"https:\/\/cloudinary.com\/blog\/\",\"name\":\"Cloudinary Blog\",\"description\":\"\",\"publisher\":{\"@id\":\"https:\/\/cloudinary.com\/blog\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/cloudinary.com\/blog\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"en-US\"},{\"@type\":\"Organization\",\"@id\":\"https:\/\/cloudinary.com\/blog\/#organization\",\"name\":\"Cloudinary Blog\",\"url\":\"https:\/\/cloudinary.com\/blog\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/cloudinary.com\/blog\/#\/schema\/logo\/image\/\",\"url\":\"https:\/\/res.cloudinary.com\/cloudinary-marketing\/images\/f_auto,q_auto\/v1649718331\/Web_Assets\/blog\/cloudinary_logo_for_white_bg_1937437aa7_19374666c7_193742f877\/cloudinary_logo_for_white_bg_1937437aa7_19374666c7_193742f877.png?_i=AA\",\"contentUrl\":\"https:\/\/res.cloudinary.com\/cloudinary-marketing\/images\/f_auto,q_auto\/v1649718331\/Web_Assets\/blog\/cloudinary_logo_for_white_bg_1937437aa7_19374666c7_193742f877\/cloudinary_logo_for_white_bg_1937437aa7_19374666c7_193742f877.png?_i=AA\",\"width\":312,\"height\":60,\"caption\":\"Cloudinary Blog\"},\"image\":{\"@id\":\"https:\/\/cloudinary.com\/blog\/#\/schema\/logo\/image\/\"}},{\"@type\":\"Person\",\"@id\":\"https:\/\/cloudinary.com\/blog\/#\/schema\/person\/0d5ad601e4c3b5be89245dfb14be42d9\",\"name\":\"melindapham\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/cloudinary.com\/blog\/#\/schema\/person\/image\/\",\"url\":\"https:\/\/secure.gravatar.com\/avatar\/e6f989fa97fe94be61596259d8629c3df65aec4c7da5c0000f90d810f313d4f4?s=96&d=mm&r=g\",\"contentUrl\":\"https:\/\/secure.gravatar.com\/avatar\/e6f989fa97fe94be61596259d8629c3df65aec4c7da5c0000f90d810f313d4f4?s=96&d=mm&r=g\",\"caption\":\"melindapham\"}}]}<\/script>\n<!-- \/ Yoast SEO Premium plugin. -->","yoast_head_json":{"title":"3 Ways to Create a Svelte Carousel","description":"This article shows 3 easy ways to add carousels to a Svelte application. You\u2019ll get a Svelte carousel example for each of svelte-carousel, siema carousel, and svelte-transition.","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/cloudinary.com\/blog\/how-to-create-a-carousel-in-3-ways-in-svelte","og_locale":"en_US","og_type":"article","og_title":"3 Ways to Create a Svelte Carousel","og_description":"This article shows 3 easy ways to add carousels to a Svelte application. You\u2019ll get a Svelte carousel example for each of svelte-carousel, siema carousel, and svelte-transition.","og_url":"https:\/\/cloudinary.com\/blog\/how-to-create-a-carousel-in-3-ways-in-svelte","og_site_name":"Cloudinary Blog","article_published_time":"2023-07-31T14:00:00+00:00","article_modified_time":"2025-10-29T20:05:52+00:00","og_image":[{"width":2000,"height":1100,"url":"https:\/\/res.cloudinary.com\/cloudinary-marketing\/images\/f_auto,q_auto\/v1690232108\/Blog-image_carousel\/Blog-image_carousel.jpg?_i=AA","type":"image\/jpeg"}],"author":"melindapham","twitter_card":"summary_large_image","schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"NewsArticle","@id":"https:\/\/cloudinary.com\/blog\/how-to-create-a-carousel-in-3-ways-in-svelte#article","isPartOf":{"@id":"https:\/\/cloudinary.com\/blog\/how-to-create-a-carousel-in-3-ways-in-svelte"},"author":{"name":"melindapham","@id":"https:\/\/cloudinary.com\/blog\/#\/schema\/person\/0d5ad601e4c3b5be89245dfb14be42d9"},"headline":"3 Ways to Create a Svelte Carousel","datePublished":"2023-07-31T14:00:00+00:00","dateModified":"2025-10-29T20:05:52+00:00","mainEntityOfPage":{"@id":"https:\/\/cloudinary.com\/blog\/how-to-create-a-carousel-in-3-ways-in-svelte"},"wordCount":6,"publisher":{"@id":"https:\/\/cloudinary.com\/blog\/#organization"},"image":{"@id":"https:\/\/cloudinary.com\/blog\/how-to-create-a-carousel-in-3-ways-in-svelte#primaryimage"},"thumbnailUrl":"https:\/\/res.cloudinary.com\/cloudinary-marketing\/images\/f_auto,q_auto\/v1690232108\/Blog-image_carousel\/Blog-image_carousel.jpg?_i=AA","keywords":["Guest Post","Image","Javascript","Svelte"],"inLanguage":"en-US","copyrightYear":"2023","copyrightHolder":{"@id":"https:\/\/cloudinary.com\/#organization"}},{"@type":"WebPage","@id":"https:\/\/cloudinary.com\/blog\/how-to-create-a-carousel-in-3-ways-in-svelte","url":"https:\/\/cloudinary.com\/blog\/how-to-create-a-carousel-in-3-ways-in-svelte","name":"3 Ways to Create a Svelte Carousel","isPartOf":{"@id":"https:\/\/cloudinary.com\/blog\/#website"},"primaryImageOfPage":{"@id":"https:\/\/cloudinary.com\/blog\/how-to-create-a-carousel-in-3-ways-in-svelte#primaryimage"},"image":{"@id":"https:\/\/cloudinary.com\/blog\/how-to-create-a-carousel-in-3-ways-in-svelte#primaryimage"},"thumbnailUrl":"https:\/\/res.cloudinary.com\/cloudinary-marketing\/images\/f_auto,q_auto\/v1690232108\/Blog-image_carousel\/Blog-image_carousel.jpg?_i=AA","datePublished":"2023-07-31T14:00:00+00:00","dateModified":"2025-10-29T20:05:52+00:00","description":"This article shows 3 easy ways to add carousels to a Svelte application. You\u2019ll get a Svelte carousel example for each of svelte-carousel, siema carousel, and svelte-transition.","breadcrumb":{"@id":"https:\/\/cloudinary.com\/blog\/how-to-create-a-carousel-in-3-ways-in-svelte#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/cloudinary.com\/blog\/how-to-create-a-carousel-in-3-ways-in-svelte"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/cloudinary.com\/blog\/how-to-create-a-carousel-in-3-ways-in-svelte#primaryimage","url":"https:\/\/res.cloudinary.com\/cloudinary-marketing\/images\/f_auto,q_auto\/v1690232108\/Blog-image_carousel\/Blog-image_carousel.jpg?_i=AA","contentUrl":"https:\/\/res.cloudinary.com\/cloudinary-marketing\/images\/f_auto,q_auto\/v1690232108\/Blog-image_carousel\/Blog-image_carousel.jpg?_i=AA","width":2000,"height":1100,"caption":"Image showing graphic representation of a Svelte image carousel including an image of a room, Svelte code, and the Svelte logo"},{"@type":"BreadcrumbList","@id":"https:\/\/cloudinary.com\/blog\/how-to-create-a-carousel-in-3-ways-in-svelte#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/cloudinary.com\/blog\/"},{"@type":"ListItem","position":2,"name":"3 Ways to Create a Svelte Carousel"}]},{"@type":"WebSite","@id":"https:\/\/cloudinary.com\/blog\/#website","url":"https:\/\/cloudinary.com\/blog\/","name":"Cloudinary Blog","description":"","publisher":{"@id":"https:\/\/cloudinary.com\/blog\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/cloudinary.com\/blog\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-US"},{"@type":"Organization","@id":"https:\/\/cloudinary.com\/blog\/#organization","name":"Cloudinary Blog","url":"https:\/\/cloudinary.com\/blog\/","logo":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/cloudinary.com\/blog\/#\/schema\/logo\/image\/","url":"https:\/\/res.cloudinary.com\/cloudinary-marketing\/images\/f_auto,q_auto\/v1649718331\/Web_Assets\/blog\/cloudinary_logo_for_white_bg_1937437aa7_19374666c7_193742f877\/cloudinary_logo_for_white_bg_1937437aa7_19374666c7_193742f877.png?_i=AA","contentUrl":"https:\/\/res.cloudinary.com\/cloudinary-marketing\/images\/f_auto,q_auto\/v1649718331\/Web_Assets\/blog\/cloudinary_logo_for_white_bg_1937437aa7_19374666c7_193742f877\/cloudinary_logo_for_white_bg_1937437aa7_19374666c7_193742f877.png?_i=AA","width":312,"height":60,"caption":"Cloudinary Blog"},"image":{"@id":"https:\/\/cloudinary.com\/blog\/#\/schema\/logo\/image\/"}},{"@type":"Person","@id":"https:\/\/cloudinary.com\/blog\/#\/schema\/person\/0d5ad601e4c3b5be89245dfb14be42d9","name":"melindapham","image":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/cloudinary.com\/blog\/#\/schema\/person\/image\/","url":"https:\/\/secure.gravatar.com\/avatar\/e6f989fa97fe94be61596259d8629c3df65aec4c7da5c0000f90d810f313d4f4?s=96&d=mm&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/e6f989fa97fe94be61596259d8629c3df65aec4c7da5c0000f90d810f313d4f4?s=96&d=mm&r=g","caption":"melindapham"}}]}},"jetpack_featured_media_url":"https:\/\/res.cloudinary.com\/cloudinary-marketing\/images\/f_auto,q_auto\/v1690232108\/Blog-image_carousel\/Blog-image_carousel.jpg?_i=AA","_links":{"self":[{"href":"https:\/\/cloudinary.com\/blog\/wp-json\/wp\/v2\/posts\/27837","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/cloudinary.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/cloudinary.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/cloudinary.com\/blog\/wp-json\/wp\/v2\/users\/87"}],"replies":[{"embeddable":true,"href":"https:\/\/cloudinary.com\/blog\/wp-json\/wp\/v2\/comments?post=27837"}],"version-history":[{"count":8,"href":"https:\/\/cloudinary.com\/blog\/wp-json\/wp\/v2\/posts\/27837\/revisions"}],"predecessor-version":[{"id":39026,"href":"https:\/\/cloudinary.com\/blog\/wp-json\/wp\/v2\/posts\/27837\/revisions\/39026"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/cloudinary.com\/blog\/wp-json\/wp\/v2\/media\/30724"}],"wp:attachment":[{"href":"https:\/\/cloudinary.com\/blog\/wp-json\/wp\/v2\/media?parent=27837"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/cloudinary.com\/blog\/wp-json\/wp\/v2\/categories?post=27837"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/cloudinary.com\/blog\/wp-json\/wp\/v2\/tags?post=27837"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}