Image Carousel widget

The Image Carousel Widget allows you to add interesting and dynamic galleries to your pages. In the video, we explain about creating a gallery image carousel and a three column carousel.

---

Content

Image Carousel

1. Click Add Image button to select images to display. Once selected, click Create a New Gallery button and then click the Insert Gallery button.
2. Image Resolution: Choose the size of the image, from thumbnail to full, or enter a custom size
3. Slides to Show: Select the number of slides to show at one time, from 1 to 10, available for desktop, tablet, and mobile devices
4. Slides to Scroll: Set how many slides are scrolled per swipe
5. Image Stretch: Select Yes or No
6. Navigation: Choose to display navigation Arrows, Dots, Both or None
7. Link to: Link images to their respective Media Files, Custom URLs, or None
8. Caption: Set image captions to None, Title, Caption, or Description

Additional Options

1. Pause on Hover: Select whether or not to pause autoplay when a user hovers over the carousel. Yes or No
2. Pause on Interaction: Select whether or not to pause autoplay when a user interacts with the carousel. Yes or No.
3. Autoplay: Choose Yes or No to rotate slides automatically
4. Autoplay Speed: Set the time it takes for the next slide to start rotating. This time is in milliseconds, so 1000 ms is equal to 1 second.
5. Infinite Loop: Show carousel in a continuous loop, infinitely. Yes or No
6. Animation Speed: Set the speed of slide animation, in milliseconds
7. Direction: Choose to have the slides rotate from left or right

---

Style

Navigation

Arrows

1. Position: Set the position of the arrows inside or outside the slider
2. Size: Set the exact size of the arrows. Set the exact size of the arrows. Size can be in PX, EM or REM. For more details about units of measurement, see Units of measurement.
3. Color: Set the color of the arrows

Dots

1. Position: Set the position of the dots inside or outside the slider
2. Size: Set the exact size of the dots. Set the exact size of the dots. Set the exact size of the arrows. Size can be in PX, EM or REM. For more details about units of measurement, see Units of measurement.
3. Color: Set the color of the dots

Image

1. Vertical Align: Vertically align the image to the top, middle, or bottom
2. Spacing: Set the spacing between slides. Choose Default (20px) or Custom (This option is only available if a quantity greater than 1 is chosen for Slides to Show on the Content tab)
3. Border Type: Set the type of border, choosing from None, Solid, Double, Dotted, Dashed, or Groove
4. Border Radius: Set the border-radius, to control corner roundness