{"id":27741,"date":"2022-07-06T09:24:35","date_gmt":"2022-07-06T09:24:35","guid":{"rendered":"http:\/\/implement-an-image-carousel-in-svelte"},"modified":"2022-07-06T09:24:35","modified_gmt":"2022-07-06T09:24:35","slug":"implement-an-image-carousel-in-svelte","status":"publish","type":"post","link":"https:\/\/cloudinary.com\/blog\/guest_post\/implement-an-image-carousel-in-svelte\/","title":{"rendered":"Implement an Image Carousel in Svelte"},"content":{"rendered":"

Svelte<\/a> is another popular JavaScript framework for building front-end apps. It\u2019s been around since 2016, similar to Angular, although it has a much smaller community and fewer packages available. Despite this, there are still thousands of developers that love building apps with Svelte compared to the other frameworks.<\/p>\n

That\u2019s why we\u2019re going to build a common component so that you can easily apply it to your own apps. In this post, we\u2019re going to build an image carousel that fetches images from Cloudinary and lets users click through them in our app.<\/p>\n

Set up project<\/h2>\n

If you don\u2019t already have a free Cloudinary account<\/a>, you should go sign up for one at this point so you can pull your own images to work with in the carousel. Now we\u2019ll set up a new Svelte app using the following command.<\/p>\n

$ npm init vite image-carousel --template svelte\n<\/code><\/span><\/pre>\n
You\u2019ll be prompted in your terminal to select a few options. Make sure you select the svelte<\/code> framework and the svelte-ts<\/code> variant. Then you\u2019ll need to go to the new image-carousel<\/code> directory and install the dependencies.<\/p>\n
$ cd image-carousel\n$ npm i\n<\/code><\/span><\/pre>\n
Now that we have the Svelte app bootstrapped, let\u2019s dive in and add a new component to the project.<\/p>\n
Create the carousel<\/h2>\n
Svelte components are built completely different from the other frameworks so the syntax might look weird at first. Instead of making functions and classes like with the other frameworks, you have .svelte<\/code> files that have <script><\/code>, <style><\/code>, and regular HTML tags. It\u2019s pretty easy to pick up as a framework, especially if you are relatively new to front-end development because it only adds a few extra things to make the components responsive.<\/p>\n
Let\u2019s add a new file to src > lib<\/code> called Carousel.svelte<\/code>. This will hold all of the logic we need to request our images from Cloudinary and render them on the page with a little transition between images when a user clicks a button. In this new file, add the following code.<\/p>\n
<!-- Carousel.svelte --><\/span>\n<script<\/span> lang<\/span>=\"ts\"<\/span>><\/span>\n  import<\/span> { slide } from<\/span> \"svelte\/transition\"<\/span>;\n  import<\/span> { onMount } from<\/span> \"svelte\"<\/span>;\n\n  let<\/span> images = [];\n\n  let<\/span> currentSlideItem = 0<\/span>;\n\n  const<\/span> nextImage = ()<\/span> =><\/span> {\n    currentSlideItem = (currentSlideItem + 1<\/span>) % images.length;\n  };\n\n  const<\/span> prevImage = ()<\/span> =><\/span> {\n    if<\/span> (currentSlideItem != 0<\/span>) {\n      currentSlideItem = (currentSlideItem - 1<\/span>) % images.length;\n    } else<\/span> {\n      currentSlideItem = images.length - 1<\/span>;\n    }\n  };\n<\/span><\/script<\/span>><\/span>\n\n{#if images.length === 0}\n  <div<\/span>><\/span>No images to show<\/div<\/span>><\/span>\n{:else}\n  <div<\/span> class<\/span>=\"carousel-buttons\"<\/span>><\/span>\n    <button<\/span> on:click<\/span>={()<\/span> =><\/span> prevImage()}>Previous<\/button<\/span>><\/span>\n    <button<\/span> on:click<\/span>={()<\/span> =><\/span> nextImage()}>Next<\/button<\/span>><\/span>\n  <\/div<\/span>><\/span>\n  {#each [images[currentSlideItem]] as item (currentSlideItem)}\n    <img<\/span>\n      transition:slide<\/span>\n      src<\/span>={item.url}<\/span>\n      alt<\/span>={item.description}<\/span>\n      width<\/span>={400}<\/span>\n      height<\/span>={300}<\/span>\n    \/><\/span>\n  {\/each}\n{\/if}\n<\/code><\/span>Code language:<\/span> HTML, XML<\/span> (<\/span>xml<\/span>)<\/span><\/small><\/pre>\n
Let\u2019s go through what\u2019s happening here. The first thing to note is that we\u2019re writing all of the TypeScript code in the <script><\/code> tag. You see that we do our package imports at the top of the tag to get the methods we\u2019ll need for the functionality, similar to importing packages at the top of component files in other frameworks.<\/p>\n
Next, we create a state variable called images<\/code>. This is what will hold all of the images we fetch from Cloudinary and we\u2019ll get to that part a bit later. Then we set another state variable called currentSlideItem<\/code>. This updates the index for the current image every time a user clicks one of the buttons available.<\/p>\n
After that, we write a couple of functions to handle users going back and forth between images in the carousel. They update the current image based on the length of the images<\/code> array. Once we\u2019re outside of the <script><\/code> tag, then you can see some conditional logic.<\/p>\n
This is the way you write conditions in Svelte. There is if-else-if<\/code> notation and the other basic conditional statements. The big thing to pay attention to is that there are open and closing tags for the {#if}<\/code> statement. Make sure you don\u2019t miss that closing tag!<\/p>\n
Inside the {:else}<\/code> statement, you\u2019ll see more conditional rendering. In this case, we\u2019re looping through the images<\/code> array to display the images as users click through them. Only the current image is shown, but the rest are there, waiting for their turn.<\/p>\n
With the main parts of this component in place, we need to add the call to our Cloudinary account to display the images.<\/p>\n
Make the fetch request<\/h3>\n
We\u2019ll need to make an async call to the Cloudinary API when the component is loaded so that we have the expected images. This will tap into the Svelte component lifecycle because we\u2019ll need to use the onMount<\/code> method so this call doesn\u2019t get stuck in a bad state. So inside the <script><\/code> tag, just below the images<\/code> state variable, add the following code.<\/p>\n
<!-- Carousel.svelte -->\n...\n  let images = [];\n\n  onMount(async<\/span> () => {\n    const<\/span> results = await<\/span> fetch(\n      `https:\/\/api.cloudinary.com\/v1_1\/${process.env.CLOUDINARY_CLOUD_NAME}<\/span>\/resources\/image`<\/span>,\n      {\n        headers<\/span>: {\n          Authorization<\/span>: `Basic ${Buffer.from<\/span>(\n            process.env.CLOUDINARY_API_KEY +\n              \":\"<\/span> +\n              process.env.CLOUDINARY_API_SECRET\n          ).toString(\"base64\"<\/span>)}<\/span>`<\/span>,\n        },\n      }\n    ).then((r<\/span>) =><\/span> r.json());\n\n    const<\/span> { resources } = results;\n\n    images = resources.map((resource<\/span>) =><\/span> ({\n      url<\/span>: resource.secure_url,\n      description<\/span>: resource.public_id,\n    }));\n  });\n...\n<\/code><\/span>Code language:<\/span> JavaScript<\/span> (<\/span>javascript<\/span>)<\/span><\/small><\/pre>\n
Now we\u2019re getting images directly from the API when the component loads for the first time. All we need to do now is display this new component to users!<\/p>\n
Display the carousel<\/h2>\n
To do this, we need to make some changes to App.svelte<\/code>. This has quite a bit of boilerplate code, so you can delete everything out of this file. Then replace it with the following code.<\/p>\n
<!-- App.svelte --><\/span>\n<script<\/span> lang<\/span>=\"ts\"<\/span>><\/span>\n  import<\/span> Carousel from<\/span> \".\/lib\/Carousel.svelte\"<\/span>;\n<\/span><\/script<\/span>><\/span>\n\n<main<\/span>><\/span>\n  <h1<\/span>><\/span>Hello People!<\/h1<\/span>><\/span>\n\n  <Carousel<\/span> \/><\/span>\n<\/main<\/span>><\/span>\n\n<style<\/span>><\/span>\n  :root<\/span> {\n    font-family<\/span>: -apple-system, BlinkMacSystemFont, \"Segoe UI\"<\/span>, Roboto, Oxygen,\n      Ubuntu, Cantarell, \"Open Sans\"<\/span>, \"Helvetica Neue\"<\/span>, sans-serif;\n  }\n\n  main<\/span> {\n    text-align<\/span>: center;\n    padding<\/span>: 1em<\/span>;\n    margin<\/span>: 0<\/span> auto;\n  }\n  h1<\/span> {\n    color<\/span>: #ff3e00<\/span>;\n    text-transform<\/span>: uppercase;\n    font-size<\/span>: 4rem<\/span>;\n    font-weight<\/span>: 100<\/span>;\n    line-height<\/span>: 1.1<\/span>;\n    margin<\/span>: 2rem<\/span> auto;\n    max-width<\/span>: 14rem<\/span>;\n  }\n\n  @media<\/span> (min-width:<\/span> 480px<\/span>) {\n    h1<\/span> {\n      max-width<\/span>: none;\n    }\n  }\n<\/span><\/style<\/span>><\/span>\n<\/code><\/span>Code language:<\/span> HTML, XML<\/span> (<\/span>xml<\/span>)<\/span><\/small><\/pre>\n
Now if you run the app with npm run dev<\/code>, you should see something like this.<\/p>\n
\"svelte<\/p>\n
That\u2019s it! Now you\u2019ve made a commonly used component in a completely new framework. Take a minute and think about the differences and similarities between this and the framework you normally work with just to see how well you understand them both.<\/p>\n
Finished code<\/h2>\n
You can check out all of the code in the image-carousel<\/code> folder of this repo<\/a>. You can also check out the app in this Code Sandbox<\/a>.<\/p>\n
<CodeSandBox\ntitle=\u201cpedantic-shamir-l8py0b\u201d\nid=\u201cpedantic-shamir-l8py0b\u201d\n\/><\/p>\n
Conclusion<\/h2>\n
It\u2019s nice to try out different frameworks to see what they do differently and see where you can take some pieces from one and apply them to others. Svelte is doing great as a tool developers like to use, so maybe one day we\u2019ll see more companies using it to build their apps. Plus it\u2019s good to know there\u2019s a framework out there that doesn\u2019t use the virtual DOM.<\/p>\n<\/div>","protected":false},"excerpt":{"rendered":"","protected":false},"author":41,"featured_media":27742,"comment_status":"","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"_cloudinary_featured_overwrite":false,"footnotes":""},"categories":[1],"tags":[134,370,376,371],"class_list":["post-27741","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-uncategorized","tag-guest-post","tag-image","tag-svelte","tag-under-review"],"acf":[],"yoast_head":"\nImplement an Image Carousel in Svelte<\/title>\n<meta name=\"description\" content=\"We're going to build an image carousel with Svelte to see how this framework is different from the other popular front-end JavaScript frameworks.\" \/>\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\/guest_post\/implement-an-image-carousel-in-svelte\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Implement an Image Carousel in Svelte\" \/>\n<meta property=\"og:description\" content=\"We're going to build an image carousel with Svelte to see how this framework is different from the other popular front-end JavaScript frameworks.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/cloudinary.com\/blog\/guest_post\/implement-an-image-carousel-in-svelte\/\" \/>\n<meta property=\"og:site_name\" content=\"Cloudinary Blog\" \/>\n<meta property=\"article:published_time\" content=\"2022-07-06T09:24:35+00:00\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:image\" content=\"https:\/\/res.cloudinary.com\/cloudinary-marketing\/images\/f_auto,q_auto\/v1681926388\/Web_Assets\/blog\/6690c4a0f96afdcd02e5695250f3fc9afefea606-5117x7671-1_277425bc79\/6690c4a0f96afdcd02e5695250f3fc9afefea606-5117x7671-1_277425bc79.jpg?_i=AA\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"NewsArticle\",\"@id\":\"https:\/\/cloudinary.com\/blog\/guest_post\/implement-an-image-carousel-in-svelte\/#article\",\"isPartOf\":{\"@id\":\"https:\/\/cloudinary.com\/blog\/guest_post\/implement-an-image-carousel-in-svelte\/\"},\"author\":{\"name\":\"\",\"@id\":\"\"},\"headline\":\"Implement an Image Carousel in Svelte\",\"datePublished\":\"2022-07-06T09:24:35+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\/\/cloudinary.com\/blog\/guest_post\/implement-an-image-carousel-in-svelte\/\"},\"wordCount\":6,\"publisher\":{\"@id\":\"https:\/\/cloudinary.com\/blog\/#organization\"},\"image\":{\"@id\":\"https:\/\/cloudinary.com\/blog\/guest_post\/implement-an-image-carousel-in-svelte\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/res.cloudinary.com\/cloudinary-marketing\/images\/f_auto,q_auto\/v1681926388\/Web_Assets\/blog\/6690c4a0f96afdcd02e5695250f3fc9afefea606-5117x7671-1_277425bc79\/6690c4a0f96afdcd02e5695250f3fc9afefea606-5117x7671-1_277425bc79.jpg?_i=AA\",\"keywords\":[\"Guest Post\",\"Image\",\"Svelte\",\"Under Review\"],\"inLanguage\":\"en-US\",\"copyrightYear\":\"2022\",\"copyrightHolder\":{\"@id\":\"https:\/\/cloudinary.com\/#organization\"}},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/cloudinary.com\/blog\/guest_post\/implement-an-image-carousel-in-svelte\/\",\"url\":\"https:\/\/cloudinary.com\/blog\/guest_post\/implement-an-image-carousel-in-svelte\/\",\"name\":\"Implement an Image Carousel in Svelte\",\"isPartOf\":{\"@id\":\"https:\/\/cloudinary.com\/blog\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\/\/cloudinary.com\/blog\/guest_post\/implement-an-image-carousel-in-svelte\/#primaryimage\"},\"image\":{\"@id\":\"https:\/\/cloudinary.com\/blog\/guest_post\/implement-an-image-carousel-in-svelte\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/res.cloudinary.com\/cloudinary-marketing\/images\/f_auto,q_auto\/v1681926388\/Web_Assets\/blog\/6690c4a0f96afdcd02e5695250f3fc9afefea606-5117x7671-1_277425bc79\/6690c4a0f96afdcd02e5695250f3fc9afefea606-5117x7671-1_277425bc79.jpg?_i=AA\",\"datePublished\":\"2022-07-06T09:24:35+00:00\",\"description\":\"We're going to build an image carousel with Svelte to see how this framework is different from the other popular front-end JavaScript frameworks.\",\"breadcrumb\":{\"@id\":\"https:\/\/cloudinary.com\/blog\/guest_post\/implement-an-image-carousel-in-svelte\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/cloudinary.com\/blog\/guest_post\/implement-an-image-carousel-in-svelte\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/cloudinary.com\/blog\/guest_post\/implement-an-image-carousel-in-svelte\/#primaryimage\",\"url\":\"https:\/\/res.cloudinary.com\/cloudinary-marketing\/images\/f_auto,q_auto\/v1681926388\/Web_Assets\/blog\/6690c4a0f96afdcd02e5695250f3fc9afefea606-5117x7671-1_277425bc79\/6690c4a0f96afdcd02e5695250f3fc9afefea606-5117x7671-1_277425bc79.jpg?_i=AA\",\"contentUrl\":\"https:\/\/res.cloudinary.com\/cloudinary-marketing\/images\/f_auto,q_auto\/v1681926388\/Web_Assets\/blog\/6690c4a0f96afdcd02e5695250f3fc9afefea606-5117x7671-1_277425bc79\/6690c4a0f96afdcd02e5695250f3fc9afefea606-5117x7671-1_277425bc79.jpg?_i=AA\",\"width\":5117,\"height\":7671},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/cloudinary.com\/blog\/guest_post\/implement-an-image-carousel-in-svelte\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\/\/cloudinary.com\/blog\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Implement an Image Carousel in Svelte\"}]},{\"@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\":\"\"}]}<\/script>\n<!-- \/ Yoast SEO Premium plugin. -->","yoast_head_json":{"title":"Implement an Image Carousel in Svelte","description":"We're going to build an image carousel with Svelte to see how this framework is different from the other popular front-end JavaScript frameworks.","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\/guest_post\/implement-an-image-carousel-in-svelte\/","og_locale":"en_US","og_type":"article","og_title":"Implement an Image Carousel in Svelte","og_description":"We're going to build an image carousel with Svelte to see how this framework is different from the other popular front-end JavaScript frameworks.","og_url":"https:\/\/cloudinary.com\/blog\/guest_post\/implement-an-image-carousel-in-svelte\/","og_site_name":"Cloudinary Blog","article_published_time":"2022-07-06T09:24:35+00:00","twitter_card":"summary_large_image","twitter_image":"https:\/\/res.cloudinary.com\/cloudinary-marketing\/images\/f_auto,q_auto\/v1681926388\/Web_Assets\/blog\/6690c4a0f96afdcd02e5695250f3fc9afefea606-5117x7671-1_277425bc79\/6690c4a0f96afdcd02e5695250f3fc9afefea606-5117x7671-1_277425bc79.jpg?_i=AA","schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"NewsArticle","@id":"https:\/\/cloudinary.com\/blog\/guest_post\/implement-an-image-carousel-in-svelte\/#article","isPartOf":{"@id":"https:\/\/cloudinary.com\/blog\/guest_post\/implement-an-image-carousel-in-svelte\/"},"author":{"name":"","@id":""},"headline":"Implement an Image Carousel in Svelte","datePublished":"2022-07-06T09:24:35+00:00","mainEntityOfPage":{"@id":"https:\/\/cloudinary.com\/blog\/guest_post\/implement-an-image-carousel-in-svelte\/"},"wordCount":6,"publisher":{"@id":"https:\/\/cloudinary.com\/blog\/#organization"},"image":{"@id":"https:\/\/cloudinary.com\/blog\/guest_post\/implement-an-image-carousel-in-svelte\/#primaryimage"},"thumbnailUrl":"https:\/\/res.cloudinary.com\/cloudinary-marketing\/images\/f_auto,q_auto\/v1681926388\/Web_Assets\/blog\/6690c4a0f96afdcd02e5695250f3fc9afefea606-5117x7671-1_277425bc79\/6690c4a0f96afdcd02e5695250f3fc9afefea606-5117x7671-1_277425bc79.jpg?_i=AA","keywords":["Guest Post","Image","Svelte","Under Review"],"inLanguage":"en-US","copyrightYear":"2022","copyrightHolder":{"@id":"https:\/\/cloudinary.com\/#organization"}},{"@type":"WebPage","@id":"https:\/\/cloudinary.com\/blog\/guest_post\/implement-an-image-carousel-in-svelte\/","url":"https:\/\/cloudinary.com\/blog\/guest_post\/implement-an-image-carousel-in-svelte\/","name":"Implement an Image Carousel in Svelte","isPartOf":{"@id":"https:\/\/cloudinary.com\/blog\/#website"},"primaryImageOfPage":{"@id":"https:\/\/cloudinary.com\/blog\/guest_post\/implement-an-image-carousel-in-svelte\/#primaryimage"},"image":{"@id":"https:\/\/cloudinary.com\/blog\/guest_post\/implement-an-image-carousel-in-svelte\/#primaryimage"},"thumbnailUrl":"https:\/\/res.cloudinary.com\/cloudinary-marketing\/images\/f_auto,q_auto\/v1681926388\/Web_Assets\/blog\/6690c4a0f96afdcd02e5695250f3fc9afefea606-5117x7671-1_277425bc79\/6690c4a0f96afdcd02e5695250f3fc9afefea606-5117x7671-1_277425bc79.jpg?_i=AA","datePublished":"2022-07-06T09:24:35+00:00","description":"We're going to build an image carousel with Svelte to see how this framework is different from the other popular front-end JavaScript frameworks.","breadcrumb":{"@id":"https:\/\/cloudinary.com\/blog\/guest_post\/implement-an-image-carousel-in-svelte\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/cloudinary.com\/blog\/guest_post\/implement-an-image-carousel-in-svelte\/"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/cloudinary.com\/blog\/guest_post\/implement-an-image-carousel-in-svelte\/#primaryimage","url":"https:\/\/res.cloudinary.com\/cloudinary-marketing\/images\/f_auto,q_auto\/v1681926388\/Web_Assets\/blog\/6690c4a0f96afdcd02e5695250f3fc9afefea606-5117x7671-1_277425bc79\/6690c4a0f96afdcd02e5695250f3fc9afefea606-5117x7671-1_277425bc79.jpg?_i=AA","contentUrl":"https:\/\/res.cloudinary.com\/cloudinary-marketing\/images\/f_auto,q_auto\/v1681926388\/Web_Assets\/blog\/6690c4a0f96afdcd02e5695250f3fc9afefea606-5117x7671-1_277425bc79\/6690c4a0f96afdcd02e5695250f3fc9afefea606-5117x7671-1_277425bc79.jpg?_i=AA","width":5117,"height":7671},{"@type":"BreadcrumbList","@id":"https:\/\/cloudinary.com\/blog\/guest_post\/implement-an-image-carousel-in-svelte\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/cloudinary.com\/blog\/"},{"@type":"ListItem","position":2,"name":"Implement an Image Carousel in Svelte"}]},{"@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":""}]}},"jetpack_featured_media_url":"https:\/\/res.cloudinary.com\/cloudinary-marketing\/images\/f_auto,q_auto\/v1681926388\/Web_Assets\/blog\/6690c4a0f96afdcd02e5695250f3fc9afefea606-5117x7671-1_277425bc79\/6690c4a0f96afdcd02e5695250f3fc9afefea606-5117x7671-1_277425bc79.jpg?_i=AA","_links":{"self":[{"href":"https:\/\/cloudinary.com\/blog\/wp-json\/wp\/v2\/posts\/27741","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\/41"}],"replies":[{"embeddable":true,"href":"https:\/\/cloudinary.com\/blog\/wp-json\/wp\/v2\/comments?post=27741"}],"version-history":[{"count":0,"href":"https:\/\/cloudinary.com\/blog\/wp-json\/wp\/v2\/posts\/27741\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/cloudinary.com\/blog\/wp-json\/wp\/v2\/media\/27742"}],"wp:attachment":[{"href":"https:\/\/cloudinary.com\/blog\/wp-json\/wp\/v2\/media?parent=27741"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/cloudinary.com\/blog\/wp-json\/wp\/v2\/categories?post=27741"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/cloudinary.com\/blog\/wp-json\/wp\/v2\/tags?post=27741"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}
This imports our Carousel<\/code> component and renders it on the page with a little message. A big difference between App.svelte<\/code> and Carousel.svelte<\/code> is that we have some styles defined in the <style><\/code> tag. You can almost think of these style tags like styled components<\/a> if you\u2019ve ever worked with that package.<\/p>\n
The request inside the onMount<\/code> function is going to need your Cloudinary API credentials and you can get those from your Cloudinary settings. The request we\u2019re making will use your credentials to retrieve all of the images on your Cloudinary account. If you want to limit what gets returned, check out the API docs<\/a>.<\/p>\n