tag needed. // --------------------------------------------------------------------------- $gutslider_css_vars = array(); foreach ( array( 'desk', 'tab', 'mob' ) as $bp ) { $val = isset( $gutslider_gap_ranges[ $bp ] ) && is_numeric( $gutslider_gap_ranges[ $bp ] ) ? $gutslider_gap_ranges[ $bp ] : null; $unit = ( isset( $gutslider_gap_units[ $bp ] ) && in_array( $gutslider_gap_units[ $bp ], $gutslider_allowed_units, true ) ) ? $gutslider_gap_units[ $bp ] : 'px'; if ( null !== $val ) { $gutslider_css_vars[] = '--marquee-gap-' . $bp . ':' . floatval( $val ) . $unit; } } if ( $gutslider_is_vertical ) { foreach ( array( 'desk', 'tab', 'mob' ) as $bp ) { $val = isset( $gutslider_height_ranges[ $bp ] ) && is_numeric( $gutslider_height_ranges[ $bp ] ) ? $gutslider_height_ranges[ $bp ] : null; $unit = ( isset( $gutslider_height_units[ $bp ] ) && in_array( $gutslider_height_units[ $bp ], $gutslider_allowed_units, true ) ) ? $gutslider_height_units[ $bp ] : 'px'; if ( null !== $val ) { $gutslider_css_vars[] = '--marquee-height-' . $bp . ':' . floatval( $val ) . $unit; } } } // --------------------------------------------------------------------------- // Build wrapper attributes. // --------------------------------------------------------------------------- $gutslider_wrapper_class = implode( ' ', array( 'marquee-wrapper', esc_attr( $gutslider_unique_id ), 'marquee-' . esc_attr( $gutslider_orientation ), ) ); $gutslider_wrapper_attrs = array( 'class' => $gutslider_wrapper_class ); if ( ! empty( $gutslider_css_vars ) ) { // All var names are hardcoded; values use floatval() + whitelisted units — no raw user input. $gutslider_wrapper_attrs['style'] = implode( ';', $gutslider_css_vars ); } // --------------------------------------------------------------------------- // Build container attributes. // --------------------------------------------------------------------------- $gutslider_container_classes = array( 'marquee-container', 'marquee-' . esc_attr( $gutslider_orientation ), ); if ( $gutslider_pause_on_hover ) { $gutslider_container_classes[] = 'pause-on-hover'; } // --------------------------------------------------------------------------- // Determine animation name from orientation + direction. // --------------------------------------------------------------------------- if ( $gutslider_is_vertical ) { $gutslider_animation_name = ( 'up' === $gutslider_direction || 'left' === $gutslider_direction ) ? 'marquee-scroll-up' : 'marquee-scroll-down'; } else { $gutslider_animation_name = 'marquee-scroll-' . $gutslider_direction; } ?>
>