How to Create a Slideshow (Carousel) in Joomla 4.0 using Bootstrap

A common need in building websites that display images is a means of displaying multiple images.  The typical way is to list images or create a gallery of thumbnail size images.  However, Bootstrap has the option of adding a carousel of images that can be controlled.  This is also called a slideshow.

Follow the steps below to use the Bootstrap code to create a slideshow (carousel) in a Joomla 4 article.

• Adding a Carousel (Slideshow) – No Controls
• Adding a Carousel (Slideshow) – With Navigation Controls

What is Bootstrap?  Bootstrap is an HTML, CSS, and JS framework used to build responsive websites that are designed to work with mobile devices.  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.

Adding a Carousel (Slideshow) – No Controls

Slideshows can run automatically, or they can be controlled with some navigation aids.  The Carousel code we will be using can also be found directly on the Bootstrap website in the 5.1 version section. 

When you are adding the code for the Bootstrap carousel, you are also adding each image.  The beginning slide is identified with the word “active.”  You will see this in the code example below:

<div id="carouselExampleSlidesOnly" class="carousel slide" data-bs-ride="carousel">
  <div class="carousel-inner">
    <div class="carousel-item active">
      <img src="..." class="d-block w-100" alt="...">
    </div>
    <div class="carousel-item">
      <img src="..." class="d-block w-100" alt="...">
    </div>
    <div class="carousel-item">
      <img src="..." class="d-block w-100" alt="...">
    </div>
  </div>
</div>

This code would create a slideshow that would show the images in succession starting with the “active” item (marked as the first item). We can’t show you the actual carousel in action here but it would start with the first slide.

Steps to add the code:

1. Log in to the Joomla Administrator Dashboard.
2. Create a new article or add a new one.
3. Click on the Toggle button at the bottom right.
4. Copy the code and then paste it into the editor.
5. Modify the code with your image locations.  Add a unique ID if you intend to have more than one slideshow in the same article.

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. 

You can use images that have already been uploaded through the media manager in Joomla, or you can use images coming from another location.  You will need the URL of the images in order to display them in the slideshow. 

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. 

If you are using more than one slideshow in the same Joomla article, then the ID (in this example, it is “carouselExampleSlidesOnly”) should be unique for each slideshow.

Adding a Carousel (Slideshow) – With Navigation Controls

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.

<div id="carouselExampleControls" class="carousel slide" data-bs-ride="carousel">
  <div class="carousel-inner">
    <div class="carousel-item active">
      <img src="..." class="d-block w-100" alt="...">
    </div>
    <div class="carousel-item">
      <img src="..." class="d-block w-100" alt="...">
    </div>
    <div class="carousel-item">
      <img src="..." class="d-block w-100" alt="...">
    </div>
  </div>
  <button class="carousel-control-prev" type="button" data-bs-target="#carouselExampleControls" data-bs-slide="prev">
    <span class="carousel-control-prev-icon" aria-hidden="true"></span>
    <span class="visually-hidden">Previous</span>
  </button>
  <button class="carousel-control-next" type="button" data-bs-target="#carouselExampleControls" data-bs-slide="next">
    <span class="carousel-control-next-icon" aria-hidden="true"></span>
    <span class="visually-hidden">Next</span>
  </button>
</div>

The code above will generate a slide similar to the one below (with no dots or pause control) – the slideshow example below is part of WordPress and does not represent how it would appear in Joomla.

The steps for adding the carousel with controls are the same as in the previous example.

Congratulations! You now know how to create a slideshow (carousel) in the editor for Joomla! 4.0.  This will allow you to show multiple images without having to consume a lot of space in your article.

To learn more about using Joomla, check out our InMotion Hosting Support Center Website.