Ubuntu
start_controls_section(
'eael_image_scroller_section_general',
[
'label' => esc_html__('General', 'essential-addons-elementor'),
]
);
$this->add_control(
'eael_image_scroller_bg_img',
[
'label' => __('Background Image', 'essential-addons-elementor'),
'type' => Controls_Manager::MEDIA,
'default' => [
'url' => Utils::get_placeholder_image_src(),
],
]
);
$this->add_control(
'eael_image_scroller_container_height',
[
'label' => __('Container Height', 'essential-addons-elementor'),
'type' => Controls_Manager::SLIDER,
'description' => 'Container height/width should be less than the image height/width. Otherwise scroll will not work.',
'size_units' => ['px'],
'range' => [
'px' => [
'min' => 100,
'max' => 1000,
'step' => 1,
],
],
'default' => [
'unit' => 'px',
'size' => 300,
],
'selectors' => [
'{{WRAPPER}} .eael-image-scroller' => 'height: {{SIZE}}{{UNIT}};',
],
'separator' => 'before',
]
);
$this->add_control(
'eael_image_scroller_direction',
[
'label' => __('Scroll Direction', 'essential-addons-elementor'),
'type' => Controls_Manager::SELECT,
'default' => 'vertical',
'options' => [
'horizontal' => __('Horizontal', 'essential-addons-elementor'),
'vertical' => __('Vertical', 'essential-addons-elementor'),
],
'separator' => 'before',
]
);
$this->add_control(
'eael_image_scroller_auto_scroll',
[
'label' => esc_html__('Auto Scroll', 'essential-addons-elementor'),
'type' => Controls_Manager::SWITCHER,
'return_value' => 'yes',
'default' => 'yes',
'separator' => 'before',
]
);
$this->add_control(
'eael_image_scroller_duration',
[
'label' => __('Scroll Duration', 'essential-addons-elementor'),
'type' => Controls_Manager::SLIDER,
'size_units' => ['px'],
'range' => [
'px' => [
'min' => 100,
'max' => 10000,
'step' => 100,
],
],
'default' => [
'unit' => 'px',
'size' => 1000,
],
'selectors' => [
'{{WRAPPER}} .eael-image-scroller.eael-image-scroller-hover img' => 'transition-duration: {{SIZE}}ms;',
],
'condition' => [
'eael_image_scroller_auto_scroll' => 'yes',
],
'separator' => 'before',
]
);
$this->end_controls_section();
}
protected function render()
{
$settings = $this->get_settings_for_display();
$wrap_classes = ['eael-image-scroller', 'eael-image-scroller-' . $settings['eael_image_scroller_direction']];
if ($settings['eael_image_scroller_auto_scroll'] === 'yes') {
$wrap_classes[] = 'eael-image-scroller-hover';
}
echo '';
}
}