: str_replace(): Passing null to parameter #2 ($replace) of type array|string is deprecated in
'background_color_gradient_direction_tablet' => $this->props['background_color_gradient_direction_tablet'],
'background_color_gradient_direction_phone' => $this->props['background_color_gradient_direction_phone'],
'background_color_gradient_direction__hover' => isset( $this->props['background_color_gradient_direction__hover'] ) ? $this->props['background_color_gradient_direction__hover'] : '',
'background_color_gradient_direction_radial' => $this->props['background_color_gradient_direction_radial'],
'background_color_gradient_direction_radial_tablet' => $this->props['background_color_gradient_direction_radial_tablet'],
'background_color_gradient_direction_radial_phone' => $this->props['background_color_gradient_direction_radial_phone'],
'background_color_gradient_direction_radial__hover' => isset( $this->props['background_color_gradient_direction_radial__hover'] ) ? $this->props['background_color_gradient_direction_radial__hover'] : '',
'background_color_gradient_start' => $this->props['background_color_gradient_start'],
'background_color_gradient_start_tablet' => $this->props['background_color_gradient_start_tablet'],
'background_color_gradient_start_phone' => $this->props['background_color_gradient_start_phone'],
'background_color_gradient_start__hover' => isset( $this->props['background_color_gradient_start__hover'] ) ? $this->props['background_color_gradient_start__hover'] : '',
'background_color_gradient_end' => $this->props['background_color_gradient_end'],
'background_color_gradient_end_tablet' => $this->props['background_color_gradient_end_tablet'],
'background_color_gradient_end_phone' => $this->props['background_color_gradient_end_phone'],
'background_color_gradient_end__hover' => isset( $this->props['background_color_gradient_end__hover'] ) ? $this->props['background_color_gradient_end__hover'] : '',
'background_color_gradient_start_position' => $this->props['background_color_gradient_start_position'],
'background_color_gradient_start_position_tablet' => $this->props['background_color_gradient_start_position_tablet'],
'background_color_gradient_start_position_phone' => $this->props['background_color_gradient_start_position_phone'],
'background_color_gradient_start_position__hover' => isset( $this->props['background_color_gradient_start_position__hover'] ) ? $this->props['background_color_gradient_start_position__hover'] : '',
'background_color_gradient_end_position' => $this->props['background_color_gradient_end_position'],
'background_color_gradient_end_position_tablet' => $this->props['background_color_gradient_end_position_tablet'],
'background_color_gradient_end_position_phone' => $this->props['background_color_gradient_end_position_phone'],
'background_color_gradient_end_position__hover' => isset( $this->props['background_color_gradient_end_position__hover'] ) ? $this->props['background_color_gradient_end_position__hover'] : '',
'background_color_gradient_overlays_image' => $this->props['background_color_gradient_overlays_image'],
'background_color_gradient_overlays_image_tablet' => $this->props['background_color_gradient_overlays_image_tablet'],
'background_color_gradient_overlays_image_phone' => $this->props['background_color_gradient_overlays_image_phone'],
'background_color_gradient_overlays_image__hover' => isset( $this->props['background_color_gradient_overlays_image__hover'] ) ? $this->props['background_color_gradient_overlays_image__hover'] : '',
'background_enable_image' => $this->props['background_enable_image'],
'background_enable_image_tablet' => $this->props['background_enable_image_tablet'],
'background_enable_image_phone' => $this->props['background_enable_image_phone'],
'background_enable_image__hover' => isset( $this->props['background_enable_image__hover'] ) ? $this->props['background_enable_image__hover'] : '',
'background_image' => $this->props['background_image'],
'background_image_tablet' => $this->props['background_image_tablet'],
'background_image_phone' => $this->props['background_image_phone'],
'background_image__hover' => isset( $this->props['background_image__hover'] ) ? $this->props['background_image__hover'] : '',
'background_size' => $this->props['background_size'],
'background_size_tablet' => $this->props['background_size_tablet'],
'background_size_phone' => $this->props['background_size_phone'],
'background_size__hover' => isset( $this->props['background_size__hover'] ) ? $this->props['background_size__hover'] : '',
'background_position' => $this->props['background_position'],
'background_position_tablet' => $this->props['background_position_tablet'],
'background_position_phone' => $this->props['background_position_phone'],
'background_position__hover' => isset( $this->props['background_position__hover'] ) ? $this->props['background_position__hover'] : '',
'background_repeat' => $this->props['background_repeat'],
'background_repeat_tablet' => $this->props['background_repeat_tablet'],
'background_repeat_phone' => $this->props['background_repeat_phone'],
'background_repeat__hover' => isset( $this->props['background_repeat__hover'] ) ? $this->props['background_repeat__hover'] : '',
'background_blend' => $this->props['background_blend'],
'background_blend_tablet' => $this->props['background_blend_tablet'],
'background_blend_phone' => $this->props['background_blend_phone'],
'background_blend__hover' => isset( $this->props['background_blend__hover'] ) ? $this->props['background_blend__hover'] : '',
'parallax' => $this->props['parallax'],
'parallax_tablet' => $this->props['parallax_tablet'],
'parallax_phone' => $this->props['parallax_phone'],
'parallax__hover' => isset( $this->props['parallax__hover'] ) ? $this->props['parallax__hover'] : '',
'parallax_method' => $this->props['parallax_method'],
'parallax_method_tablet' => $this->props['parallax_method_tablet'],
'parallax_method_phone' => $this->props['parallax_method_phone'],
'parallax_method__hover' => isset( $this->props['parallax_method__hover'] ) ? $this->props['parallax_method__hover'] : '',
'background_enable_video_mp4' => $this->props['background_enable_video_mp4'],
'background_enable_video_mp4_tablet' => $this->props['background_enable_video_mp4_tablet'],
'background_enable_video_mp4_phone' => $this->props['background_enable_video_mp4_phone'],
'background_enable_video_mp4__hover' => isset( $this->props['background_enable_video_mp4__hover'] ) ? $this->props['background_enable_video_mp4__hover'] : '',
'background_enable_video_webm' => $this->props['background_enable_video_webm'],
'background_enable_video_webm_tablet' => $this->props['background_enable_video_webm_tablet'],
'background_enable_video_webm_phone' => $this->props['background_enable_video_webm_phone'],
'background_enable_video_webm__hover' => isset( $this->props['background_enable_video_webm__hover'] ) ? $this->props['background_enable_video_webm__hover'] : '',
'background_video_mp4' => $this->props['background_video_mp4'],
'background_video_mp4_tablet' => $this->props['background_video_mp4_tablet'],
'background_video_mp4_phone' => $this->props['background_video_mp4_phone'],
'background_video_mp4__hover' => isset( $this->props['background_video_mp4__hover'] ) ? $this->props['background_video_mp4__hover'] : '',
'background_video_webm' => $this->props['background_video_webm'],
'background_video_webm_tablet' => $this->props['background_video_webm_tablet'],
'background_video_webm_phone' => $this->props['background_video_webm_phone'],
'background_video_webm__hover' => isset( $this->props['background_video_webm__hover'] ) ? $this->props['background_video_webm__hover'] : '',
'background_video_width' => $this->props['background_video_width'],
'background_video_width_tablet' => $this->props['background_video_width_tablet'],
'background_video_width_phone' => $this->props['background_video_width_phone'],
'background_video_width__hover' => isset( $this->props['background_video_width__hover'] ) ? $this->props['background_video_width__hover'] : '',
'background_video_height' => $this->props['background_video_height'],
'background_video_height_tablet' => $this->props['background_video_height_tablet'],
'background_video_height_phone' => $this->props['background_video_height_phone'],
'background_video_height__hover' => isset( $this->props['background_video_height__hover'] ) ? $this->props['background_video_height__hover'] : '',
'header_level' => $this->props['header_level'],
'use_bg_overlay' => $this->props['use_bg_overlay'],
'bg_overlay_color' => $bg_overlay_color,
'bg_overlay_color_slider_last_edited' => $this->props['bg_overlay_color_last_edited'],
'bg_overlay_color_tablet' => $bg_overlay_color_tablet,
'bg_overlay_color_phone' => $bg_overlay_color_phone,
'use_text_overlay' => $this->props['use_text_overlay'],
'text_overlay_color' => $text_overlay_color,
'text_overlay_color_slider_last_edited' => $this->props['text_overlay_color_last_edited'],
'text_overlay_color_tablet' => $text_overlay_color_tablet,
'text_overlay_color_phone' => $text_overlay_color_phone,
'text_border_radius' => $text_border_radius,
'text_border_radius_slider_last_edited' => $this->props['text_border_radius_last_edited'],
'text_border_radius_tablet' => $text_border_radius_tablet,
'text_border_radius_phone' => $text_border_radius_phone,
'arrows_custom_color' => $arrows_custom_color,
'arrows_custom_color_slider_last_edited' => $this->props['arrows_custom_color_last_edited'],
'arrows_custom_color_tablet' => $arrows_custom_color_tablet,
'arrows_custom_color_phone' => $arrows_custom_color_phone,
'dot_nav_custom_color' => $dot_nav_custom_color,
'dot_nav_custom_color_slider_last_edited' => $this->props['dot_nav_custom_color_last_edited'],
'dot_nav_custom_color_tablet' => $dot_nav_custom_color_tablet,
'dot_nav_custom_color_phone' => $dot_nav_custom_color_phone,
// Hover Options attribute doesn't have field definition and rendered on the fly, thus the use of array_get()
$background_hover_enabled_key = et_pb_hover_options()->get_hover_enabled_field( 'background' );
$background_color_hover_key = et_pb_hover_options()->get_hover_field( 'background_color' );
$et_pb_slider[ $background_hover_enabled_key ] = self::$_->array_get( $this->props, $background_hover_enabled_key, '' );
$et_pb_slider[ $background_color_hover_key ] = self::$_->array_get( $this->props, $background_color_hover_key, '' );
public function get_transition_fields_css_props() {
$fields = parent::get_transition_fields_css_props();
$fields['dot_nav_custom_color'] = array( 'background-color' => et_pb_slider_options()->get_dots_selector() );
$fields['arrows_custom_color'] = array( 'all' => et_pb_slider_options()->get_arrows_selector() );
function render( $attrs, $content = null, $render_slug ) {
$multi_view = et_pb_multi_view_options($this);
$show_arrows = $this->props['show_arrows'];
$show_pagination = $this->props['show_pagination'];
$parallax = $this->props['parallax'];
$parallax_method = $this->props['parallax_method'];
$auto = $this->props['auto'];
$auto_speed = $this->props['auto_speed'];
$auto_ignore_hover = $this->props['auto_ignore_hover'];
$show_image_video_mobile = $this->props['show_image_video_mobile'];
$background_position = $this->props['background_position'];
$background_size = $this->props['background_size'];
global $et_pb_slider_has_video, $et_pb_slider_parallax, $et_pb_slider_parallax_method, $et_pb_slider_show_mobile, $et_pb_slider_custom_icon, $et_pb_slider_custom_icon_tablet, $et_pb_slider_custom_icon_phone, $et_pb_slider;
$content = $this->content;
if ( '' !== $background_position && 'default' !== $background_position && 'off' === $parallax ) {
$processed_position = str_replace( '_', ' ', $background_position );
ET_Builder_Module::set_style( $render_slug, array(
'selector' => '%%order_class%% .et_pb_slide',
'declaration' => sprintf(
'background-position: %1$s;',
esc_html( $processed_position )
if ( '' !== $background_size && 'default' !== $background_size && 'off' === $parallax ) {
ET_Builder_Module::set_style( $render_slug, array(
'selector' => '%%order_class%% .et_pb_slide',
'declaration' => sprintf(
'-moz-background-size: %1$s;
-webkit-background-size: %1$s;
esc_html( $background_size )
$this->add_classname( $render_slug );
$this->add_classname( 'et_pb_slider' );
if ( $et_pb_slider_has_video ) {
$this->add_classname( 'et_pb_preload' );
if ( 'off' === $show_arrows ) {
$this->add_classname( 'et_pb_slider_no_arrows' );
if ( 'off' === $show_pagination ) {
$this->add_classname( 'et_pb_slider_no_pagination' );
if ( 'on' === $parallax ) {
$this->add_classname( 'et_pb_slider_parallax' );
$this->add_classname( array(
"et_slider_speed_{$auto_speed}",
if ( 'on' === $auto_ignore_hover ) {
$this->add_classname( 'et_slider_auto_ignore_hover' );
if ( 'on' === $show_image_video_mobile ) {
$this->add_classname( 'et_pb_slider_show_image' );
$this->generate_responsive_hover_style( 'arrows_custom_color', et_pb_slider_options()->get_arrows_selector(), 'color' );
$this->generate_responsive_hover_style( 'dot_nav_custom_color', et_pb_slider_options()->get_dots_selector(), 'background-color' );
// Remove automatically added classnames
$this->remove_classname( 'et_pb_fullwidth_slider' );
$multi_view_data_attr = $multi_view->render_attrs( array(
'et_pb_slider_no_arrows' => array(
'et_pb_slider_no_pagination' => array(
'show_pagination' => 'off',
'<div%3$s class="%1$s"%5$s>
<div class="et_pb_slides">
</div> <!-- .et_pb_slides -->
</div> <!-- .et_pb_slider -->
$this->module_classname( $render_slug ),
$this->inner_shadow_back_compatibility( $render_slug ),
$multi_view_data_attr // $5
// Reset passed slider item value
private function inner_shadow_back_compatibility( $functions_name ) {
$utils = ET_Core_Data_Utils::instance();
version_compare( $utils->array_get( $atts, '_builder_version', '3.0.93' ), '3.0.99', 'lt' )
$class = self::get_module_order_class( $functions_name );
'.%1$s.et_pb_slider .et_pb_slide {'
. '-webkit-box-shadow: none; '
. '-moz-box-shadow: none; '
if ( 'off' !== $utils->array_get( $atts, 'show_inner_shadow' ) ) {
'.%1$s > .box-shadow-overlay { '
. '-webkit-box-shadow: inset 0 0 10px rgba(0, 0, 0, 0.1); '
. '-moz-box-shadow: inset 0 0 10px rgba(0, 0, 0, 0.1); '
. 'box-shadow: inset 0 0 10px rgba(0, 0, 0, 0.1); '
new ET_Builder_Module_Fullwidth_Slider;