Welcome To The Divi Carousel Maker Demo Site!

Browse and download the examples below, or use the menu above to explore the specific features of the carousel plugin.

Carousel Examples

This page provides design examples for the Divi Carousel Maker plugin and Divi modules. Keep in mind, these are just examples, and the designs can be customized however you want using over 120 settings in the carousel and the familiar Divi Builder.

How To Download

Each of the stylized examples below can be downloaded and imported into your website. To do that, simply click the download button on each section, and save the .json file to your computer. Then import it to the Divi Library on your site, and then add the section to your page or layout. You can get full instructions here.

Documentation

Please be sure to review all the plugin documentation and follow our guides to learn how to use the plugin. Remember that the plugin provides a lot of other functionality that is not very easy to demonstrate, but please check the product settings and features list to see everything it offers

Carousel Demo 1

This is an example carousel of Image modules as slides. The row is fullwidth, navigation buttons are enabled on the sides with horizontal positioning, navigation dots are enabled bottom center, and the center module is highlighted by adding 50% opacity to the others.

Carousel Demo 2

This is an example carousel using Divi Testimonial modules as slides. Navigation buttons are enabled on the sides with navigation dots enabled bottom center.

Carousel Demo 3

This is an example carousel using Divi Video modules as slides. Navigation buttons are enabled on the sides, navigation control dots enabled bottom center, and the slide counter is enabled.

Carousel Demo 4

This is an example carousel using Divi Blurb modules as slides. Navigation buttons are enabled on the sides, navigation dots are enabled bottom center, and the center module is highlighted by changing the size of the others to 0.9. 

Carousel Demo 5

This is an example carousel using Divi Blurb modules as slides. Navigation buttons are enabled on the sides, navigation dots are enabled bottom center, and a bounce hover effect is applied.

Carousel Demo 6

This is an example carousel using Divi Blog modules as slides with some additional code from a tutorial on our blog to style the blog read more button. The code is included in the download file in a Code module in the section layout. Navigation buttons are enabled on the sides, navigation dots are enabled bottom left.

Carousel Demo 7

This is an example carousel using Divi Image modules as slides. Navigation buttons are enabled on the sides, navigation dots are enabled bottom center, and a push up hover effect is applied.

Carousel Demo 8

This is an example logo carousel using Divi Image modules as slides. Navigation buttons are enabled on the sides, and navigation dots are enabled bottom center.

Carousel Demo 9

This is an example carousel using Divi Audio modules as slides. Navigation buttons are enabled on the sides, and navigation dots are enabled bottom center.

Carousel Demo 10

This is an example carousel using Divi Blurb modules as slides. Navigation dots are enabled bottom center.

Carousel Demo 11

This is an example carousel using Divi Blurb modules as slides. Navigation buttons are enabled on the sides, and navigation dots are enabled bottom center.

Carousel Demo 12

This is an example carousel using Divi Woo Product modules as slides. Navigation buttons are enabled on the sides, and navigation dots are enabled bottom center.

Carousel Demo 13

This is an example carousel using Divi Text modules as slides. Navigation buttons are enabled on the sides, navigation dots are enabled bottom center, and infinite scroll is disabled with the buttons set to hide.

Carousel Using 3rd Party Modules

This is an example carousel reminding you that this is the only plugin for Divi that can make a carousel using ANY Divi module as slides, including 3rd party modules from other developers.

Carousel Demo 14

This is an example carousel using Divi Person modules as slides. Navigation buttons are enabled on the sides, navigation dots are enabled bottom center, and a grow hover effect is applied.

Carousel Demo 15

This is an example carousel using Divi Portfolio modules as slides. This is possible with the “offset” feature added to the module by our plugin. Navigation buttons are enabled on the sides, navigation numbers are enabled bottom left, and a vertical wobble hover effect is applied.

Carousel Demo 16

This is an example carousel using Divi Testimonial modules as slides. Navigation control images are enabled and used to represent each person who shared the quote.

Carousel Demo 17

This is an example carousel using Divi Video modules as slides. The row is set to fullwidth, navigation buttons with text are enabled bottom center, and the center module is highlighted by making the other modules 50% opacity and 0.9 size.

Carousel Demo 18

This is an example carousel using Divi Blurb modules as slides. Navigation buttons are enabled on the top center.

Carousel Demo 19

This is an example carousel using Divi Text modules as slides. Navigation control images are enabled and used to represent each slide.

Carousel Demo 20

This is an example carousel using Divi Circle Counter modules as slides. Navigation buttons are enabled top right and navigation control dots are enabled bottom center.

Over 2200 Projects
Completed

Carousel Demo 21

This is an example carousel using Divi Blog modules as slides with some additional code from tutorials on our blog to place the image on the left and details on the right, and also to style the blog read more button. The code is included in the download file in a Code module in the section layout. The number of columns is set to 2 on desktop, navigation buttons are enabled on the sides, and navigation controls are enabled bottom center.

Carousel Demo 22

This is an example logo carousel using Divi Image modules as slides. Continuous smooth scroll is enabled with a speed set to 2500ms, and a vertical wobble hover effect is added. 

Carousel Demo 23

This is an example carousel located in the column of a Specialty Section using Divi Image modules as slides. The number of columns is set to 4, and navigation buttons are enabled bottom left.

Lorem ipsum dolor sit amet

Your content goes here. Edit or remove this text inline or in the module Content settings.

Carousel Demo 24

This is an example carousel using Divi Blog modules as slides. Navigation buttons are enabled on the sides, and the scroll transition effect is set to flip.

Carousel Demo 25

This is an example carousel using Divi Blurb modules as slides. Navigation buttons are enabled top center and a push down hover affect is applied.

Carousel Demo 26

This is an example carousel using Divi Text modules as slides. Navigation buttons are enabled on the sides.

Carousel Demo 27

This is an example carousel of Divi Blurb modules as slides. Navigation buttons are enabled on the sides and navigation control numbers are enabled bottom center.

Carousel Demo 28

This is an example carousel using Divi Testimonial modules as slides. Navigation buttons are enabled top center, navigation control dots enabled bottom center, and the scroll transition effect set to fade.

Carousel Demo 29

This is an example carousel using Divi Blurb modules as slides. Navigation buttons are enabled on the sides, navigation controls are enabled bottom center, the center module is highlighted by changing the size of the other modules to 0.9, and the slider counter is enabled.

Carousel Demo 30

This is an example carousel using Divi Text modules as slides. Navigation buttons are enabled on the sides and horizontal position adjusted, navigation control dots are enabled bottom center, and the scroll transition effect is set to coverflow.

Travel With Us

Carousel Demo 31

 This is an example carousel using Divi Testimonial modules as slides. Navigation buttons are enabled on the bottom left.

Testimonials —

What Our Amazing Customers Are Saying

Carousel Demo 32

This is an example carousel using Divi Woo Product modules as slides. Navigation buttons are enabled on the sides, navigation controls are enabled bottom center, a coverflow transition effect is applied, and extra carousel padding is used to accommodate the coverflow effect.

Carousel Demo 33

This is an example carousel using Divi Testimonial modules as slides. Navigation controls are enabled bottom center, and a flip transition effect is applied.

Carousel Demo 34

This is an example logo carousel using Divi Image modules as slides. Navigation buttons are enabled bottom center, and a grow hover effect is applied.

Carousel Demo 35

This is an example carousel using Divi Blurb modules as slides. The row is fullwidth, and navigation buttons are enabled bottom left.

Carousel Demo 36

This is an example carousel using Divi Blurb modules as slides. Navigation buttons are enabled on the sides.

Carousel Demo 37

This is an example carousel using Divi Video modules as slides. The row is fullwidth, navigation buttons are enabled bottom center with horizontal and vertical adjustments, navigation control dots are enabled bottom center, cut off mode is enabled, and a custom width of 420px is set.

Carousel Demo 38

This is an example carousel using Divi Testimonial modules as slides. Navigation buttons are enabled on the sides, navigation control images are enabled bottom center to represent each slide, and a pulse hover effect is applied.

Carousel Demo 39

This is an example carousel using Divi Call-To-Action modules as slides. Navigation controls are enabled bottom center, and a push up hover effect is applied.

Carousel Demo 40

This is an example carousel using Divi Blurb modules as slides. Navigation buttons are enabled on the sides, and cut off mode is enabled.

Carousel Demo 41

This is an example carousel using Divi Call-To-Action modules as slides. Navigation control images are enabled bottom center to represent each slide, and the active control image is highlighted by changing the opacity of the others to 0.4.

Carousel Demo 42

This is an example carousel using Divi Blurb modules as slides. Navigation buttons are enabled on the sides, and a push up hover effect is applied.

Carousel Demo 43

This is an example carousel using Divi Call-To-Action modules as slides. Navigation buttons are enabled on the sides, navigation controls are enabled bottom center, and a stack transition effect is applied.

Carousel Demo 44

This is an example carousel using Divi Blurb modules as slides. Navigation buttons are enabled on the sides, and infinite scroll is disabled with the arrows set to hide.

Carousel Demo 45

This is an example carousel using Divi Call-To-Action modules as slides. Navigation controls are enabled bottom center.

Carousel Demo 46

This is an example carousel using Divi Blog modules as slides with some additional code from a tutorial on our blog to style the blog read more button. The code is included in the download file in a Code module in the section layout. The row is set to fullwidth, navigation buttons are enabled on the sides with horizontal position adjusted, navigation controls are enabled bottom center, and the center slide is highlighted by changing the size of the others to 0.9 with 70% opacity. 

Carousel Demo 47

This is an example carousel using Divi Blurb modules as slides. Navigation controls are enabled bottom center, and a grow hover effect is applied.

Carousel Demo 48

This is an example carousel using multiple Divi modules stacked together in rows. This special carousel uses 6 different modules to represent each product including Woo Product Images, Woo Product Title, Woo Product Description, Woo Product Price, Button, and Woo Add To Cart. The number of rows is set to 6, one for each module. All the modules are linked to their respective product. Navigation buttons are enabled on the sides, and navigation controls are enabled bottom center.

Carousel Demo 49

This is an example carousel using Divi Person modules as slides. Navigation buttons are enabled on the sides, and navigation controls are enabled bottom center.

Carousel Demo 50

This is an example carousel using Divi Call-To-Action modules as slides with a little extra CSS styling. Navigation buttons are enabled on the sides, the slide counter is enabled, and the center slide is highlighted by changing the size of the others to 0.9 and 50% opacity. 

Carousel Demo 51

This is an example carousel using Divi Call-To-Action modules as slides. Navigation buttons are enabled on the sides, navigation controls are enabled bottom center, and the center slide is highlighted by changing the size to 0.9 and opacity 80%.

Carousel Demo 52

This is an example carousel using Divi Text modules as slides. Navigation buttons are enabled bottom left.

Carousel Demo 53

This is an example carousel using Divi Testimonial modules as slides. The row is set to fullwidth, navigation buttons are enabled on the sides with horizontal position adjusted, navigation controls are enabled bottom center, and the center slide is highlighted by changing size of the others to 0.9 and opacity to 50%.

Carousel Demo 54

This is an example carousel using Divi Blurb modules as slides. Navigation buttons are enabled on the sides, navigation controls are enabled bottom center, and a pulse hover effect is applied.

Carousel Demo 55

This is an example carousel using Divi Video modules as slides. The row is set to fullwidth, navigation arrows are enabled bottom center with vertical adjustments, cut off mode is enabled, a custom width of 700px is set, and a vertical wobble hover effect is added.

Carousel Demo 56

This is an example carousel using Divi Image modules as slides. Navigation control images are enabled bottom center to act as thumbnails corresponding to each slide, and the lightbox gallery feature is enabled.

Carousel Demo 57

This is an example logo carousel using Divi Image modules as slides. The row is set to fullwidth, and continuous smooth scroll is enabled with a speed set to 2000ms.

Carousel Demo 58

This is an example carousel using Divi Blurb modules as slides with a little extra CSS styling. The row is set to fullwidth, navigation buttons are enabled bottom center, a custom width of 600px is used, cut off mode is enabled, and the center slide is highlighted by making the others 0.9 size, 50% opacity, and 1px blur.

Carousel Demo 59

This is an example carousel using Divi Blog modules as slides.  Navigation buttons are enabled on the sides, navigation controls are enabled bottom center, and a coverflow transition effect is applied.

Carousel Demo 60

This is an example carousel using Divi Blurb modules as slides.  Navigation buttons are enabled on the sides, navigation controls are enabled bottom center, and a shrink hover effect is applied.

Carousel Demo 61

This is an example carousel using Divi Image modules as slides in the right column.  Navigation controls are enabled bottom center, and a stack transition effect is applied.

Become Part Of A Great Story

Carousel Demo 62

This is an example carousel using Divi Call-To-Action modules as slides.  Navigation buttons are enabled top right, and a push down hover effect is applied.

Carousel Demo 63

This is an example carousel using Divi Image modules as slides.  Navigation controls are enabled bottom center, and the auto scroll direction is left-to-right.

Carousel Demo 64

This is an example carousel using Divi Person modules as slides.  Navigation buttons are enabled on the sides, navigation control numbers are enabled bottom center, and the center slide is highlighted by changing the size of the other slides to 0.9.

Carousel Demo 65

This is an example carousel using Divi Blog modules as slides with some additional code from a tutorial on our blog to move the text and button over the image, and also to style the blog read more button. The code is included in the download file in a Code module in the section layout. Navigation buttons are enabled on the sides, and navigation controls are enabled bottom center.

Carousel Demo 66

This is an example carousel using Divi Image modules as slides. The row is set to fullwidth, navigation buttons are enabled bottom center, navigation controls are enabled bottom center, and the center slide is highlighted by changing the size of the others to 0.9.

Carousel Demo 67

This is an example carousel using Divi Blurb modules as slides. Navigation buttons are enabled on the sides, and the stack transition effect is applied.

Carousel Demo 68

This is an example logo carousel using Divi Image modules as slides. Navigation buttons with text are enabled bottom center, navigation control numbers are enabled bottom center, and a coverflow transition effect is applied.

Carousel Demo 69

This is an example carousel using Divi Blurb modules as slides. Navigation buttons are enabled on the sides, navigation controls are enabled bottom center, and a bob hover effect is applied.

Carousel Demo 70

This is an example carousel using Divi Portfolio modules as slides. This is possible with the “offset” feature added to the module by our plugin. The number of slides is set to 2, navigation buttons are enabled on the sides, navigation controls are enabled bottom center, and a bounce hover effect is applied.

Carousel Demo 71

This is an example carousel using Divi Blurb modules as slides. Navigation buttons are enabled bottom right.

Carousel Demo 72

This is an example carousel using Divi Blurb modules as slides. Navigation buttons are enabled bottom center, navigation controls are enabled bottom center, and the center slide is highlighted by changing the size of the others to 0.8.

Carousel Demo 73

This is an example carousel using Divi Blurb modules as slides that have been modified with some additional CSS code from a tutorial on our blog. The code is included in the download file in a Code module in the section layout. Auto scroll is set to pause on hover.

Carousel Demo 74

This is an example carousel using Divi Blog modules as slides. This is meant to be a news ticker using the smooth scroll effect.

Carousel Demo 75

This is an example carousel using Divi Image modules as slides. Navigation buttons are enabled on the sides with horizontal position adjustment, a bounce hover effect is applied, and the gallery lightbox feature is enabled.

Carousel Demo 76

This is an example carousel using Divi Blurb modules as slides. Navigation buttons are enabled on the sides, and the coverflow transition effect is applied.

Carousel Demo 77

This is an example carousel using Divi Woo Product modules as slides. Navigation control numbers are enabled bottom center, and a push up hover effect is applied.

Carousel Demo 78

This is an example carousel using Divi Image modules as slides in the left column. Navigation controls are enabled bottom center.

House Interior

Your content goes here. Edit or remove this text inline or in the module Content settings. You can also style every aspect of this content in the module Design settings and even apply custom CSS to this text in the module Advanced settings.

Carousel Demo 79

This is an example carousel using Divi Image modules as slides in the right column. The number of columns is set to 2, navigation buttons are enabled top left, navigation controls are enabled bottom left, and a pulse hover effect is applied.

Travel

Discover exciting and latest world events, travel deals, saftey tips and more news. 

Carousel Demo 80

This is an example carousel using Divi Person modules as slides. Navigation buttons are enabled on the sides, and navigation controls are enabled bottom center.

Carousel Demo 81

This is an example carousel using Divi Blurb modules as slides. Navigation buttons are enabled on the sides, navigation controls are enabled bottom center, and a push up hover effect is applied.

Carousel Demo 82

This is an example carousel using Divi Call-To-Action modules as slides with a little extra CSS styling. Navigation buttons are enabled top right, navigation controls are enabled bottom center, and a vertical wobble hover effect is applied.

Carousel Demo 83

This is an example carousel using Divi Call-To-Action modules as slides. The row is set to fullwidth, and cut off mode is enabled.

Carousel Demo 84

These are two example carousels using Divi Text modules as slides in the left column and Divi Image modules as slides in the right column. Navigation control dots are enabled bottom center on the left column, and navigation buttons are enabled on the sides on the right column. The flip transition effect is applied to both columns.

Carousel Demo 85

This is an example carousel using three different Divi modules stacked as rows including Text, Image, and Social Sharing modules as slides. This works by using the Number of Rows feature in the carousel settings set to 3. Navigation buttons are enabled on the sides, navigation controls are enabled bottom center, and the center slide is highlighted by changing the size of the others to 0.9 and the opacity to 50%.

Carousel Demo 86

This is an example carousel using Divi Blurb modules as slides with some extra CSS code to adjust a few minor things. The code is included in the download file in a Code module in the section layout. Navigation buttons are enabled bottom right, navigation controls are enabled bottom center, and infinite scroll is disabled with the buttons set to 50% when they reach the end.

Carousel Demo 87

This is an example carousel using Divi Call-To-Action modules as slides. Navigation buttons are enabled bottom left, navigation controls are enabled bottom center, and a horizontal wobble hover effect is applied.

Carousel Demo 88

This is an example carousel using Divi Text modules as slides.

Carousel Demo 89

This is an example carousel using Divi Text modules as slides. Navigation buttons are enabled on the sides, and the center slide is highlighted by changing the size of the others to 0.9.

Carousel Demo 90

This is an example carousel using Divi Text modules as slides. Navigation buttons are enabled on the sides, and the coverflow transition effect is applied.

Carousel Demo 91

This is an example carousel using Divi Text modules as slides. Navigation controls are enabled bottom center, and the flip transition effect is applied.

Carousel Demo 92

This is an example carousel using Divi Blurb modules as slides with some additional CSS code to change the Blurb module into two columns on desktop and stack normally on mobile. The code is included in the download file in a Code module in the section layout. Navigation buttons are enabled on the sides, and navigation controls are enabled bottom center.

Carousel Demo 93

This is an example carousel using Divi Blurb modules as slides with some additional CSS code from a tutorial on our blog to add the icon button to the Blurb modules. The code is included in the download file in a Code module in the section layout. Navigation buttons are enabled on the sides, and navigation controls are enabled bottom center.

Carousel Demo 94

This is an example carousel using Divi Blurb modules as slides. Navigation buttons are enabled top center, and a vertical wobble hover effect is applied.

Carousel Demo 95

This is an example carousel using Divi Blurb modules as slides. Navigation buttons are enabled on the sides with horizontal position adjustment, navigation controls are enabled bottom center, and push up hover effect is applied.

Carousel Demo 96

This is an example carousel using Divi Testimonial modules as slides. Navigation buttons are enabled bottom right, with a grow hover effect applied.

Carousel Demo 97

This is an example carousel using Divi Blog modules as slides. Navigation buttons are enabled top center, and navigation controls are enabled bottom center.

Carousel Demo 98

This is an example carousel using Divi Person modules as slides. Navigation controls are enabled bottom center, and the center slide is changing the size of the others to 0.9.

Carousel Demo 99

This is an example carousel using Divi Blurb modules as slides. Navigation buttons are enabled top right, and the center slide is highlighted by setting the active slide background color to white.

Carousel Demo 100

This is an example carousel using Divi Person modules as slides. Navigation control images are enabled bottom center as thumbnails for the slides, and a flip transition effect is applied.

Carousel Demo 101

This is an example carousel using Divi Blurb modules as slides. Navigation buttons are enabled bottom center.

Carousel Demo 102

This is an example carousel using Divi Image modules as slides. Navigation buttons are enabled on the sides, navigation controls are enabled bottom center, a shrink hover effect is applied, and the gallery lightbox feature is enabled.

Carousel Demo 103

This is an example carousel using Divi Testimonial modules as slides. Navigation control dots are enabled bottom center, and cut off mode is enabled.

Carousel Demo 104

This is an example carousel using Divi Blurb modules as slides. Navigation buttons are enabled on the sides with horizontal position adjustment, and a bounce hover effect is applied.

Carousel Demo 105

This is an example carousel using Divi Blurb modules as slides. Navigation buttons are enabled top right, and the center slide is highlighted by changing the opacity of the other slides to 15% and the size to 0.9.

Carousel Demo 106

This is an example carousel using Divi Testimonial modules as slides. Navigation control images are enabled bottom center to act as thumbnails that correspond to each slide.

Carousel Demo 107

This is an example carousel using Divi Blurb modules as slides with some additional CSS code from a tutorial on our blog to add the button to the Blurb modules. The code is included in the download file in a Code module in the section layout. Navigation buttons are enabled on the sides, navigation controls are enabled bottom center, and a push up hover effect is applied.

Carousel Demo 108

This is an example carousel using Divi Testimonial modules as slides. Navigation controls are enabled bottom center, and cut off mode is enabled.

Carousel Demo 109

This is an example carousel using Divi Testimonial modules as slides in the left column. Navigation buttons are enabled bottom left, with the flip transition effect applied.

Carousel Demo 110

This is an example carousel using Divi Image modules as slides. The smooth scroll feature is enabled.

Carousel Demo 111

This is an example carousel using Divi Call-To-Action modules as slides.

Carousel Demo 112

This is an example carousel using Divi Text modules in the left column and Divi Image modules in the right column. Navigation control dots are enabled bottom left in the left column, and navigation buttons are enabled on the sides in the right column.

Carousel Demo 113

This is an example carousel using Divi Text modules in the left column and Divi Image modules in the right column. Navigation buttons as text are enabled top left on the left column, and navigation control dots are enabled bottom left on the right column.