{"id":87739,"date":"2021-09-03T19:10:26","date_gmt":"2021-09-03T23:10:26","guid":{"rendered":"https:\/\/www.inmotionhosting.com\/support\/?p=87739"},"modified":"2026-03-11T11:14:06","modified_gmt":"2026-03-11T15:14:06","slug":"slideshow-carousel-with-bootstrap","status":"publish","type":"post","link":"https:\/\/www.inmotionhosting.com\/support\/edu\/joomla\/joomla-4\/slideshow-carousel-with-bootstrap\/","title":{"rendered":"How to Create a Slideshow (Carousel) in Joomla 4.0 using Bootstrap"},"content":{"rendered":"<figure class=\"wp-block-image size-large is-style-default\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"538\" src=\"https:\/\/www.inmotionhosting.com\/support\/wp-content\/uploads\/2021\/09\/bootstrap5-create-slideshow-1024x538.jpg\" alt=\"How to Create a Slideshow (Carousel) in Joomla 4.0 using Bootstrap\" class=\"wp-image-87740\" srcset=\"https:\/\/www.inmotionhosting.com\/support\/wp-content\/uploads\/2021\/09\/bootstrap5-create-slideshow-1024x538.jpg 1024w, https:\/\/www.inmotionhosting.com\/support\/wp-content\/uploads\/2021\/09\/bootstrap5-create-slideshow-300x158.jpg 300w, https:\/\/www.inmotionhosting.com\/support\/wp-content\/uploads\/2021\/09\/bootstrap5-create-slideshow-768x403.jpg 768w, https:\/\/www.inmotionhosting.com\/support\/wp-content\/uploads\/2021\/09\/bootstrap5-create-slideshow.jpg 1200w\" sizes=\"auto, (min-width: 1360px) 876px, (min-width: 960px) calc(61.58vw + 51px), calc(100vw - 80px)\" \/><\/figure>\n\n\n\n<p>A common need in building websites that display images is a means of displaying multiple images.\u00a0 The typical way is to list images or create a gallery of thumbnail size images.\u00a0 However, Bootstrap has the option of adding a <strong>carousel<\/strong> of images that can be controlled.\u00a0 This is also called a slideshow.<\/p>\n\n\n\n<p>Follow the steps below to use the Bootstrap code to create a <strong>slideshow (carousel)<\/strong> in a Joomla 4 article.<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li><a href=\"#navigation-controls\">Adding a Carousel (Slideshow) \u2013 No Controls<\/a><\/li>\n\n\n\n<li><a href=\"#navigation-controls\">Adding a Carousel (Slideshow) \u2013 With Navigation Controls<\/a><\/li>\n<\/ul>\n\n\n\n<p class=\"alert alert-warning\">What is Bootstrap?\u00a0 Bootstrap is an HTML, CSS, and JS framework used to build responsive websites that are designed to work with mobile devices.\u00a0 Bootstrap is currently in its 10th year of existence and in its 5th major release. It is part of an astonishing 22% of all websites on the internet.<\/p>\n\n\n<!-- Shortcode [joomla-vps-1] does not exist -->\n\n\n\n<h2 class=\"wp-block-heading\" id=\"no-controls\">Adding a Carousel (Slideshow) \u2013 No Controls<\/h2>\n\n\n\n<p>Slideshows can run automatically, or they can be controlled with some navigation aids.\u00a0 The Carousel code we will be using can also be found directly on the Bootstrap website in the<a href=\"https:\/\/getbootstrap.com\/docs\/5.1\/components\/carousel\/\"> 5.1 version section<\/a>.\u00a0<\/p>\n\n\n\n<p>When you are adding the code for the Bootstrap carousel, you are also adding each image.\u00a0 The beginning slide is identified with the word \u201cactive.\u201d\u00a0 You will see this in the code example below:<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>&lt;div id=\"carouselExampleSlidesOnly\" class=\"carousel slide\" data-bs-ride=\"carousel\"&gt;\n  &lt;div class=\"carousel-inner\"&gt;\n    &lt;div class=\"carousel-item active\"&gt;\n      &lt;img src=\"...\" class=\"d-block w-100\" alt=\"...\"&gt;\n    &lt;\/div&gt;\n    &lt;div class=\"carousel-item\"&gt;\n      &lt;img src=\"...\" class=\"d-block w-100\" alt=\"...\"&gt;\n    &lt;\/div&gt;\n    &lt;div class=\"carousel-item\"&gt;\n      &lt;img src=\"...\" class=\"d-block w-100\" alt=\"...\"&gt;\n    &lt;\/div&gt;\n  &lt;\/div&gt;\n&lt;\/div&gt;<\/code><\/pre>\n\n\n\n<p>This code would create a slideshow that would show the images in succession starting with the \u201cactive\u201d item (marked as the first item).  We can\u2019t show you the actual carousel in action here but it would start with the first slide.<\/p>\n\n\n\n<p><\/p>\n\n\n\n<p>Steps to add the code:<\/p>\n\n\n\n<ol class=\"wp-block-list article_list\">\n<li>Log in to the Joomla Administrator Dashboard.<\/li>\n\n\n\n<li>Create a new article or add a new one.<\/li>\n\n\n\n<li>Click on the <strong>Toggle<\/strong> button at the bottom right.<\/li>\n\n\n\n<li>Copy the code and then paste it into the editor.<\/li>\n\n\n\n<li>Modify the code with your image locations.\u00a0 Add a unique ID if you intend to have more than one slideshow in the same article.<\/li>\n<\/ol>\n\n\n\n<p><br>To make it easier on yourself, make sure to list your images in the order that you will add them to the code. Note that you will need the location of the images using a URL.\u00a0<br><br>You can use images that have already been uploaded through the media manager in Joomla, or you can use images coming from another location.\u00a0 You will need the URL of the images in order to display them in the slideshow.\u00a0<br><\/p>\n\n\n\n<p>Another thing to keep in mind is that the carousel will not automatically size the images, so you should make adjustments to the images you are using so that they appear correctly in your slide show.\u00a0<\/p>\n\n\n\n<p>If you are using more than one slideshow in the same Joomla article, then the ID (in this example, it is \u201ccarouselExampleSlidesOnly\u201d) should be unique for each slideshow.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Adding a Carousel (Slideshow) \u2013 With Navigation Controls<\/h2>\n\n\n\n<p>If you are adding a carousel with control elements then the data-bs-target attribute (or href for links) should match the id of the .carousel element.<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>\n&lt;div id=\"carouselExampleControls\" class=\"carousel slide\" data-bs-ride=\"carousel\"&gt;\n  &lt;div class=\"carousel-inner\"&gt;\n    &lt;div class=\"carousel-item active\"&gt;\n      &lt;img src=\"...\" class=\"d-block w-100\" alt=\"...\"&gt;\n    &lt;\/div&gt;\n    &lt;div class=\"carousel-item\"&gt;\n      &lt;img src=\"...\" class=\"d-block w-100\" alt=\"...\"&gt;\n    &lt;\/div&gt;\n    &lt;div class=\"carousel-item\"&gt;\n      &lt;img src=\"...\" class=\"d-block w-100\" alt=\"...\"&gt;\n    &lt;\/div&gt;\n  &lt;\/div&gt;\n  &lt;button class=\"carousel-control-prev\" type=\"button\" data-bs-target=\"#carouselExampleControls\" data-bs-slide=\"prev\"&gt;\n    &lt;span class=\"carousel-control-prev-icon\" aria-hidden=\"true\"&gt;&lt;\/span&gt;\n    &lt;span class=\"visually-hidden\"&gt;Previous&lt;\/span&gt;\n  &lt;\/button&gt;\n  &lt;button class=\"carousel-control-next\" type=\"button\" data-bs-target=\"#carouselExampleControls\" data-bs-slide=\"next\"&gt;\n    &lt;span class=\"carousel-control-next-icon\" aria-hidden=\"true\"&gt;&lt;\/span&gt;\n    &lt;span class=\"visually-hidden\"&gt;Next&lt;\/span&gt;\n  &lt;\/button&gt;\n&lt;\/div&gt;<\/code><\/pre>\n\n\n\n<p>The code above will generate a slide similar to the one below (with no dots or pause control) \u2013 the slideshow example below is part of WordPress and does not represent how it would appear in Joomla.<\/p>\n\n\n\n<figure class=\"wp-block-gallery has-nested-images columns-default is-cropped wp-block-gallery-1 is-layout-flex wp-block-gallery-is-layout-flex\">\n<figure data-wp-context=\"{&quot;imageId&quot;:&quot;69d0959282dd7&quot;}\" data-wp-interactive=\"core\/image\" data-wp-key=\"69d0959282dd7\" class=\"wp-block-image size-large wp-lightbox-container\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"768\" data-wp-class--hide=\"state.isContentHidden\" data-wp-class--show=\"state.isContentVisible\" data-wp-init=\"callbacks.setButtonStyles\" data-wp-on--click=\"actions.showLightbox\" data-wp-on--load=\"callbacks.setButtonStyles\" data-wp-on-window--resize=\"callbacks.setButtonStyles\" data-id=\"87750\" src=\"https:\/\/www.inmotionhosting.com\/support\/wp-content\/uploads\/2021\/09\/slide-1-1-1024x768.jpg\" alt=\"example slide 1\" class=\"wp-image-87750\" srcset=\"https:\/\/www.inmotionhosting.com\/support\/wp-content\/uploads\/2021\/09\/slide-1-1-1024x768.jpg 1024w, https:\/\/www.inmotionhosting.com\/support\/wp-content\/uploads\/2021\/09\/slide-1-1-300x225.jpg 300w, https:\/\/www.inmotionhosting.com\/support\/wp-content\/uploads\/2021\/09\/slide-1-1-768x576.jpg 768w, https:\/\/www.inmotionhosting.com\/support\/wp-content\/uploads\/2021\/09\/slide-1-1-1536x1152.jpg 1536w, https:\/\/www.inmotionhosting.com\/support\/wp-content\/uploads\/2021\/09\/slide-1-1.jpg 1600w\" sizes=\"auto, (min-width: 1360px) 876px, (min-width: 960px) calc(61.58vw + 51px), calc(100vw - 80px)\" \/><button class=\"lightbox-trigger\" type=\"button\" aria-haspopup=\"dialog\" aria-label=\"Enlarge\" data-wp-init=\"callbacks.initTriggerButton\" data-wp-on--click=\"actions.showLightbox\" data-wp-style--right=\"state.imageButtonRight\" data-wp-style--top=\"state.imageButtonTop\">\n\t\t\t<svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"12\" height=\"12\" fill=\"none\" viewbox=\"0 0 12 12\">\n\t\t\t\t<path fill=\"#fff\" d=\"M2 0a2 2 0 0 0-2 2v2h1.5V2a.5.5 0 0 1 .5-.5h2V0H2Zm2 10.5H2a.5.5 0 0 1-.5-.5V8H0v2a2 2 0 0 0 2 2h2v-1.5ZM8 12v-1.5h2a.5.5 0 0 0 .5-.5V8H12v2a2 2 0 0 1-2 2H8Zm2-12a2 2 0 0 1 2 2v2h-1.5V2a.5.5 0 0 0-.5-.5H8V0h2Z\"><\/path>\n\t\t\t<\/svg>\n\t\t<\/button><\/figure>\n\n\n\n<figure data-wp-context=\"{&quot;imageId&quot;:&quot;69d0959283413&quot;}\" data-wp-interactive=\"core\/image\" data-wp-key=\"69d0959283413\" class=\"wp-block-image size-large wp-lightbox-container\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"768\" data-wp-class--hide=\"state.isContentHidden\" data-wp-class--show=\"state.isContentVisible\" data-wp-init=\"callbacks.setButtonStyles\" data-wp-on--click=\"actions.showLightbox\" data-wp-on--load=\"callbacks.setButtonStyles\" data-wp-on-window--resize=\"callbacks.setButtonStyles\" data-id=\"87751\" src=\"https:\/\/www.inmotionhosting.com\/support\/wp-content\/uploads\/2021\/09\/slide-2-1-1024x768.jpg\" alt=\"example slide 2\" class=\"wp-image-87751\" srcset=\"https:\/\/www.inmotionhosting.com\/support\/wp-content\/uploads\/2021\/09\/slide-2-1-1024x768.jpg 1024w, https:\/\/www.inmotionhosting.com\/support\/wp-content\/uploads\/2021\/09\/slide-2-1-300x225.jpg 300w, https:\/\/www.inmotionhosting.com\/support\/wp-content\/uploads\/2021\/09\/slide-2-1-768x576.jpg 768w, https:\/\/www.inmotionhosting.com\/support\/wp-content\/uploads\/2021\/09\/slide-2-1-1536x1152.jpg 1536w, https:\/\/www.inmotionhosting.com\/support\/wp-content\/uploads\/2021\/09\/slide-2-1.jpg 1600w\" sizes=\"auto, (min-width: 1360px) 876px, (min-width: 960px) calc(61.58vw + 51px), calc(100vw - 80px)\" \/><button class=\"lightbox-trigger\" type=\"button\" aria-haspopup=\"dialog\" aria-label=\"Enlarge\" data-wp-init=\"callbacks.initTriggerButton\" data-wp-on--click=\"actions.showLightbox\" data-wp-style--right=\"state.imageButtonRight\" data-wp-style--top=\"state.imageButtonTop\">\n\t\t\t<svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"12\" height=\"12\" fill=\"none\" viewbox=\"0 0 12 12\">\n\t\t\t\t<path fill=\"#fff\" d=\"M2 0a2 2 0 0 0-2 2v2h1.5V2a.5.5 0 0 1 .5-.5h2V0H2Zm2 10.5H2a.5.5 0 0 1-.5-.5V8H0v2a2 2 0 0 0 2 2h2v-1.5ZM8 12v-1.5h2a.5.5 0 0 0 .5-.5V8H12v2a2 2 0 0 1-2 2H8Zm2-12a2 2 0 0 1 2 2v2h-1.5V2a.5.5 0 0 0-.5-.5H8V0h2Z\"><\/path>\n\t\t\t<\/svg>\n\t\t<\/button><\/figure>\n\n\n\n<figure data-wp-context=\"{&quot;imageId&quot;:&quot;69d09592839a5&quot;}\" data-wp-interactive=\"core\/image\" data-wp-key=\"69d09592839a5\" class=\"wp-block-image size-large wp-lightbox-container\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"768\" data-wp-class--hide=\"state.isContentHidden\" data-wp-class--show=\"state.isContentVisible\" data-wp-init=\"callbacks.setButtonStyles\" data-wp-on--click=\"actions.showLightbox\" data-wp-on--load=\"callbacks.setButtonStyles\" data-wp-on-window--resize=\"callbacks.setButtonStyles\" data-id=\"87752\" src=\"https:\/\/www.inmotionhosting.com\/support\/wp-content\/uploads\/2021\/09\/slide-3-1-1024x768.jpg\" alt=\"example slide 3\" class=\"wp-image-87752\" srcset=\"https:\/\/www.inmotionhosting.com\/support\/wp-content\/uploads\/2021\/09\/slide-3-1-1024x768.jpg 1024w, https:\/\/www.inmotionhosting.com\/support\/wp-content\/uploads\/2021\/09\/slide-3-1-300x225.jpg 300w, https:\/\/www.inmotionhosting.com\/support\/wp-content\/uploads\/2021\/09\/slide-3-1-768x576.jpg 768w, https:\/\/www.inmotionhosting.com\/support\/wp-content\/uploads\/2021\/09\/slide-3-1-1536x1152.jpg 1536w, https:\/\/www.inmotionhosting.com\/support\/wp-content\/uploads\/2021\/09\/slide-3-1.jpg 1600w\" sizes=\"auto, (min-width: 1360px) 876px, (min-width: 960px) calc(61.58vw + 51px), calc(100vw - 80px)\" \/><button class=\"lightbox-trigger\" type=\"button\" aria-haspopup=\"dialog\" aria-label=\"Enlarge\" data-wp-init=\"callbacks.initTriggerButton\" data-wp-on--click=\"actions.showLightbox\" data-wp-style--right=\"state.imageButtonRight\" data-wp-style--top=\"state.imageButtonTop\">\n\t\t\t<svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"12\" height=\"12\" fill=\"none\" viewbox=\"0 0 12 12\">\n\t\t\t\t<path fill=\"#fff\" d=\"M2 0a2 2 0 0 0-2 2v2h1.5V2a.5.5 0 0 1 .5-.5h2V0H2Zm2 10.5H2a.5.5 0 0 1-.5-.5V8H0v2a2 2 0 0 0 2 2h2v-1.5ZM8 12v-1.5h2a.5.5 0 0 0 .5-.5V8H12v2a2 2 0 0 1-2 2H8Zm2-12a2 2 0 0 1 2 2v2h-1.5V2a.5.5 0 0 0-.5-.5H8V0h2Z\"><\/path>\n\t\t\t<\/svg>\n\t\t<\/button><\/figure>\n<\/figure>\n\n\n\n<p><em>The steps for adding the carousel with controls are the same as in the previous example.<\/em><\/p>\n\n\n\n<p>Congratulations! You now know how to create a slideshow (carousel) in the editor for Joomla! 4.0.\u00a0 This will allow you to show multiple images without having to consume a lot of space in your article.<\/p>\n\n\n\n<p>To learn more about using Joomla, check out our InMotion Hosting Support Center Website.<\/p>\n\n\n<div class=\"jumbotron\">Discover how InMotion Hosting's virtual private servers can deliver power and performance for your Joomla site with our reliable <a href=\"https:\/\/www.inmotionhosting.com\/joomla-hosting\">Joomla Hosting<\/a> plans.<\/div>\n","protected":false},"excerpt":{"rendered":"<p>A common need in building websites that display images is a means of displaying multiple images.&nbsp; The typical way is to list images or create a gallery of thumbnail size images.&nbsp; However, Bootstrap has the option of adding a carousel of images that can be controlled.&nbsp; This is also called a slideshow. Follow the steps<a class=\"moretag\" href=\"https:\/\/www.inmotionhosting.com\/support\/edu\/joomla\/joomla-4\/slideshow-carousel-with-bootstrap\/\"> Read More ><\/a><\/p>\n","protected":false},"author":7,"featured_media":0,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"_jetpack_memberships_contains_paid_content":false,"footnotes":""},"categories":[4496],"tags":[],"class_list":["post-87739","post","type-post","status-publish","format-standard","hentry","category-joomla-4"],"acf":[],"yoast_head":"<!-- This site is optimized with the Yoast SEO plugin v27.1.1 - https:\/\/yoast.com\/product\/yoast-seo-wordpress\/ -->\n<title>How to Create a Slideshow (Carousel) in Joomla 4.0 using Bootstrap | InMotion Hosting<\/title>\n<meta name=\"description\" content=\"Learn how to create a Slideshow (carousel) using Bootstrap 5 in a Joomla 4.0 article. This article provides the code that you can use to display several images.\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/www.inmotionhosting.com\/support\/edu\/joomla\/joomla-4\/slideshow-carousel-with-bootstrap\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"How to Create a Slideshow (Carousel) in Joomla 4.0 using Bootstrap | InMotion Hosting\" \/>\n<meta property=\"og:description\" content=\"Learn how to create a Slideshow (carousel) using Bootstrap 5 in a Joomla 4.0 article. This article provides the code that you can use to display several images.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/www.inmotionhosting.com\/support\/edu\/joomla\/joomla-4\/slideshow-carousel-with-bootstrap\/\" \/>\n<meta property=\"og:site_name\" content=\"InMotion Hosting Support Center\" \/>\n<meta property=\"article:publisher\" content=\"https:\/\/www.facebook.com\/inmotionhosting\/\" \/>\n<meta property=\"article:published_time\" content=\"2021-09-03T23:10:26+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2026-03-11T15:14:06+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/www.inmotionhosting.com\/support\/wp-content\/uploads\/2021\/09\/bootstrap5-create-slideshow.jpg\" \/>\n\t<meta property=\"og:image:width\" content=\"1200\" \/>\n\t<meta property=\"og:image:height\" content=\"630\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/jpeg\" \/>\n<meta name=\"author\" content=\"InMotion Hosting Contributor\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:creator\" content=\"@https:\/\/twitter.com\/InMotionHosting\" \/>\n<meta name=\"twitter:site\" content=\"@InMotionHosting\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"InMotion Hosting Contributor\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"4 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\/\/www.inmotionhosting.com\/support\/edu\/joomla\/joomla-4\/slideshow-carousel-with-bootstrap\/#article\",\"isPartOf\":{\"@id\":\"https:\/\/www.inmotionhosting.com\/support\/edu\/joomla\/joomla-4\/slideshow-carousel-with-bootstrap\/\"},\"author\":{\"name\":\"InMotion Hosting Contributor\",\"@id\":\"https:\/\/www.inmotionhosting.com\/support\/#\/schema\/person\/8d626175dd3b70ee90a172bdb09a460b\"},\"headline\":\"How to Create a Slideshow (Carousel) in Joomla 4.0 using Bootstrap\",\"datePublished\":\"2021-09-03T23:10:26+00:00\",\"dateModified\":\"2026-03-11T15:14:06+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\/\/www.inmotionhosting.com\/support\/edu\/joomla\/joomla-4\/slideshow-carousel-with-bootstrap\/\"},\"wordCount\":620,\"commentCount\":3,\"publisher\":{\"@id\":\"https:\/\/www.inmotionhosting.com\/support\/#organization\"},\"image\":{\"@id\":\"https:\/\/www.inmotionhosting.com\/support\/edu\/joomla\/joomla-4\/slideshow-carousel-with-bootstrap\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/www.inmotionhosting.com\/support\/wp-content\/uploads\/2021\/09\/bootstrap5-create-slideshow-1024x538.jpg\",\"articleSection\":[\"Joomla 4\"],\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\/\/www.inmotionhosting.com\/support\/edu\/joomla\/joomla-4\/slideshow-carousel-with-bootstrap\/#respond\"]}]},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/www.inmotionhosting.com\/support\/edu\/joomla\/joomla-4\/slideshow-carousel-with-bootstrap\/\",\"url\":\"https:\/\/www.inmotionhosting.com\/support\/edu\/joomla\/joomla-4\/slideshow-carousel-with-bootstrap\/\",\"name\":\"How to Create a Slideshow (Carousel) in Joomla 4.0 using Bootstrap | InMotion Hosting\",\"isPartOf\":{\"@id\":\"https:\/\/www.inmotionhosting.com\/support\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\/\/www.inmotionhosting.com\/support\/edu\/joomla\/joomla-4\/slideshow-carousel-with-bootstrap\/#primaryimage\"},\"image\":{\"@id\":\"https:\/\/www.inmotionhosting.com\/support\/edu\/joomla\/joomla-4\/slideshow-carousel-with-bootstrap\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/www.inmotionhosting.com\/support\/wp-content\/uploads\/2021\/09\/bootstrap5-create-slideshow-1024x538.jpg\",\"datePublished\":\"2021-09-03T23:10:26+00:00\",\"dateModified\":\"2026-03-11T15:14:06+00:00\",\"description\":\"Learn how to create a Slideshow (carousel) using Bootstrap 5 in a Joomla 4.0 article. This article provides the code that you can use to display several images.\",\"breadcrumb\":{\"@id\":\"https:\/\/www.inmotionhosting.com\/support\/edu\/joomla\/joomla-4\/slideshow-carousel-with-bootstrap\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/www.inmotionhosting.com\/support\/edu\/joomla\/joomla-4\/slideshow-carousel-with-bootstrap\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/www.inmotionhosting.com\/support\/edu\/joomla\/joomla-4\/slideshow-carousel-with-bootstrap\/#primaryimage\",\"url\":\"https:\/\/www.inmotionhosting.com\/support\/wp-content\/uploads\/2021\/09\/bootstrap5-create-slideshow.jpg\",\"contentUrl\":\"https:\/\/www.inmotionhosting.com\/support\/wp-content\/uploads\/2021\/09\/bootstrap5-create-slideshow.jpg\",\"width\":1200,\"height\":630,\"caption\":\"How to Create a Slideshow (Carousel) in Joomla 4.0 using Bootstrap\"},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/www.inmotionhosting.com\/support\/edu\/joomla\/joomla-4\/slideshow-carousel-with-bootstrap\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\/\/www.inmotionhosting.com\/support\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"How to Create a Slideshow (Carousel) in Joomla 4.0 using Bootstrap\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/www.inmotionhosting.com\/support\/#website\",\"url\":\"https:\/\/www.inmotionhosting.com\/support\/\",\"name\":\"InMotion Hosting Support Center\",\"description\":\"Web Hosting Support &amp; Tutorials\",\"publisher\":{\"@id\":\"https:\/\/www.inmotionhosting.com\/support\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/www.inmotionhosting.com\/support\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"en-US\"},{\"@type\":\"Organization\",\"@id\":\"https:\/\/www.inmotionhosting.com\/support\/#organization\",\"name\":\"InMotion Hosting\",\"url\":\"https:\/\/www.inmotionhosting.com\/support\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/www.inmotionhosting.com\/support\/#\/schema\/logo\/image\/\",\"url\":\"https:\/\/www.inmotionhosting.com\/support\/wp-content\/uploads\/2023\/02\/inmotion-hosting-logo-yoast.jpg\",\"contentUrl\":\"https:\/\/www.inmotionhosting.com\/support\/wp-content\/uploads\/2023\/02\/inmotion-hosting-logo-yoast.jpg\",\"width\":696,\"height\":696,\"caption\":\"InMotion Hosting\"},\"image\":{\"@id\":\"https:\/\/www.inmotionhosting.com\/support\/#\/schema\/logo\/image\/\"},\"sameAs\":[\"https:\/\/www.facebook.com\/inmotionhosting\/\",\"https:\/\/x.com\/InMotionHosting\"]},{\"@type\":\"Person\",\"@id\":\"https:\/\/www.inmotionhosting.com\/support\/#\/schema\/person\/8d626175dd3b70ee90a172bdb09a460b\",\"name\":\"InMotion Hosting Contributor\",\"description\":\"InMotion Hosting contributors are highly knowledgeable individuals who create relevant content on new trends and troubleshooting techniques to help you achieve your online goals!\",\"sameAs\":[\"https:\/\/www.linkedin.com\/company\/inmotion-hosting\/\",\"https:\/\/x.com\/https:\/\/twitter.com\/InMotionHosting\"],\"url\":\"https:\/\/www.inmotionhosting.com\/support\/author\/arn\/\"}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"How to Create a Slideshow (Carousel) in Joomla 4.0 using Bootstrap | InMotion Hosting","description":"Learn how to create a Slideshow (carousel) using Bootstrap 5 in a Joomla 4.0 article. This article provides the code that you can use to display several images.","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:\/\/www.inmotionhosting.com\/support\/edu\/joomla\/joomla-4\/slideshow-carousel-with-bootstrap\/","og_locale":"en_US","og_type":"article","og_title":"How to Create a Slideshow (Carousel) in Joomla 4.0 using Bootstrap | InMotion Hosting","og_description":"Learn how to create a Slideshow (carousel) using Bootstrap 5 in a Joomla 4.0 article. This article provides the code that you can use to display several images.","og_url":"https:\/\/www.inmotionhosting.com\/support\/edu\/joomla\/joomla-4\/slideshow-carousel-with-bootstrap\/","og_site_name":"InMotion Hosting Support Center","article_publisher":"https:\/\/www.facebook.com\/inmotionhosting\/","article_published_time":"2021-09-03T23:10:26+00:00","article_modified_time":"2026-03-11T15:14:06+00:00","og_image":[{"width":1200,"height":630,"url":"https:\/\/www.inmotionhosting.com\/support\/wp-content\/uploads\/2021\/09\/bootstrap5-create-slideshow.jpg","type":"image\/jpeg"}],"author":"InMotion Hosting Contributor","twitter_card":"summary_large_image","twitter_creator":"@https:\/\/twitter.com\/InMotionHosting","twitter_site":"@InMotionHosting","twitter_misc":{"Written by":"InMotion Hosting Contributor","Est. reading time":"4 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/www.inmotionhosting.com\/support\/edu\/joomla\/joomla-4\/slideshow-carousel-with-bootstrap\/#article","isPartOf":{"@id":"https:\/\/www.inmotionhosting.com\/support\/edu\/joomla\/joomla-4\/slideshow-carousel-with-bootstrap\/"},"author":{"name":"InMotion Hosting Contributor","@id":"https:\/\/www.inmotionhosting.com\/support\/#\/schema\/person\/8d626175dd3b70ee90a172bdb09a460b"},"headline":"How to Create a Slideshow (Carousel) in Joomla 4.0 using Bootstrap","datePublished":"2021-09-03T23:10:26+00:00","dateModified":"2026-03-11T15:14:06+00:00","mainEntityOfPage":{"@id":"https:\/\/www.inmotionhosting.com\/support\/edu\/joomla\/joomla-4\/slideshow-carousel-with-bootstrap\/"},"wordCount":620,"commentCount":3,"publisher":{"@id":"https:\/\/www.inmotionhosting.com\/support\/#organization"},"image":{"@id":"https:\/\/www.inmotionhosting.com\/support\/edu\/joomla\/joomla-4\/slideshow-carousel-with-bootstrap\/#primaryimage"},"thumbnailUrl":"https:\/\/www.inmotionhosting.com\/support\/wp-content\/uploads\/2021\/09\/bootstrap5-create-slideshow-1024x538.jpg","articleSection":["Joomla 4"],"inLanguage":"en-US","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/www.inmotionhosting.com\/support\/edu\/joomla\/joomla-4\/slideshow-carousel-with-bootstrap\/#respond"]}]},{"@type":"WebPage","@id":"https:\/\/www.inmotionhosting.com\/support\/edu\/joomla\/joomla-4\/slideshow-carousel-with-bootstrap\/","url":"https:\/\/www.inmotionhosting.com\/support\/edu\/joomla\/joomla-4\/slideshow-carousel-with-bootstrap\/","name":"How to Create a Slideshow (Carousel) in Joomla 4.0 using Bootstrap | InMotion Hosting","isPartOf":{"@id":"https:\/\/www.inmotionhosting.com\/support\/#website"},"primaryImageOfPage":{"@id":"https:\/\/www.inmotionhosting.com\/support\/edu\/joomla\/joomla-4\/slideshow-carousel-with-bootstrap\/#primaryimage"},"image":{"@id":"https:\/\/www.inmotionhosting.com\/support\/edu\/joomla\/joomla-4\/slideshow-carousel-with-bootstrap\/#primaryimage"},"thumbnailUrl":"https:\/\/www.inmotionhosting.com\/support\/wp-content\/uploads\/2021\/09\/bootstrap5-create-slideshow-1024x538.jpg","datePublished":"2021-09-03T23:10:26+00:00","dateModified":"2026-03-11T15:14:06+00:00","description":"Learn how to create a Slideshow (carousel) using Bootstrap 5 in a Joomla 4.0 article. This article provides the code that you can use to display several images.","breadcrumb":{"@id":"https:\/\/www.inmotionhosting.com\/support\/edu\/joomla\/joomla-4\/slideshow-carousel-with-bootstrap\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/www.inmotionhosting.com\/support\/edu\/joomla\/joomla-4\/slideshow-carousel-with-bootstrap\/"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.inmotionhosting.com\/support\/edu\/joomla\/joomla-4\/slideshow-carousel-with-bootstrap\/#primaryimage","url":"https:\/\/www.inmotionhosting.com\/support\/wp-content\/uploads\/2021\/09\/bootstrap5-create-slideshow.jpg","contentUrl":"https:\/\/www.inmotionhosting.com\/support\/wp-content\/uploads\/2021\/09\/bootstrap5-create-slideshow.jpg","width":1200,"height":630,"caption":"How to Create a Slideshow (Carousel) in Joomla 4.0 using Bootstrap"},{"@type":"BreadcrumbList","@id":"https:\/\/www.inmotionhosting.com\/support\/edu\/joomla\/joomla-4\/slideshow-carousel-with-bootstrap\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/www.inmotionhosting.com\/support\/"},{"@type":"ListItem","position":2,"name":"How to Create a Slideshow (Carousel) in Joomla 4.0 using Bootstrap"}]},{"@type":"WebSite","@id":"https:\/\/www.inmotionhosting.com\/support\/#website","url":"https:\/\/www.inmotionhosting.com\/support\/","name":"InMotion Hosting Support Center","description":"Web Hosting Support &amp; Tutorials","publisher":{"@id":"https:\/\/www.inmotionhosting.com\/support\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/www.inmotionhosting.com\/support\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-US"},{"@type":"Organization","@id":"https:\/\/www.inmotionhosting.com\/support\/#organization","name":"InMotion Hosting","url":"https:\/\/www.inmotionhosting.com\/support\/","logo":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.inmotionhosting.com\/support\/#\/schema\/logo\/image\/","url":"https:\/\/www.inmotionhosting.com\/support\/wp-content\/uploads\/2023\/02\/inmotion-hosting-logo-yoast.jpg","contentUrl":"https:\/\/www.inmotionhosting.com\/support\/wp-content\/uploads\/2023\/02\/inmotion-hosting-logo-yoast.jpg","width":696,"height":696,"caption":"InMotion Hosting"},"image":{"@id":"https:\/\/www.inmotionhosting.com\/support\/#\/schema\/logo\/image\/"},"sameAs":["https:\/\/www.facebook.com\/inmotionhosting\/","https:\/\/x.com\/InMotionHosting"]},{"@type":"Person","@id":"https:\/\/www.inmotionhosting.com\/support\/#\/schema\/person\/8d626175dd3b70ee90a172bdb09a460b","name":"InMotion Hosting Contributor","description":"InMotion Hosting contributors are highly knowledgeable individuals who create relevant content on new trends and troubleshooting techniques to help you achieve your online goals!","sameAs":["https:\/\/www.linkedin.com\/company\/inmotion-hosting\/","https:\/\/x.com\/https:\/\/twitter.com\/InMotionHosting"],"url":"https:\/\/www.inmotionhosting.com\/support\/author\/arn\/"}]}},"jetpack_featured_media_url":"","jetpack_sharing_enabled":true,"primary_category":{"id":4496,"name":"Joomla 4","slug":"joomla-4","link":"https:\/\/www.inmotionhosting.com\/support\/edu\/joomla\/joomla-4\/"},"_links":{"self":[{"href":"https:\/\/www.inmotionhosting.com\/support\/wp-json\/wp\/v2\/posts\/87739","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.inmotionhosting.com\/support\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.inmotionhosting.com\/support\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.inmotionhosting.com\/support\/wp-json\/wp\/v2\/users\/7"}],"replies":[{"embeddable":true,"href":"https:\/\/www.inmotionhosting.com\/support\/wp-json\/wp\/v2\/comments?post=87739"}],"version-history":[{"count":2,"href":"https:\/\/www.inmotionhosting.com\/support\/wp-json\/wp\/v2\/posts\/87739\/revisions"}],"predecessor-version":[{"id":131679,"href":"https:\/\/www.inmotionhosting.com\/support\/wp-json\/wp\/v2\/posts\/87739\/revisions\/131679"}],"wp:attachment":[{"href":"https:\/\/www.inmotionhosting.com\/support\/wp-json\/wp\/v2\/media?parent=87739"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.inmotionhosting.com\/support\/wp-json\/wp\/v2\/categories?post=87739"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.inmotionhosting.com\/support\/wp-json\/wp\/v2\/tags?post=87739"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}