In this tutorial, we learn how to use and configure the Image Carousel Widget. This highly customizable widget which allows you to display a selection of images in an interesting and dynamic way. This tutorial will cover:
✔ How to add an image carousel to your website
✔ The available styling options for the image carousel widget
✔ Adjusting your carousel for tablet & mobile devices
✔ Creating a carousel with photographs
✔ Creating a logo carousel
✔︎ And much more!
Hey there, it’s Ash from Elementor.
In this tutorial we will explore the Image Carousel Widget. This widget allows you to display a selection of images in a fun and interactive way.
So, if you’re ready, let’s get started.
Today we’ll create three variations of the carousel widget.
The first will display a single image which fades gracefully into another image every couple of seconds.
The second will display a simple collection of photographs in a two column format, which when clicked will open the Lightbox pop-up of the image.
The third and final example will be an automatic scrolling logo carousel.
To get started we’ll delete our existing carousel and add a new blank one. Simply search for the ‘image carousel’ widget and drop it into position.
The Image Carousel Widget has several configuration and styling options, and we’ll go over them all in our three examples.
The first thing we must do is add some images to our carousel. To do this, simply select the plus icon to launch your media library. Here you can either upload new images for your carousel or select ones you’ve previously uploaded.
We already have our images uploaded, so we’ll simply select the images and create a new gallery.
The next screen allows us to change the order of our images and also amend the image title. Once you’re happy with these elements, simply select ‘Insert gallery’ to add the image carousel to your page.
Now that we have our images inserted into our carousel widget it’s time to amend the configuration and styling.
The first option we see is the Image Size. This allows us to specify which version of the image is used in the carousel. By default it uses the thumbnail which is far too small so we’ll switch this to Large.
Next, we can declare how many slides we would like to show at one time. By default the carousel shows 3 images, but we would like it to only show 1.
You’ll see that if any value is entered which is greater than 1, we are presented with an additional option. Here we can specify how many slides we would like to scroll at any one time. Let’s switch this back to 1 and we’ll revisit this option on our next carousel.
Image stretch we’ll leave as No because our image already fills all of the available space.
By default the navigation is set to display both arrows and dots. We can also set this to display just arrows, or just dots. In our example, we do not need the navigation to show, so we’ll set this as none.
Next, we have the link options. We can link our carousel to a URL or the Lightbox pop-up. We’ll cover this aspect in our next carousel, so for now set this to none.
The final option here is the caption. If you’ve added this data within the media library you can display it underneath your images. The options available are ‘title, caption & description’.
If you have this option selected and switch over to the style tab you will notice we can amend the styling for the caption section. These styles are applied to the title, caption & description, regardless of which one you have selected.
We can first of all amend the alignment of the text, next we can choose the text color either by selecting a global color option or a manual selection, and finally we can configure the typography, again, either by selecting the global options or manually.
We do not require this for our design, so let’s switch back and we’ll leave it as none.
Next up, let’s switch to the ‘Additional Options’ area.
We would like our carousel to rotate and change slides automatically so we’ll set this option as ‘yes’.
Pause on hover is a great feature which pauses the autoplay when a user hovers over the carousel. We’ll leave this as ‘Yes’.
And we can set whether we would like the carousel to pause if a user interacts with it, again we’ll leave this as ‘Yes’.
The autoplay speed option allows us to control the time it takes for the next slide to start. By default it is set to 5000 which converts into 5 second. We’d like our carousel to change slightly faster, so let’s change this to 2000 which converts to 2 seconds.
Infinite loop we’ll set to yes as we would like the carousel to continuously play, rather than stop when it gets to the last image.
Effect allows us to specify whether we would like the images to fade or slide into one another. This design would suit a fade, so let’s set that here.
And the animation speed works in the same way as the autoplay speed. Here we can amend the number to equal the amount of seconds we would like the animation to last for. In our example 1 and half seconds works well so we’ll set this to 1500.
The final option we see is the direction. If we amend our carousel to the slide effect, you can see we can now control the way the slides move. Let’s switch back to fade and leave this as default.
OK, great stuff. The image carousel is really starting to take shape.
Because of our current configuration in the Style tab we only see one option which is to set a border for the carousel.
Here we can set a border type, width and color to show around the image. There is also an option to add a border radius if required.
We’ll leave the border switched off and the radius as default as our design doesn’t require either of these styles.
The last step to finish our image carousel is to add a drop shadow effect so it fits with the design of our page.
Switch over the advanced tab and navigate your way to the border tab.
Under box shadow we’ll set the color to #004C4C but be sure to set whichever color matches your design. Horizontal we’ll set it to 100 which will move the box shadow effect across 100 pixels, and vertical we’ll set it to -100, which will move the shadow effect up 100px. Let’s set blur to 0 so we have nice clean edges. Spread can be left as 0 and the position can be left as Outline.
OK great, as you can see our simple image carousel really brings a nice level of design to our website.
Now let’s move onto our next carousel…
As you can see in our next carousel we have two columns, navigation arrows and a slide effect.
Let’s delete this widget and create a new one from scratch.
Just like before, let’s search for the image carousel widget and drop it into position.
First, we’ll add the images to our carousel from the media library.
Once this is done we can start configuring our carousel to create the correct layout.
We’ll set image size to large, slide to show to 2, slides to scroll to 1, image stretch can be left as no, and in the navigation section we’ll set this to arrows and dots. Even though our design doesn’t use the dot navigation, we’ll enable this for now so that when it comes to styling this element you will have a better understanding of how it works.
Under link we have three options. By default this is set to none, which means nothing will happen if a user clicks on an image. We also have media file and custom URL. Selecting custom URL opens a new field where you can specify a URL for your carousel to link to. For our demo we’re going to link to a media file using Lightbox. When we select media file a new field appears called Lightbox, we’ll set this to yes.
As you can see now when we click an image it opens the Lightbox pop-up which adds a great level of interactivity to the design.
Finally we’ll leave the caption set to none.
Now, select additional options. The default settings here work really well for our carousel so we’ll leave them as they are, but feel free to amend these to suit your requirements.
Next we’ll style the navigation elements to finish the carousel.
Switch over to the Style tab and you’ll see styling options for both the arrows and the dots.
Under the arrow section we can configure several elements to fine tune the arrows.
Position allows us to set the arrows to show on the inside or outside of the carousel. We’ll set this to outside.
Size controls the size of the arrows. For our design, 30 works well.
And finally we’ll set the color to our nice green color.
The dots section is similar to the arrows in that we are able to control the position, size and color of this navigation element.
For our design, the dots are not required so we’ll switch back to content, and set the navigation to arrows only.
Finally, select the ‘Image’ tab.
Vertical align can be left as default, spacing we’ll change to custom and set the value to 20. And under border type, we’ll leave this as ‘None’.
The final thing we must check here is that our carousel appears correctly on tablet and mobile devices.
Let’s switch to the tablet view. By default the carousel is configured to show 2 columns on tablet which is perfect for our design. If however you need to change to say 3 columns we can now amend the slides to show like so.
We can also do the same for mobile devices. On mobile the default slide is set to show is 1 which again works great for our design, but if you need to amend this, you can do so here.
And there we have it, we’ve created a great looking two column carousel with Lightbox pop-ups enabled.
Now let’s create our third and final carousel.
Scroll down to the logo carousel and delete this widget.
Search for the image carousel widget and drop it into position.
Add in your images.
And we’ll set the image size to medium large, slides to show here will be 5 and slides to scroll will be 1.
Image stretch can be left as no, and navigation, link & caption can all be left as none.
Under additional options we’ll set autoplay to yes, pause on hover to yes, pause on interaction to yes, autoplay speed to 2500, infinite loop to yes, animation speed to 500 and direction to left.
As you can see our logo carousel is really starting to look great.
Let’s finish the logo carousel by switching to the style tab. Here we can amend the alignment and spacing of our logos.
Vertical align should be set to centre and under spacing change this to custom and set the value as 70.
The logo carousel is now complete and adds a great level of interaction to the design.
