Adding a ‘Slider Animations’ section to the Theme Customizer

Adding a ‘Slider Animations’ section to the Theme Customizer

So I’m currently sat around a table with 9 other huge Divi enthusiasts ahead of the #diviwcoc16 having the time of my life. Geeky I know. I’ve just been playing around with some slider animations on a site I’m working on and thought it might be nice to add the option to the module customizer, so you guys can too.

sliderimage
  • Facebook

If you want to add the two bottom options (Slide Description Animation, Slide Image Animation) then just copy the code below into your functions.php.

// ====================== Slider Animations ======================

function ds_slider_animation_options($wp_customize) {
 
 // Add Image / Video Animation Options
 $wp_customize->add_setting('ds_slide_description', array(
 'default' => 'auto',
 'type' => 'option',
 'capability' => 'edit_theme_options',
 ));
 
 // Add Image / Video Animation Options
 $wp_customize->add_control('ds_slide_description', array(
 'label' => __('Slide Description Animation'),
 'section' => 'et_pagebuilder_slider',
 'type' => 'select',
 'priority' => 60,
 'settings' => 'ds_slide_description',
 'choices' => array(
 'fadeLeft' => 'Fade Left',
 'fadeBottom' => 'Fade Bottom',
 'fadeRight' => 'Fade Right',
 'fadeTop' => 'Fade Top',
 'fadeInRight' => 'Fade In Right',
 'fadeInLeft' => 'Fade In Left',
 'fadeInTop' => 'Fade In Top',
 'fadeInBottom' => 'Fade In Bottom',
 'Grow' => 'Grow',
 'flipInX' => 'Flip In X axis',
 'flipInY' => 'Flip In Y axis',
 ),
 ));
 
 // Add Image / Video Animation Options
 $wp_customize->add_setting('ds_slide_image', array(
 'default' => 'auto',
 'type' => 'option',
 'capability' => 'edit_theme_options',
 ));
 
 // Add Image / Video Animation Options
 $wp_customize->add_control('ds_slide_image', array(
 'label' => __('Slide Image Animation'),
 'section' => 'et_pagebuilder_slider',
 'type' => 'select',
 'priority' => 60,
 'settings' => 'ds_slide_image',
 'choices' => array(
 'fadeLeft' => 'Fade Left',
 'fadeBottom' => 'Fade Bottom',
 'fadeRight' => 'Fade Right',
 'fadeTop' => 'Fade Top',
 'fadeInRight' => 'Fade In Right',
 'fadeInLeft' => 'Fade In Left',
 'fadeInTop' => 'Fade In Top',
 'fadeInBottom' => 'Fade In Bottom',
 'Grow' => 'Grow',
 'flipInX' => 'Flip In X axis',
 'flipInY' => 'Flip In Y axis',
 ),
 ));
}

add_action('customize_register', 'ds_slider_animation_options');

function ds_slider_animation_options_css() {
 
$slide_description = get_option('ds_slide_description','fadeInRight');
$slide_image = get_option('ds_slide_image','fadeInRight');
 
?> 

<style>
.et-pb-active-slide .et_pb_slide_description {
 animation-name: <?php echo $slide_description; ?>;
}

.et-pb-active-slide .et_pb_slide_image, .et-pb-active-slide .et_pb_slide_video {
 animation-name: <?php echo $slide_image; ?>;
}
</style>

<?php
}

add_action( 'wp_head', 'ds_slider_animation_options_css' );
?>

It’ll add the two option right in the native ‘Slider Module’ customizer settings.

I hope you find this useful 🙂

Stephen James

SJ is a web developer living in the coastal town of Southsea, England. He is a Divi and WordPress advocate and the founder of Divi Space.

Download Divi Layouts

FOR FREE!

Fill the form below. We will send you a link to download layouts.  You will also get notified about the future giveaways! 

Great, you've entered our giveaway! Please check your email!