help center

Search
Close this search box.
On this page

Image Carousel widget

Last Update: March 7, 2024

Add the widget

image carousel icon Image Carousel widget 1

To access and use a widget:

  1. In Elementor Editor, click +.
    All available widgets are displayed.

  2. Click or drag the widget to the canvas. For more information, see Add elements to a page.

What is the Image Carousel widget?

The Image Carousel widget allows users to display images in a carousel format. You can add multiple images to the widget, and these images will slide horizontally based on the settings. The carousel can be customized regarding position, navigation controls, auto-play settings, and more.

Common use case

Emily is building her new business website. On the Our Team page, they are using the image carousel widget to show photos of each team member. Under each picture, there’s a name linked to the person’s social profile. This makes it easy for visitors to get to know everyone on the team quickly and learn a little about each person.

image16 Image Carousel widget 3

Additional use cases

  • For photographers, designers, or artists, showcase your best work using the carousel. Each image can represent a different project or category.
  • Collect testimonials from your clients and display them in a carousel format.
  • Showcase the features of products or services.

Video

See a video demonstrating the widget in action. 

Add an Image Carousel widget: Step-by-step

  1. Add the Image Carousel widget to the canvas. For details, see Add elements to a page.
  2. In the Content tab, under the Image Carousel section, click the ➕ icon to choose and add your images to the carousel.
    add images to carousel Image Carousel widget 5
  3. Select your images, then click on Create a new gallery button.
    create a new gallery 2 Image Carousel widget 7
  4. On the next page, add captions to your images if you’d like, then click the Insert gallery button.
    insert gallery 1 Image Carousel widget 9
  5. In the Image Resolution field, adjust the images’ size: choose from thumbnail, full size, or specify a custom size.
    image resolution 2 Image Carousel widget 11
  6. Use the Slides to Show field to choose how many images will appear at once in the carousel, from 1 to 10.
    slides to show Image Carousel widget 13
  7. In the Slides to Scroll field, choose the number of slides (images) that move (scrolled) with each swipe.
    slides to scroll Image Carousel widget 15
  8. Use the Image Stretch field to decide if you want images to stretch to fit the carousel.
    image stretct Image Carousel widget 17
  9. Use the Navigation field to choose how users can navigate between images: Arrows, Dots, Both, or None.
    navigation 1 Image Carousel widget 19
    1. If you choose an arrow, you can select Previous Arrow Icon and Next Arrow Icon.
      1. Click the image5 Image Carousel widget 21 star button to replace the arrow with an icon from the icon library.
      2. Click the svg icon Image Carousel widget 23  SVG button to replace the arrow with an uploaded SVG image. For more details, see Enable SVG Support in Elementor.
        choose arrows Image Carousel widget 25

  10. Use the Link field to link images to their respective Media Files, add Custom URLs, or choose None.
    link Image Carousel widget 27

    1. If you choose Media Files, you get an option to open images in a Lightbox:
      1. You can choose whether to show images in a lightbox. Selecting Yes or No will override the default lightbox setting.
        lightbox 2 Image Carousel widget 29
    2. If you’re adding a Custom URL:
      1. Click the ⚙️ to set the link to either open in a new window or to add rel=nofollow to the link.
      2. Use the Custom Attributes option to assign custom attributes to the link element. Use the | (pipe) for key-value separation and commas to separate pairs.
        custom url Image Carousel widget 31
  11. Use the Caption field to set image captions to None, Title, Caption, or Description.
    caption options Image Carousel widget 33

Settings for the Image Carousel widget

You can customize your widgets using content, style, and other advanced parameters, offering you great flexibility in tailoring them to your needs. Click the tabs below to see all the settings available for this widget.

Content tab

In the Content tab, you can customize images and use other advanced carousel options.

image carousel Image Carousel widget 35

Click ➕ icon, and select images. Once done, click Create a New Gallery and then Insert Gallery.

Pick image sizes – from small thumbnails to full size. You can also set a specific size.

Decide how many images you want to show at once, ranging from 1 to 10.

Choose how many images move/slide when you swipe or click.

Decide if you want images to stretch or not.

Choose between arrows, dots, or both for navigating between images.

Link images to their respective Media Files, add Custom URLs or choose None.

Choose to display image captions None, Title, Caption, or Description.

Content tab Additional Options Image Carousel widget 37

Enable the Lazyload toggle to load images only when they are about to be displayed. This feature helps in improving page speed. Learn more about Lazy Loading.

Choose Yes or No to move slides automatically.

Choose Yes or No pause autoplay when a user hovers over the carousel.

Choose Yes or No to pause autoplay when a user interacts with the carousel.

Set the speed at which the images change during autoplay. The time is in milliseconds, so 1000 ms is equal to 1 second.

Choose Yes or No to show the carousel in a continuous loop.

Set the speed of slide animation.

Choose the carousel movement: from left or right

Style tab

In the Style tab, you can customize color, fonts of navigation arrows, pagination dots, images, and textual content.

navigation Image Carousel widget 39
  • Position: Choose the position of the arrows inside or outside the slider.
  • Size: Use the slider to set the size of the arrows. Size can be in PX, EM, REM, or Custom. Learn more about Units of measurement.
  • Color: Select the arrow color.
  • Position: Choose the position of the dots inside or outside the slider.
  • Size: Define the dot size in PX, EM, REM or add custom size. Learn more about Units of measurement.
  • Color: Modify the dot color.
  • Active Color: Choose the color for the currently active dot.
style tab image Image Carousel widget 41

Align the image vertically to the top, middle, or bottom.

Set the spacing between slides. Choose default (20px) or use the slider to define custom spacing.

Select a border style from None, Solid, Double, Dotted, Dashed, or Groove. For more details, see Border type.

To create rounded corners around the image, increase the border radius. For more details, see Border radius tools.

Style tab Caption Image Carousel widget 43

Define the alignment of the caption.

Modify the caption’s color.

Customize the font style of the caption. For more details, see Typography.

Click the 🖋️ icon to add a shadow to the caption. Learn more about Shadows.

Use the slider to increase or decrease the distance between the carousel images and captions.

Advanced tab

The Advanced tab provides options to control the image carousel position, adjust the spacing, add custom code, and more.

advanced tab of image carousel Image Carousel widget 45

Learn more about the Advanced tab settings.

Have more questions? We’re more than happy to assist.

Link is copied to clipboard!
On this page

Is this article helpful?

Share this article