How to edit the Carousel design

There are 5 carousel effect to the DiviPro child theme. which effect you like you need to copy that section and paste it to your page.

Copy, paste module is a Divi’s fantastic feature. Sam Munoz wrote a fantastic tutorial about it. You diffintely need to check it out if you don’t know how to use this.

After pasting the section please go to the Divi wireframe view ( bottom left side of the Divi visual builder ). Here you will find the Carousel Container row. This row contains all carousel item. Edit the content here.

If you want to add the another Divi module please make sure you need to add a custom class swiper-slide to the CSS CLASS section under the Advanced tab.

Advanced option

There are total 5 carousel effect. All carousel has different class name

Multi Column Carousel ( dipro_multicolumnSwiper )
Flip Carousel ( dipro_flip_effect )
Slides Per View Carousel ( dipro_slides_per_view )
Cube Effect Carousel ( dipro_cube_effect )
Coverflow Effect Carousel ( dipro_coverflow_effect_carousel )

which effect you like you need to copy that section and paste it to your page.

Carousel settings:

Carousel Container

Carousel container has 3 classes.

1. swiper-container

2. dipro_carousel

3. Carousel effect class name like (dipro_multicolumnSwiper)

All carousel container class name:

Multi Column Carousel ( dipro_multicolumnSwiper )
Flip Carousel ( dipro_flip_effect )
Slides Per View Carousel ( dipro_slides_per_view )
Cube Effect Carousel ( dipro_cube_effect )
Coverflow Effect Carousel ( dipro_coverflow_effect_carousel )

Pagination Container

Carousel pagination container has 2 classes.

1. dipro_pagination

2. Carousel effect pagination class (swiper-pagination-multi)

All carousel pagination container class name:

Multi Column Carousel ( swiper-pagination-multi )
Flip Carousel ( swiper-pagination-flip )
Slides Per View Carousel ( swiper-pagination-slidesperview )
Cube Effect Carousel ( swiper-pagination-cube )
Coverflow Effect Carousel ( swiper-pagination-coverflow )

If you want to change the carousel effect, just change the container effect class name and pagination effect class name.

Ex: Want to a coverflow carousel effect.

1. container class name would be: swiper-container dipro_carousel dipro_coverflow_effect_carousel

2. Pagination class name would be: dipro_pagination swiper-pagination-coverflow

Arrow Position:

You need to add a small custom code to change the arrow position.

Please copy the below code and paste it to the Divi theme option custom css box. Change the number -227 to your preferred Position.

.dipro_carousel .swiper-button-next, .dipro_carousel .swiper-button-prev{ top:-227px; }

Theme options

Arrow background color is a site primary color. which you can change by clicking the Theme customizer->Divipro settings->color->primary color.

DiviPro Multipurpose Divi Child Theme