How to edit the carousel design

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

The copy, paste module is Divi’s fantastic feature. Sam Munoz wrote a fantastic tutorial about it. You definitely 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 items. 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 is a total of 5 carousel effects. All carousel has different class names

1. Multi Column Carousel ( dipro_multicolumnSwiper )
2. Flip Carousel ( dipro_flip_effect )
3. Slides Per View Carousel ( dipro_slides_per_view )
4. Cube Effect Carousel ( dipro_cube_effect )
5. 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

The carousel container has 3 classes.

1. swiper-container

2. dipro_carousel

3. Carousel effect class name like (dipro_multicolumnSwiper)

All carousel container class name: #

1. Multi Column Carousel ( dipro_multicolumnSwiper )
2. Flip Carousel ( dipro_flip_effect )
3. Slides Per View Carousel ( dipro_slides_per_view )
4. Cube Effect Carousel ( dipro_cube_effect )
5. Coverflow Effect Carousel ( dipro_coverflow_effect_carousel )

Pagination Container

The carousel pagination container has 2 classes.

1. dipro_pagination

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

All carousel pagination container class name: #

1. Multi Column Carousel ( swiper-pagination-multi )
2. Flip Carousel ( swiper-pagination-flip )
3. Slides Per View Carousel ( swiper-pagination-slidesperview )
4. Cube Effect Carousel ( swiper-pagination-cube )
5. 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 a coverflow carousel effect.

So

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.