{"id":32908,"date":"2024-03-04T07:00:00","date_gmt":"2024-03-04T15:00:00","guid":{"rendered":"https:\/\/cloudinary.com\/blog\/?p=32908"},"modified":"2025-02-22T12:30:46","modified_gmt":"2025-02-22T20:30:46","slug":"building-javascript-image-carousel","status":"publish","type":"post","link":"https:\/\/cloudinary.com\/blog\/building-javascript-image-carousel","title":{"rendered":"Building a Javascript Image Carousel Using Cloudinary"},"content":{"rendered":"\n<p>Developing an e-commerce site can require displaying hundreds of product images, each with a varying size and resolution. How can one team manage that many images and variations of images, and keep them constantly updated?<\/p>\n\n\n\n<p>With Cloudinary\u2019s Digital Asset Management solutions, developers can manage their media library, image optimizations, and image transformations at scale. In this blog post, we\u2019ll walk through how to display multiple images on your site by adding an image carousel using Javascript and Cloudinary.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\"><strong>Why Add an Image Carousel?<\/strong><\/h2>\n\n\n\n<p>An <a href=\"https:\/\/cloudinary.com\/glossary\/image-carousels\">image carousel<\/a> is a dynamic web element showcasing images that rotate or slide on a web page or application. Carousels are important for the web and serve multiple purposes, including:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li><strong>Visual appeal<\/strong>. Image carousels enhance a website&#8217;s visual appeal by presenting various content in an interactive and visually pleasing format.<\/li>\n\n\n\n<li><strong>Space optimization<\/strong>. Carousels efficiently utilize limited space, enabling websites to showcase multiple products, services, or messages within a confined area without clutter.<\/li>\n\n\n\n<li><strong>Dynamic content<\/strong>. They facilitate displaying dynamic and diverse content, preventing static web pages and keeping the user experience fresh and engaging.<\/li>\n\n\n\n<li><strong>User interaction<\/strong>. Carousels encourage user interaction through navigation controls, allowing visitors to manually browse content or automatically cycle through images, promoting engagement.<\/li>\n\n\n\n<li><strong>Storytelling<\/strong>. Carousels provide a platform for storytelling by sequentially presenting a series of images or messages, guiding users through a narrative, or showcasing a product&#8217;s features.<\/li>\n\n\n\n<li><strong>Promotions and highlights<\/strong>. Businesses can use carousels to highlight promotions, featured products, or important announcements, ensuring essential information is prominently displayed.<\/li>\n\n\n\n<li><strong>Responsive design<\/strong>. Modern image carousels are designed to be responsive, adapting seamlessly to various screen sizes and devices, providing a consistent user experience.<\/li>\n\n\n\n<li><strong>Call to action (CTA).<\/strong> Each carousel item can include a call to action, directing users to specific pages or actions, thereby driving conversions and achieving business goals.<\/li>\n<\/ul>\n\n\n\n<h2 class=\"wp-block-heading\">Building a JavaScript Image Carousel<\/h2>\n\n\n\n<p>First, let\u2019s create our development environment and the necessary files.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">Step 1: Set Up the Development Environment<\/h3>\n\n\n\n<p>In a new directory on your computer, create an <code>index.html<\/code> file with the following code snippet inside:<\/p>\n\n\n<pre class=\"wp-block-code\" 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-meta\">&lt;!DOCTYPE <span class=\"hljs-meta-keyword\">html<\/span>&gt;<\/span>\n<span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">html<\/span>&gt;<\/span>\n<span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">head<\/span>&gt;<\/span>\n\u00a0 <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">title<\/span>&gt;<\/span>Image Carousel<span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">title<\/span>&gt;<\/span>\n\u00a0 <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">link<\/span> <span class=\"hljs-attr\">rel<\/span>=<span class=\"hljs-string\">\"stylesheet\"<\/span> <span class=\"hljs-attr\">type<\/span>=<span class=\"hljs-string\">\"text\/css\"<\/span> <span class=\"hljs-attr\">href<\/span>=<span class=\"hljs-string\">\"styles.css\"<\/span>&gt;<\/span>\n<span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">head<\/span>&gt;<\/span>\n<span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">body<\/span>&gt;<\/span>\n\u00a0 <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">div<\/span> <span class=\"hljs-attr\">class<\/span>=<span class=\"hljs-string\">\"carousel\"<\/span>&gt;<\/span>\n\u00a0 \u00a0 <span class=\"hljs-comment\">&lt;!-- Images will go here --&gt;<\/span>\n\u00a0 <span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">div<\/span>&gt;<\/span>\u00a0\u00a0<span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">div<\/span> <span class=\"hljs-attr\">class<\/span>=<span class=\"hljs-string\">\"nav\"<\/span>&gt;<\/span>\u00a0\u00a0\u00a0\u00a0<span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">button<\/span> <span class=\"hljs-attr\">id<\/span>=<span class=\"hljs-string\">\"prev\"<\/span>&gt;<\/span>Prev<span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">button<\/span>&gt;<\/span>\u00a0\u00a0\u00a0\u00a0<span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">button<\/span> <span class=\"hljs-attr\">id<\/span>=<span class=\"hljs-string\">\"next\"<\/span>&gt;<\/span>Next<span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">button<\/span>&gt;<\/span>\u00a0\u00a0<span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">div<\/span>&gt;<\/span>\n\n\u00a0 <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">script<\/span> <span class=\"hljs-attr\">defer<\/span> <span class=\"hljs-attr\">type<\/span>=<span class=\"hljs-string\">\"module\"<\/span>&gt;<\/span><span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">script<\/span>&gt;<\/span>\n<span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">body<\/span>&gt;<\/span>\n<span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">html<\/span>&gt;<\/span><\/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\n\n<p>If you open the <code>index.html<\/code> in your browser, you should see a blank web page titled <strong>Image Carousel<\/strong>.<\/p>\n\n\n\n<p>Let\u2019s add some images as placeholders and replace the <code>&lt;!-- Images will go here --&gt;<\/code> comment with the following code:<\/p>\n\n\n<pre class=\"wp-block-code\" 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\">img<\/span> <span class=\"hljs-attr\">src<\/span>=<span class=\"hljs-string\">\"https:\/\/dummyimage.com\/600x400\/000\/fff\"<\/span> <span class=\"hljs-attr\">alt<\/span>=<span class=\"hljs-string\">\"Placeholder 1\"<\/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\">\"https:\/\/dummyimage.com\/600x400\/000cbb\/fff\"<\/span> <span class=\"hljs-attr\">alt<\/span>=<span class=\"hljs-string\">\"Placeholder 2\"<\/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\">\"https:\/\/dummyimage.com\/600x400\/21fffb\/fff\"<\/span> <span class=\"hljs-attr\">alt<\/span>=<span class=\"hljs-string\">\"Placeholder 3\"<\/span>&gt;<\/span><span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">img<\/span> <span class=\"hljs-attr\">src<\/span>=<span class=\"hljs-string\">\"https:\/\/dummyimage.com\/600x400\/21ff76\/000\"<\/span> <span class=\"hljs-attr\">alt<\/span>=<span class=\"hljs-string\">\"Placeholder 4\"<\/span>&gt;<\/span>\n<span class=\"hljs-comment\">&lt;!-- Add more images as needed --&gt;<\/span><\/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\n\n<p>The site should look like the image below:<\/p>\n\n\n\n<figure class=\"wp-block-image\"><img decoding=\"async\" src=\"https:\/\/lh7-us.googleusercontent.com\/VlmKJ0qx877R1B_09j2QbLM9dHXnAJNOZLTT84gKRVvSd67yFJaj6RXamKiQzc7YdXLgEo8B5EFBaot5S1gtlPTcBETnAJ4grwNMWexGc7NSG2rUk06miRntgFc__qsJlaCyZEch0UDgzjNbZXcgMvQ\" alt=\"\"\/><\/figure>\n\n\n\n<h3 class=\"wp-block-heading\">Step 2: Add Style to the Carousel<\/h3>\n\n\n\n<p>In our website directory, create a new CSS file with the name <code>styles.css<\/code>, and add the following CSS styles:<\/p>\n\n\n<pre class=\"wp-block-code\" 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\">.carousel {\n\u00a0 \u00a0 width: 400px;\n\u00a0 \u00a0 height: 300px;\n\u00a0 \u00a0 overflow: hidden;\n\u00a0 \u00a0 position: relative;\n\u00a0 }\n\u00a0\n\u00a0 .carousel <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">strong<\/span>&gt;<\/span>img<span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">strong<\/span>&gt;<\/span> {\n\u00a0 \u00a0 width: 100%;\n\u00a0 \u00a0 height: 100%;\n\u00a0 \u00a0 object-fit: cover;\n\u00a0 \u00a0 position: absolute;\n\u00a0 \u00a0 top: 0;\n\u00a0 \u00a0 left: 0;\n\u00a0 \u00a0 opacity: 0;\n\u00a0 \u00a0 transition: opacity 0.5s ease-in-out;\n\u00a0 }\n\u00a0\n\u00a0 .carousel <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">strong<\/span>&gt;<\/span>img<span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">strong<\/span>&gt;<\/span>.active {\n\u00a0 \u00a0 opacity: 1;\n\u00a0 }\n\n\u00a0 .nav {\n\u00a0 \u00a0 display: flex;\n\u00a0 \u00a0 align-items: center;\n\u00a0 \u00a0 gap: 20px;\n\u00a0 \u00a0 margin-top: 10px;\n\u00a0 }\n\n\u00a0 .nav <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">strong<\/span>&gt;<\/span>button<span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">strong<\/span>&gt;<\/span> {\n\u00a0 \u00a0 padding: 10px 20px;\n\u00a0 \u00a0 border-radius: 10px;\n\u00a0 \u00a0 outline: none;\n\u00a0 \u00a0 border: none;\n\u00a0 \u00a0 background: #000;\n\u00a0 \u00a0 color: #fff;\n\u00a0 \u00a0 cursor: pointer;\n\u00a0 }<\/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\n\n<p>After adding the above code to the <code>styles.css<\/code> file, the images in the div with <code>class=\"carousel\"<\/code> should be hidden because we set the <code>opacity<\/code> of all <code>img<\/code> tags inside <code>.carousel<\/code> to <code>0<\/code> and only the <code>img<\/code> with <code>class=\"active\"<\/code> to <code>1<\/code>.&nbsp;<\/p>\n\n\n\n<p>We need a default active image to be the first image displayed on our carousel. Set the class of the image with <code>alt=\"Placeholder 1\"<\/code> to <code>active<\/code> to do this:<\/p>\n\n\n<pre class=\"wp-block-code\" 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\">div<\/span> <span class=\"hljs-attr\">class<\/span>=<span class=\"hljs-string\">\"carousel\"<\/span>&gt;<\/span>\n\u00a0 <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">img<\/span> <span class=\"hljs-attr\">src<\/span>=<span class=\"hljs-string\">\"https:\/\/dummyimage.com\/600x400\/000\/fff\"<\/span> <span class=\"hljs-attr\">class<\/span>=<span class=\"hljs-string\">\"active\"<\/span> <span class=\"hljs-attr\">alt<\/span>=<span class=\"hljs-string\">\"Placeholder 1\"<\/span>&gt;<\/span>\n\u00a0 <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">img<\/span> <span class=\"hljs-attr\">src<\/span>=<span class=\"hljs-string\">\"https:\/\/dummyimage.com\/600x400\/000cbb\/fff\"<\/span> <span class=\"hljs-attr\">alt<\/span>=<span class=\"hljs-string\">\"Placeholder 2\"<\/span>&gt;<\/span>\n\u00a0 <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">img<\/span> <span class=\"hljs-attr\">src<\/span>=<span class=\"hljs-string\">\"https:\/\/dummyimage.com\/600x400\/21fffb\/fff\"<\/span> <span class=\"hljs-attr\">alt<\/span>=<span class=\"hljs-string\">\"Placeholder 3\"<\/span>&gt;<\/span>\n\u00a0 <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">img<\/span> <span class=\"hljs-attr\">src<\/span>=<span class=\"hljs-string\">\"https:\/\/dummyimage.com\/600x400\/21ff76\/000\"<\/span> <span class=\"hljs-attr\">alt<\/span>=<span class=\"hljs-string\">\"Placeholder 4\"<\/span>&gt;<\/span>\n<span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">div<\/span>&gt;<\/span><\/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\n\n<p>Now, we should have the first image displayed while the others remain hidden, as in the image below:<\/p>\n\n\n\n<figure class=\"wp-block-image\"><img decoding=\"async\" src=\"https:\/\/lh7-us.googleusercontent.com\/y0DoIZw7gKqxNlqL63jZWIHad0MuXcfBpLlKa2tCCZYfuY5xeWd66vkErw5fks2N5W8DJSlKBewq7TA-WXIgz7hR4dgqaUvkEln1saDC6fwg5ateDEbKgjT7SkGj21kFbJ7OA5ijGkRiVJ1_NHq7UkM\" alt=\"\"\/><\/figure>\n\n\n\n<h3 class=\"wp-block-heading\">Step 3: Adding Basic Carousel UX Functionalities<\/h3>\n\n\n\n<p>Next, we want the images to change after a certain time or when we click the <strong>Next\/Prev<\/strong> button. To accomplish this, add the following code for carousel functionality to our <code>&lt;script type=\"module\"&gt;<\/code> tag:<\/p>\n\n\n<pre class=\"wp-block-code\" aria-describedby=\"shcb-language-5\" data-shcb-language-name=\"JavaScript\" data-shcb-language-slug=\"javascript\"><span><code class=\"hljs language-javascript shcb-wrap-lines\"><span class=\"hljs-keyword\">const<\/span> carousel = <span class=\"hljs-built_in\">document<\/span>.querySelector(<span class=\"hljs-string\">'.carousel'<\/span>);\n<span class=\"hljs-keyword\">const<\/span> images = carousel.querySelectorAll(<span class=\"hljs-string\">'img'<\/span>);\n<span class=\"hljs-keyword\">const<\/span> prevBtn = <span class=\"hljs-built_in\">document<\/span>.querySelector(<span class=\"hljs-string\">'#prev'<\/span>);\n<span class=\"hljs-keyword\">const<\/span> nextBtn = <span class=\"hljs-built_in\">document<\/span>.querySelector(<span class=\"hljs-string\">'#next'<\/span>);\n\n<span class=\"hljs-keyword\">let<\/span> currentIndex = <span class=\"hljs-number\">0<\/span>;\n\n<span class=\"hljs-function\"><span class=\"hljs-keyword\">function<\/span> <span class=\"hljs-title\">showImage<\/span>(<span class=\"hljs-params\">index<\/span>) <\/span>{\n  images.forEach(<span class=\"hljs-function\">(<span class=\"hljs-params\">image, i<\/span>) =&gt;<\/span> {\n    <span class=\"hljs-keyword\">if<\/span> (i === index) {\n      image.classList.add(<span class=\"hljs-string\">'active'<\/span>);\n    } <span class=\"hljs-keyword\">else<\/span> {\n      image.classList.remove(<span class=\"hljs-string\">'active'<\/span>);\n    }\n  });\n}\n\n<span class=\"hljs-function\"><span class=\"hljs-keyword\">function<\/span> <span class=\"hljs-title\">nextImage<\/span>(<span class=\"hljs-params\"><\/span>) <\/span>{\n    currentIndex = (currentIndex + <span class=\"hljs-number\">1<\/span>) % images.length;\n    showImage(currentIndex);\n}\n\n<span class=\"hljs-function\"><span class=\"hljs-keyword\">function<\/span> <span class=\"hljs-title\">prevImage<\/span>(<span class=\"hljs-params\"><\/span>) <\/span>{\n    currentIndex = (currentIndex - <span class=\"hljs-number\">1<\/span> + images.length) % images.length;\n    showImage(currentIndex);\n}\n\n<span class=\"hljs-keyword\">const<\/span> changeImage = setInterval(nextImage, <span class=\"hljs-number\">3000<\/span>);\n\n<span class=\"hljs-comment\">\/\/ Add event listeners for navigation<\/span>\nprevBtn.addEventListener(<span class=\"hljs-string\">'click'<\/span>, prevImage);\nnextBtn.addEventListener(<span class=\"hljs-string\">'click'<\/span>, nextImage);<\/code><\/span><small class=\"shcb-language\" id=\"shcb-language-5\"><span class=\"shcb-language__label\">Code language:<\/span> <span class=\"shcb-language__name\">JavaScript<\/span> <span class=\"shcb-language__paren\">(<\/span><span class=\"shcb-language__slug\">javascript<\/span><span class=\"shcb-language__paren\">)<\/span><\/small><\/pre>\n\n\n<p>In the code above, we used the <code>document.querySelector<\/code> method to select the elements we wanted to give the carousel UX. Then we set the default <code>currentIndex<\/code> to <code>0<\/code> because JavaScript will handle the list as an array when we loop through the images in our carousel (0, 1, 2, 3).<\/p>\n\n\n\n<p>We also defined the <code>showImage<\/code> function to loop over all of the image elements in our carousel, remove the <code>active<\/code> class, and then apply the <code>active<\/code> class to the image with the <code>currentIndex<\/code>. We use <code>nextImage<\/code> and <code>prevImage<\/code> functions to listen for button click events and update the <code>currentIndex<\/code>.<\/p>\n\n\n\n<p>That&#8217;s it! Now, you have a basic JavaScript image carousel. You can customize the JS functionality or the CSS to your heart\u2019s content. Now, let\u2019s look at how to include Cloudinary in our project and retrieve images from our Cloudinary library.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Integrating Cloudinary Into a JavaScript Project<\/h2>\n\n\n\n<p>We can make our carousel even more appealing by using Cloudinary to add dynamic images. To get started, follow these steps:<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">Step 1: Setting Up a Cloudinary Account and Obtaining API Keys<\/h3>\n\n\n\n<p>To use Cloudinary in your app, you&#8217;ll need to create an account. Head over to <a href=\"https:\/\/cloudinary.com\/\">Cloudinary<\/a> and sign up for free. Once you&#8217;ve successfully signed in, you can find your API keys in your Cloudinary console dashboard. Make sure to note down your cloud name, API key, and API secret.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">Step 2: Uploading Images to Cloudinary<\/h3>\n\n\n\n<p>We need to upload some images to our Cloudinary library; we could do so manually or programmatically. We\u2019ll manually upload the images to our Cloudinary account for this example.<\/p>\n\n\n\n<p>To do this, navigate to your Cloudinary Console&#8217;s Media Library and select the Folders tab. Click the <strong>Create a folder<\/strong> button and give it the name of your project, for example, &#8220;carousel&#8221;.<\/p>\n\n\n\n<p><br><img loading=\"lazy\" decoding=\"async\" width=\"624\" height=\"117\" src=\"https:\/\/lh7-us.googleusercontent.com\/NEdgD138Es4oQnL-78mygr9n0pG59Y29X3KxNdGO0fk1HEuMvmazAHKESLIxpLA7DxoaHC5ZVS9yH27IoY8mO4XLdDYItobN6ARxWoPE3PW2v5zB9ifoqCoK-VKYbAnOnqBDBnNzoeWOoxABlPT_5jQ\"><br><\/p>\n\n\n\n<p>Next, open the new folder and upload some free stock images. You can either drag and drop or use the site&#8217;s upload form.<\/p>\n\n\n\n<p>Let&#8217;s retrieve all the images we need once we&#8217;ve successfully uploaded them.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">Step 3: Fetching and Displaying Images From Cloudinary<\/h3>\n\n\n\n<p>To fetch and display images from Cloudinary, we&#8217;ll use the Cloudinary JavaScript SDK. First, we must import Cloudinary into our project by including the following code at the beginning of the <code>&lt;script type=\"module\"&gt;<\/code> tag:<\/p>\n\n\n<pre class=\"wp-block-code\" aria-describedby=\"shcb-language-6\" data-shcb-language-name=\"JavaScript\" data-shcb-language-slug=\"javascript\"><span><code class=\"hljs language-javascript shcb-wrap-lines\"><span class=\"hljs-keyword\">import<\/span> { Cloudinary} <span class=\"hljs-keyword\">from<\/span> <span class=\"hljs-string\">'https:\/\/cdn.jsdelivr.net\/npm\/@cloudinary\/url-gen@1.14.0\/+esm'<\/span><\/code><\/span><small class=\"shcb-language\" id=\"shcb-language-6\"><span class=\"shcb-language__label\">Code language:<\/span> <span class=\"shcb-language__name\">JavaScript<\/span> <span class=\"shcb-language__paren\">(<\/span><span class=\"shcb-language__slug\">javascript<\/span><span class=\"shcb-language__paren\">)<\/span><\/small><\/pre>\n\n\n<p>We can now configure Cloduinary and fetch our photos after importing Cloudinary into our project. Let&#8217;s replace the code in the <code>&lt;script type=\"module\"&gt;<\/code> part with this:<\/p>\n\n\n<pre class=\"wp-block-code\" aria-describedby=\"shcb-language-7\" data-shcb-language-name=\"PHP\" data-shcb-language-slug=\"php\"><span><code class=\"hljs language-php shcb-wrap-lines\">\u00a0 \u00a0 &lt;strong&gt;import&lt;\/strong&gt; { Cloudinary} &lt;strong&gt;from&lt;\/strong&gt; <span class=\"hljs-string\">'https:\/\/cdn.jsdelivr.net\/npm\/@cloudinary\/url-gen@1.14.0\/+esm'<\/span>\n\n\u00a0 \u00a0 &lt;strong&gt;<span class=\"hljs-keyword\">const<\/span>&lt;\/strong&gt; carousel = document.querySelector(<span class=\"hljs-string\">'.carousel'<\/span>);\n\u00a0 \u00a0 &lt;strong&gt;let&lt;\/strong&gt; images; <span class=\"hljs-comment\">\/\/ Declare images variable<\/span>\n\u00a0 \u00a0 &lt;strong&gt;<span class=\"hljs-keyword\">const<\/span>&lt;\/strong&gt; prevBtn = document.querySelector(<span class=\"hljs-string\">'#prev'<\/span>);\n\u00a0 \u00a0 &lt;strong&gt;<span class=\"hljs-keyword\">const<\/span>&lt;\/strong&gt; &lt;strong&gt;nextBtn&lt;\/strong&gt; = document.querySelector(<span class=\"hljs-string\">'#next'<\/span>);\n\n\u00a0 \u00a0 &lt;strong&gt;let&lt;\/strong&gt; currentIndex = <span class=\"hljs-number\">0<\/span>;\n\n\u00a0 \u00a0 &lt;strong&gt;<span class=\"hljs-function\"><span class=\"hljs-keyword\">function<\/span>&lt;\/<span class=\"hljs-title\">strong<\/span>&gt; &lt;<span class=\"hljs-title\">strong<\/span>&gt;<span class=\"hljs-title\">showImage<\/span>&lt;\/<span class=\"hljs-title\">strong<\/span>&gt;<span class=\"hljs-params\">(index)<\/span> <\/span>{\n\u00a0 \u00a0 \u00a0 images = carousel.querySelectorAll(<span class=\"hljs-string\">'img'<\/span>); <span class=\"hljs-comment\">\/\/ Update images variable<\/span>\n\u00a0 \u00a0 \u00a0 images.<span class=\"hljs-keyword\">forEach<\/span>((image, i) =&gt; {\n\u00a0 \u00a0 \u00a0 \u00a0 &lt;strong&gt;<span class=\"hljs-keyword\">if<\/span>&lt;\/strong&gt; (i === index) {\n\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 image.classList.add(<span class=\"hljs-string\">'active'<\/span>);\n\u00a0 \u00a0 \u00a0 \u00a0 } &lt;strong&gt;<span class=\"hljs-keyword\">else<\/span>&lt;\/strong&gt; {\n\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 image.classList.remove(<span class=\"hljs-string\">'active'<\/span>);\n\u00a0 \u00a0 \u00a0 \u00a0 }\n\u00a0 \u00a0 \u00a0 });\n\u00a0 \u00a0 }\n\n\u00a0 \u00a0 &lt;strong&gt;<span class=\"hljs-function\"><span class=\"hljs-keyword\">function<\/span>&lt;\/<span class=\"hljs-title\">strong<\/span>&gt; &lt;<span class=\"hljs-title\">strong<\/span>&gt;<span class=\"hljs-title\">nextImage<\/span>&lt;\/<span class=\"hljs-title\">strong<\/span>&gt;<span class=\"hljs-params\">()<\/span> <\/span>{\n\u00a0 \u00a0 \u00a0 \u00a0 currentIndex = (currentIndex + <span class=\"hljs-number\">1<\/span>) % images.length;\n\u00a0 \u00a0 \u00a0 \u00a0 showImage(currentIndex);\n\u00a0 \u00a0 }\n\n\u00a0 \u00a0 &lt;strong&gt;<span class=\"hljs-function\"><span class=\"hljs-keyword\">function<\/span>&lt;\/<span class=\"hljs-title\">strong<\/span>&gt; &lt;<span class=\"hljs-title\">strong<\/span>&gt;<span class=\"hljs-title\">prevImage<\/span>&lt;\/<span class=\"hljs-title\">strong<\/span>&gt;<span class=\"hljs-params\">()<\/span> <\/span>{\n\u00a0 \u00a0 \u00a0 \u00a0 currentIndex = (currentIndex - <span class=\"hljs-number\">1<\/span> + images.length) % images.length;\n\u00a0 \u00a0 \u00a0 \u00a0 showImage(currentIndex);\n\u00a0 \u00a0 }\n\n\u00a0 \u00a0 &lt;strong&gt;<span class=\"hljs-keyword\">const<\/span>&lt;\/strong&gt; changeImage = setInterval(nextImage, <span class=\"hljs-number\">3000<\/span>);\n\n\u00a0 \u00a0 <span class=\"hljs-comment\">\/\/ Add event listeners for navigation<\/span>\n\u00a0 \u00a0 prevBtn.addEventListener(<span class=\"hljs-string\">'click'<\/span>, prevImage);\n\u00a0 \u00a0 &lt;strong&gt;nextBtn&lt;\/strong&gt;.addEventListener(<span class=\"hljs-string\">'click'<\/span>, nextImage);\n\n\u00a0 \u00a0 &lt;strong&gt;<span class=\"hljs-keyword\">const<\/span>&lt;\/strong&gt; cld = &lt;strong&gt;<span class=\"hljs-keyword\">new<\/span>&lt;\/strong&gt; Cloudinary({ cloud: { cloudName: <span class=\"hljs-string\">'XXXXXXXXXX'<\/span> } });\n\n\u00a0 \u00a0 &lt;strong&gt;<span class=\"hljs-keyword\">const<\/span>&lt;\/strong&gt; imgIDs = &#91;<span class=\"hljs-string\">\"img1\"<\/span>, <span class=\"hljs-string\">\"img2\"<\/span>, <span class=\"hljs-string\">\"img3\"<\/span>, <span class=\"hljs-string\">\"img4\"<\/span>];\n\n\u00a0 \u00a0 document.addEventListener(<span class=\"hljs-string\">'DOMContentLoaded'<\/span>, () =&gt; {\n\u00a0 \u00a0 \u00a0 imgIDs.<span class=\"hljs-keyword\">forEach<\/span>((img) =&gt; {\n\u00a0 \u00a0 \u00a0 \u00a0 &lt;strong&gt;<span class=\"hljs-keyword\">const<\/span>&lt;\/strong&gt; imgElement = document.createElement(<span class=\"hljs-string\">'img'<\/span>);\n\u00a0 \u00a0 \u00a0 \u00a0 imgElement.src = cld.image(`carousel\/${img}`).toURL();\n\u00a0 \u00a0 \u00a0 \u00a0 &lt;strong&gt;<span class=\"hljs-keyword\">if<\/span>&lt;\/strong&gt;(img === <span class=\"hljs-string\">\"img1\"<\/span>) imgElement.className = <span class=\"hljs-string\">\"active\"<\/span>\n\u00a0 \u00a0 \u00a0 \u00a0 carousel.appendChild(imgElement);\n\u00a0 \u00a0 \u00a0 });\n\n\u00a0 \u00a0 \u00a0 <span class=\"hljs-comment\">\/\/ After images are loaded, update the images variable<\/span>\n\u00a0 \u00a0 \u00a0 images = carousel.querySelectorAll(<span class=\"hljs-string\">'img'<\/span>);\n\u00a0 \u00a0 });<\/code><\/span><small class=\"shcb-language\" id=\"shcb-language-7\"><span class=\"shcb-language__label\">Code language:<\/span> <span class=\"shcb-language__name\">PHP<\/span> <span class=\"shcb-language__paren\">(<\/span><span class=\"shcb-language__slug\">php<\/span><span class=\"shcb-language__paren\">)<\/span><\/small><\/pre>\n\n\n<p>Since we\u2019re getting our images from an HTTP request now, we don&#8217;t know how long it will take to be ready. Instead, we declare the variable <code>let images<\/code> as null.<\/p>\n\n\n\n<p>Then, we defined a new Cloudinary instance and configured it with the Cloudinary <code>cloudName<\/code>. The placeholder <code>XXXXXXXXX<\/code> should be replaced with your actual Cloudinary Cloud Name, which can be found on your Cloudinary console dashboard.<\/p>\n\n\n\n<p>During the DOM content loading, we create image elements, using Cloudinary to establish their source URLs and append them to the carousel. The if statement ensures that the first image has the class <code>active<\/code>. Finally, the <code>images<\/code> variable is updated to accommodate the newly retrieved images.<\/p>\n\n\n\n<p>Also, remember to remove the placeholder <code>img<\/code> tags, as we are now creating the <code>img<\/code> elements programmatically after retrieving the images from Cloudinary. When we open the site in the browser, our carousel should display the images we&#8217;ve uploaded to Cloudinary!<\/p>\n\n\n\n<p>That&#8217;s it! Cloudinary has been successfully integrated into your JavaScript image carousel. Feel free to modify the code and experiment with more Cloudinary features.&nbsp;<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">What&#8217;s Next?<\/h2>\n\n\n\n<p>In this blog post, we covered the basics, from dynamic image management to the programmatic generation of image URLs, and how Cloudinary can improve user experiences.<\/p>\n\n\n\n<p>The official <a href=\"https:\/\/cloudinary.com\/documentation\">Cloudinary Documentation<\/a> is a comprehensive guide for those eager to deepen their understanding. The <a href=\"https:\/\/cloudinary.com\/blog\">Cloudinary Blog<\/a> keeps you updated on the newest trends, case studies, and tips, and the <a href=\"https:\/\/community.cloudinary.com\/\">Community Forums<\/a> allows you to interact with fellow developers.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>Developing an e-commerce site can require displaying hundreds of product images, each with a varying size and resolution. How can one team manage that many images and variations of images, and keep them constantly updated? With Cloudinary\u2019s Digital Asset Management solutions, developers can manage their media library, image optimizations, and image transformations at scale. In [&hellip;]<\/p>\n","protected":false},"author":87,"featured_media":32910,"comment_status":"closed","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"_cloudinary_featured_overwrite":false,"footnotes":""},"categories":[1],"tags":[89,177],"class_list":["post-32908","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-uncategorized","tag-digital-asset-management","tag-javascript"],"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>Building a Javascript Image Carousel Using Cloudinary<\/title>\n<meta name=\"description\" content=\"Learn how to display multiple images on your site by adding an image carousel using Javascript and Cloudinary, improving user experiences.\" \/>\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\/building-javascript-image-carousel\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Building a Javascript Image Carousel Using Cloudinary\" \/>\n<meta property=\"og:description\" content=\"Learn how to display multiple images on your site by adding an image carousel using Javascript and Cloudinary, improving user experiences.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/cloudinary.com\/blog\/building-javascript-image-carousel\" \/>\n<meta property=\"og:site_name\" content=\"Cloudinary Blog\" \/>\n<meta property=\"article:published_time\" content=\"2024-03-04T15:00:00+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2025-02-22T20:30:46+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/res.cloudinary.com\/cloudinary-marketing\/images\/v1708725845\/building_js_image_Carousel-blog\/building_js_image_Carousel-blog-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\/building-javascript-image-carousel#article\",\"isPartOf\":{\"@id\":\"https:\/\/cloudinary.com\/blog\/building-javascript-image-carousel\"},\"author\":{\"name\":\"melindapham\",\"@id\":\"https:\/\/cloudinary.com\/blog\/#\/schema\/person\/0d5ad601e4c3b5be89245dfb14be42d9\"},\"headline\":\"Building a Javascript Image Carousel Using Cloudinary\",\"datePublished\":\"2024-03-04T15:00:00+00:00\",\"dateModified\":\"2025-02-22T20:30:46+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\/\/cloudinary.com\/blog\/building-javascript-image-carousel\"},\"wordCount\":1154,\"publisher\":{\"@id\":\"https:\/\/cloudinary.com\/blog\/#organization\"},\"image\":{\"@id\":\"https:\/\/cloudinary.com\/blog\/building-javascript-image-carousel#primaryimage\"},\"thumbnailUrl\":\"https:\/\/res.cloudinary.com\/cloudinary-marketing\/images\/f_auto,q_auto\/v1708725845\/building_js_image_Carousel-blog\/building_js_image_Carousel-blog.jpg?_i=AA\",\"keywords\":[\"Digital Asset Management\",\"Javascript\"],\"inLanguage\":\"en-US\",\"copyrightYear\":\"2024\",\"copyrightHolder\":{\"@id\":\"https:\/\/cloudinary.com\/#organization\"}},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/cloudinary.com\/blog\/building-javascript-image-carousel\",\"url\":\"https:\/\/cloudinary.com\/blog\/building-javascript-image-carousel\",\"name\":\"Building a Javascript Image Carousel Using Cloudinary\",\"isPartOf\":{\"@id\":\"https:\/\/cloudinary.com\/blog\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\/\/cloudinary.com\/blog\/building-javascript-image-carousel#primaryimage\"},\"image\":{\"@id\":\"https:\/\/cloudinary.com\/blog\/building-javascript-image-carousel#primaryimage\"},\"thumbnailUrl\":\"https:\/\/res.cloudinary.com\/cloudinary-marketing\/images\/f_auto,q_auto\/v1708725845\/building_js_image_Carousel-blog\/building_js_image_Carousel-blog.jpg?_i=AA\",\"datePublished\":\"2024-03-04T15:00:00+00:00\",\"dateModified\":\"2025-02-22T20:30:46+00:00\",\"description\":\"Learn how to display multiple images on your site by adding an image carousel using Javascript and Cloudinary, improving user experiences.\",\"breadcrumb\":{\"@id\":\"https:\/\/cloudinary.com\/blog\/building-javascript-image-carousel#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/cloudinary.com\/blog\/building-javascript-image-carousel\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/cloudinary.com\/blog\/building-javascript-image-carousel#primaryimage\",\"url\":\"https:\/\/res.cloudinary.com\/cloudinary-marketing\/images\/f_auto,q_auto\/v1708725845\/building_js_image_Carousel-blog\/building_js_image_Carousel-blog.jpg?_i=AA\",\"contentUrl\":\"https:\/\/res.cloudinary.com\/cloudinary-marketing\/images\/f_auto,q_auto\/v1708725845\/building_js_image_Carousel-blog\/building_js_image_Carousel-blog.jpg?_i=AA\",\"width\":2000,\"height\":1100},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/cloudinary.com\/blog\/building-javascript-image-carousel#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\/\/cloudinary.com\/blog\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Building a Javascript Image Carousel Using Cloudinary\"}]},{\"@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":"Building a Javascript Image Carousel Using Cloudinary","description":"Learn how to display multiple images on your site by adding an image carousel using Javascript and Cloudinary, improving user experiences.","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\/building-javascript-image-carousel","og_locale":"en_US","og_type":"article","og_title":"Building a Javascript Image Carousel Using Cloudinary","og_description":"Learn how to display multiple images on your site by adding an image carousel using Javascript and Cloudinary, improving user experiences.","og_url":"https:\/\/cloudinary.com\/blog\/building-javascript-image-carousel","og_site_name":"Cloudinary Blog","article_published_time":"2024-03-04T15:00:00+00:00","article_modified_time":"2025-02-22T20:30:46+00:00","og_image":[{"width":2000,"height":1100,"url":"https:\/\/res.cloudinary.com\/cloudinary-marketing\/images\/v1708725845\/building_js_image_Carousel-blog\/building_js_image_Carousel-blog-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\/building-javascript-image-carousel#article","isPartOf":{"@id":"https:\/\/cloudinary.com\/blog\/building-javascript-image-carousel"},"author":{"name":"melindapham","@id":"https:\/\/cloudinary.com\/blog\/#\/schema\/person\/0d5ad601e4c3b5be89245dfb14be42d9"},"headline":"Building a Javascript Image Carousel Using Cloudinary","datePublished":"2024-03-04T15:00:00+00:00","dateModified":"2025-02-22T20:30:46+00:00","mainEntityOfPage":{"@id":"https:\/\/cloudinary.com\/blog\/building-javascript-image-carousel"},"wordCount":1154,"publisher":{"@id":"https:\/\/cloudinary.com\/blog\/#organization"},"image":{"@id":"https:\/\/cloudinary.com\/blog\/building-javascript-image-carousel#primaryimage"},"thumbnailUrl":"https:\/\/res.cloudinary.com\/cloudinary-marketing\/images\/f_auto,q_auto\/v1708725845\/building_js_image_Carousel-blog\/building_js_image_Carousel-blog.jpg?_i=AA","keywords":["Digital Asset Management","Javascript"],"inLanguage":"en-US","copyrightYear":"2024","copyrightHolder":{"@id":"https:\/\/cloudinary.com\/#organization"}},{"@type":"WebPage","@id":"https:\/\/cloudinary.com\/blog\/building-javascript-image-carousel","url":"https:\/\/cloudinary.com\/blog\/building-javascript-image-carousel","name":"Building a Javascript Image Carousel Using Cloudinary","isPartOf":{"@id":"https:\/\/cloudinary.com\/blog\/#website"},"primaryImageOfPage":{"@id":"https:\/\/cloudinary.com\/blog\/building-javascript-image-carousel#primaryimage"},"image":{"@id":"https:\/\/cloudinary.com\/blog\/building-javascript-image-carousel#primaryimage"},"thumbnailUrl":"https:\/\/res.cloudinary.com\/cloudinary-marketing\/images\/f_auto,q_auto\/v1708725845\/building_js_image_Carousel-blog\/building_js_image_Carousel-blog.jpg?_i=AA","datePublished":"2024-03-04T15:00:00+00:00","dateModified":"2025-02-22T20:30:46+00:00","description":"Learn how to display multiple images on your site by adding an image carousel using Javascript and Cloudinary, improving user experiences.","breadcrumb":{"@id":"https:\/\/cloudinary.com\/blog\/building-javascript-image-carousel#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/cloudinary.com\/blog\/building-javascript-image-carousel"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/cloudinary.com\/blog\/building-javascript-image-carousel#primaryimage","url":"https:\/\/res.cloudinary.com\/cloudinary-marketing\/images\/f_auto,q_auto\/v1708725845\/building_js_image_Carousel-blog\/building_js_image_Carousel-blog.jpg?_i=AA","contentUrl":"https:\/\/res.cloudinary.com\/cloudinary-marketing\/images\/f_auto,q_auto\/v1708725845\/building_js_image_Carousel-blog\/building_js_image_Carousel-blog.jpg?_i=AA","width":2000,"height":1100},{"@type":"BreadcrumbList","@id":"https:\/\/cloudinary.com\/blog\/building-javascript-image-carousel#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/cloudinary.com\/blog\/"},{"@type":"ListItem","position":2,"name":"Building a Javascript Image Carousel Using Cloudinary"}]},{"@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\/v1708725845\/building_js_image_Carousel-blog\/building_js_image_Carousel-blog.jpg?_i=AA","_links":{"self":[{"href":"https:\/\/cloudinary.com\/blog\/wp-json\/wp\/v2\/posts\/32908","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=32908"}],"version-history":[{"count":6,"href":"https:\/\/cloudinary.com\/blog\/wp-json\/wp\/v2\/posts\/32908\/revisions"}],"predecessor-version":[{"id":36940,"href":"https:\/\/cloudinary.com\/blog\/wp-json\/wp\/v2\/posts\/32908\/revisions\/36940"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/cloudinary.com\/blog\/wp-json\/wp\/v2\/media\/32910"}],"wp:attachment":[{"href":"https:\/\/cloudinary.com\/blog\/wp-json\/wp\/v2\/media?parent=32908"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/cloudinary.com\/blog\/wp-json\/wp\/v2\/categories?post=32908"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/cloudinary.com\/blog\/wp-json\/wp\/v2\/tags?post=32908"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}