10Web Help Center

Hi, how can we help?

Image Carousel

Follow
Copy article URL

in this article

Add and customize beautiful and dynamic galleries to your pages using the Image Carousel widget in the 10Web Builder.

1.png

The Content Tab

Image Carousel 

Click on the image box or the + icon to upload files and select images. Click on Create New Gallery > Insert Gallery.  

2.png

Image Size: Click on the drop down menu to set the size of your images.

3.png

Slides to Show: Set the number of images displayed on the carousel. 

4.png

Slides to Scroll: Set the number of images scrolled at one time. 

Image Stretch: Option to stretch images to the entire block. 

5.png

Navigation: Set the navigation icon look. 

Link: Option to set a link to the images. 

Media File: Allows the image to be displayed in a lightbox. The link redirects to the image’s media file.

Custom URL: Set the images to redirect to your landing page.

Caption: Option to show caption, title, description, or none.

6.png

Additional Options

Autoplay: Option to scroll the carousell automatically. 

Pause on Hover: Option to pause the scrolling on hover.

7.png

Pause on Interaction: Option to pause scrolling upon interaction.

Autoplay Speed: Set the time interval between each transition.

Infinite Loop: Option to set the carousel in an infinite loop of scrolling.

8.png

Animation Speed: Set how fast an image transitions to the next. 

Direction: Set the direction of the scroll. 

9.png

The Style Tab

Navigation

Arrows

Position: Choose the placement of the arrows to be inside or outside the slider. 

Size: Adjust the size of the arrows.

Color: Customize the color of the arrows. 

Dots 

Position: Choose the placement of the dots to be inside or outside the slider. 

Size: Adjust the size of the dots.

Color: Customize the color of the dots.

Image

Vertical Align: Align the image to the top, middle, or bottom. 

Spacing: Option to customize spacing between images. 

Border Type: Option to set a border to the images. 

Width: Shows when a border is chosen. Set the thickness of the border.   

Color: Shows when a border is chosen. Customize the color of the border.

Border Radius: Adjust the radius of the border for rounded edges. 

Caption 

Alignment: Set the alignment of the caption relative to its image. 

Text Color: Customize the color of the text. 

Typography: Customize the typographical settings of the text.  

The Advanced Tab

In the advanced tab adjust the padding, apply Z-index to your elements, set conditions, motion effects, responsiveness, and more.

Next Up: Icon List

in this article