Adding an image carousel to your website is a terrific idea to show off your best images that will add a flare. The extensive features that the DiviFlash Image Carousel Module offers will let you create stunning carousels with ease.
In this article, we will cover every feature the Image Carousel Module has to offer.
Adding a Single Item to the Carousel
Once you open the Image Carousel module, you will see the Image Carousel Settings window. To add a single carousel item, click the (+) button.
Customizing a Single Carousel Item
When you click the plus button, you will be taken to the Image Carousel Item Settings window, from which you can customize the new carousel item.
The Image Carousel Item Settings have three tabs: Content, Design, and Advanced.
Image Carousel Item Settings – Content
You can define and edit the content of the carousel item in the content tab.
Image
In the image section, you will find the option to upload the image of your carousel item.
- Image Alt Text: Type in the Alt Text for the image.
- Image Caption: Enter the image caption here. The caption will appear over the image.
Button
This section will let you add the button for the carousel.
- Button Text: Input the button text.
- Button URL: Attach a link to the button.
- URL Opens: Choose whether to open the attached link in the same or new window.
Link
Link this carousel item to a URL.
Background
Customize the background of the item.
Image Carousel Item Settings – Design
Using the design tab, you can modify the appearance of the carousel item.
Note: Remember, you can only make changes to a single carousel item from here. If you want to edit the entire carousel, go to Image Carousel Settings.
Overlay
You can add a color or a gradient to the image as an overlay. You can also adjust the vertical alignment of the caption and button text on the image.
Hover
You can make the caption and the button text appear on hover by enabling the “Enable Content on Hover” button. Also, you can choose the direction of the hover animation.
Caption
In this section, you can change the look of the image caption.
- Title Tag: Change the HTML tag of the image caption.
- Caption Font: Change the font of the caption.
- Caption Font Weight: Change the thickness of the selected font.
- Caption Font Style: You have the option to make the caption font italic, uppercase, underlined, or struck through. If you choose to underline or strikethrough your title, you can also choose the color and style of the underline.
- Caption Text Alignment: Determine where the caption should be placed.
- Caption Text Color: Select a different color for the caption.
- Caption Text Size: Determine the size of the caption.
- Caption Letter Spacing: Determine the spacing between the letters.
- Caption Line Height: Define the distance between each caption line.
Button
- Alignment: Select the button’s horizontal orientation.
- Button Background: Select a background style from solid colors, gradients, or images.
- Button Font: Select the font for the button text.
- Button Font Weight: Change the thickness of the selected font.
- Button Font Style: The button font font can be made italic, uppercase, underlined, or struck through. If you choose to underline or strikethrough your title, you can also choose the color and style.
- Button Text Alignment: Select the alignment of the button text.
- Button Text Color: Select the color of the button text.
- Button Text Size: Specify the size of the button text.
- Button Letter Spacing: Set the spacing between the letters in the button text.
- Button Line Height: Determine the distance between each line of the button text.
- Rounded Corners: Adjust the button corners’ sharpness.
- Border Styles: Edit the width, color, and style of the button’s border.
- Box Shadow: Choose if you want your button to have a box shadow. You can choose from eight different styles, and you can configure the position, color, and other characteristics of the shadow.
Custom Spacing
Customize the spacing of each component of the image carousel item.
- Wrapper: Specify the padding and margin of the wrapper and the area of the content.
- Content: Separately customize the padding and margin for the caption and the button text.
Spacing
Customize the padding and margin of the single image carousel.
Border
Adjust the sharpness of the carousel item’s corners and the border’s width, color, and style.
Filters
Add different color filters to the item.
Transform
Make changes to the item’s size, position, orientation, angle, and origin.
Image Carousel Item Settings – Advanced
Advanced tabs are available for all modules within Divi. They contain options for adding custom CSS code, scroll effects, transitions, etc.
Adding More Items to the Image Carousel
After customizing the single item, click the back icon to return to the Image Carousel Item Settings window.
As you can see in the Image Carousel Settings window, you can click the plus (+) icon to add more items to the carousel or the duplicate icon to copy the current item.
Deleting a Carousel Item
To delete a carousel item, simply click on the trash icon on the right.
Customizing the Entire Carousel
You can change the settings for the whole carousel rather than just an item in the Image Carousel Settings window.
The Image Carousel Settings also have three tabs: Content, Design, and Advanced.
Image Carousel Settings – Content
This window allows you to modify the content of the entire carousel.
Carousel Settings
- Carousel Type: You can choose the type of carousel you want. You have four options to choose from: Slide, Cube, Coverflow, and Flip.
- Variable Width: Enable this option to allow images of different widths. Only available if you choose sliders.
- Max Slide Desktop: Choose the maximum number of slides you want to display at once on desktops. Not available if you enable Variable Width.
- Max Slide Tablet: Choose the maximum number of slides you want to display at once on tablets. Not available if you enable Variable Width.
- Max Slide Mobile: Choose the maximum number of slides you want to display at once on mobile phones. Not available if you enable Variable Width.
- Max Image Height: Set the maximum height for the images. Available only if you enable Variable Width.
- Spacing: Set the spacing between carousel items.
- Speed: Set the speed at which the items in the carousel will slide.
- Centered Slides: This option allows the slides to begin at the center of the screen.
- Loop: Toggle on to create a loop with the items.
- Autoplay: Select this option to begin the slideshow automatically. Moreover, you can set the delay at which the autoplay begins.
- Pause on Hover: Allows the autoplay to be paused when hovered over. Only available if you enable autoplay.
- Arrow Navigation: Allow users to navigate using arrows.
- Dot Navigation: Allow users to navigate using dots.
- Use Lightbox: When you click on an image in your carousel, it will appear in a lightbox. You can also show the image caption along with the image in Lightbox.
Advanced Carousel Settings
Another set of carousel settings if you choose 3D Coverflow as the carousel type.
- Enables Slides Shadows: Creates a shadow effect on the carousel items. You may choose between two colors for the shadow.
- Slide Rotate in Degrees: Change the angle of the items in the carousel.
- Stretch Space Between the Slides: Increase or decrease the space between the slides.
- Depth Offset: Sets the depth of the items in the carousel.
- Effect Multiplier: Determines the number of times the carousel items will slide or rotate.
Content Area Background
Choose a background color, gradient, or image specifically for the content area.
Background
Add a background to all the carousel items.
Image Carousel Settings – Design
You can change the appearance and style of all the items in the carousel using these options.
Overlay
Offers the same options as the Overlay in Image Carousel Item Settings.
Image Settings
- Image Max Width: Set the max width of all the images in the carousel.
- Vertical Alignment: Make adjustments to the images’ vertical alignment.
- Equal Height Image Container: Enable this option to make all the image containers the same height.
- Force Full Width: Set all images to their maximum width.
Hover
- Image Scale on Hover: Enable this option to make the image zoom in when hovered. You can also set how much the image will be zoomed in.
- Enable Content on Hover: You can make the caption and the button text appear on hover. Also, you can choose the direction of the hover animation.
- Overflow Hidden: The scaled images will not overflow the image container.
Caption
Same options as the Caption section on the Image Carousel Item Settings.
Button
Same options as the Button section on the Image Carousel Item Settings.
Arrows
If you turn on the arrow navigation from Carousel Settings, you can customize the navigational arrows here.
- Arrow Prev Icon: Use a custom icon and size for the “previous” button.
- Arrow Next Icon: Use a custom icon and size for the “next” button.
- Arrow Icon Color: Select a different color for the arrows.
- Arrow Background: Select a different color for the arrow background.
- Arrow Position: Adjust the position of the navigation arrows.
- Arrow Alignment: Reposition the navigation arrows.
- Opacity: Select how transparent you want the arrow background to be.
- Arrow Margin and Padding: Set the margin and padding separately for the previous and next arrow buttons.
- Box Shadow: Add a shadow effect to the arrow buttons and modify the shadow’s position, strength, and color.
Dots
Here you can customize the navigational dots if you enabled dot navigation in Carousel Settings.
- Alignment: Adjust the placement of the dots.
- Large Active Dot: Select this option to use a large dot to indicate the active item in the carousel.
- Dots Color: Select a color for all the dots.
- Active Dots Color: Indicate the active dot with a different color.
Custom Spacing
Customize the spacing between the carousel items and their components.
- Wrapper: You can customize the padding and margin of the wrapper for the entire carousel, the items, and the content area.
- Content: You can customize the padding and margin for the buttons as well as the captions in the carousel.
Sizing
Change the width, height, and alignment of the whole carousel.
Spacing
This is Divi’s default spacing option, which allows you to set the margin and padding of the whole carousel.
Border
Similar to the border options in the Image Carousel Item Settings.
Box Shadow
Similar to the box shadow options available in the Image Carousel Item Settings.
Animation
Choose from eight different animation effects for the entire carousel.
Image Carousel Settings – Advanced
Divi’s default tab for adding custom CSS codes, scroll effects, etc.
Do You Still Have Questions?
If you are still struggling to use the Image Carousel Module, then please contact our support team at support@diviflash.com.
