<?php
if (!defined('ABSPATH')) {
exit;
}
class Elementor_Slider_Custom_Widget extends \Elementor\Widget_Base
{
public function get_name()
{
return 'custom_slider';
}
public function get_title()
{
return esc_html__('Custom Slider', 'elementor-list-widget');
}
public function get_icon()
{
return 'eicon-slides';
}
public function get_categories()
{
return ['custom'];
}
public function get_keywords()
{
return ['list', 'slider', 'custom', 'smo'];
}
protected function register_controls()
{
//content
$this->start_controls_section(
'section_content',
[
'label' => esc_html__('Content', 'textdomain'),
'tab' => \Elementor\Controls_Manager::TAB_CONTENT,
]
);
$this->add_control(
'title_main',
[
'label' => esc_html__('Title', 'textdomain'),
'type' => \Elementor\Controls_Manager::TEXT,
'default' => 'text',
]
);
$this->add_control(
'slider_list',
[
'label' => esc_html__('List Item', 'textdomain'),
'type' => \Elementor\Controls_Manager::REPEATER,
'fields' => [
[
'name' => 'image',
'label' => esc_html__('Image', 'textdomain'),
'type' => \Elementor\Controls_Manager::MEDIA,
'media_types' => ['image', 'video'],
'default' => [
'url' => \Elementor\Utils::get_placeholder_image_src(),
],
],
[
'name' => 'sub_title',
'label' => esc_html__('Top Title', 'textdomain'),
'type' => \Elementor\Controls_Manager::TEXTAREA,
'rows' => 5,
'default' => '',
],
[
'name' => 'sub_title_color',
'label' => esc_html__('Top Title Color', 'textdomain'),
'type' => \Elementor\Controls_Manager::COLOR,
'default' => '#FFFFFF',
],
[
'name' => 'title',
'label' => esc_html__('Title', 'textdomain'),
'type' => \Elementor\Controls_Manager::TEXTAREA,
'rows' => 5,
'default' => '',
],
[
'name' => 'title_color',
'label' => esc_html__('Title Color', 'textdomain'),
'type' => \Elementor\Controls_Manager::COLOR,
'default' => '#FFFFFF',
],
[
'name' => 'link',
'label' => esc_html__('Link', 'textdomain'),
'type' => \Elementor\Controls_Manager::URL,
'options' => ['url', 'is_external', 'nofollow'],
'default' => [
'url' => '',
'is_external' => false,
'nofollow' => false,
'custom_attributes' => '',
],
'label_block' => true,
],
],
'title_field' => '{{{ sub_title }}}',
]
);
$this->end_controls_section();
// Setting silder PC
$this->start_controls_section(
'section_slider',
[
'label' => esc_html__('Slider PC (>1024px) ', 'textdomain'),
'tab' => \Elementor\Controls_Manager::TAB_CONTENT,
]
);
$this->add_control(
'box_height',
[
'label' => esc_html__('Height', 'textdomain'),
'type' => \Elementor\Controls_Manager::NUMBER,
'min' => 1,
'max' => 10000,
'step' => 1,
'default' => 471,
]
);
$this->add_control(
'box_width',
[
'label' => esc_html__('Width', 'textdomain'),
'type' => \Elementor\Controls_Manager::NUMBER,
'min' => 1,
'max' => 10000,
'step' => 1,
'default' => 353,
]
);
$this->add_control(
'display_team',
[
'label' => esc_html__('Display', 'textdomain'),
'type' => \Elementor\Controls_Manager::TEXT,
'default' => '3.5',
]
);
$this->add_control(
'space_between',
[
'label' => esc_html__('Space Between', 'textdomain'),
'type' => \Elementor\Controls_Manager::NUMBER,
'min' => 1,
'max' => 100,
'step' => 1,
'default' => 14,
]
);
$this->add_control(
'loop',
[
'label' => esc_html__('Loop', 'textdomain'),
'type' => \Elementor\Controls_Manager::SWITCHER,
'label_on' => esc_html__('Yes', 'textdomain'),
'label_off' => esc_html__('No', 'textdomain'),
'return_value' => 'yes',
'default' => '',
]
);
$this->add_control(
'pagination',
[
'label' => esc_html__('Pagination', 'textdomain'),
'type' => \Elementor\Controls_Manager::SWITCHER,
'label_on' => esc_html__('Yes', 'textdomain'),
'label_off' => esc_html__('No', 'textdomain'),
'return_value' => 'no',
'default' => '',
]
);
$this->add_control(
'navigation',
[
'label' => esc_html__('Navigation', 'textdomain'),
'type' => \Elementor\Controls_Manager::SWITCHER,
'label_on' => esc_html__('Yes', 'textdomain'),
'label_off' => esc_html__('No', 'textdomain'),
'return_value' => 'yes',
'default' => '',
]
);
$this->end_controls_section();
// Setting silder tablet
$this->start_controls_section(
'section_slider_tl',
[
'label' => esc_html__('Slider Tablet (768px - 1024px)', 'textdomain'),
'tab' => \Elementor\Controls_Manager::TAB_CONTENT,
]
);
$this->add_control(
'box_height_tl',
[
'label' => esc_html__('Height', 'textdomain'),
'type' => \Elementor\Controls_Manager::NUMBER,
'min' => 1,
'max' => 10000,
'step' => 1,
'default' => '425',
]
);
$this->add_control(
'box_width_tl',
[
'label' => esc_html__('Width', 'textdomain'),
'type' => \Elementor\Controls_Manager::NUMBER,
'min' => 1,
'max' => 10000,
'step' => 1,
'default' => '318',
]
);
$this->add_control(
'display_team_tl',
[
'label' => esc_html__('Display', 'textdomain'),
'type' => \Elementor\Controls_Manager::TEXT,
'default' => '3.2',
]
);
$this->add_control(
'space_between_tl',
[
'label' => esc_html__('Space Between', 'textdomain'),
'type' => \Elementor\Controls_Manager::NUMBER,
'min' => 1,
'max' => 100,
'step' => 1,
'default' => 14,
]
);
$this->end_controls_section();
//Setting silder MB
$this->start_controls_section(
'section_slider_mb',
[
'label' => esc_html__('Slider Mobile (< 768px)', 'textdomain'),
'tab' => \Elementor\Controls_Manager::TAB_CONTENT,
]
);
$this->add_control(
'box_height_mb',
[
'label' => esc_html__('Height', 'textdomain'),
'type' => \Elementor\Controls_Manager::NUMBER,
'min' => 1,
'max' => 10000,
'step' => 1,
'default' => '320',
]
);
$this->add_control(
'box_width_mb',
[
'label' => esc_html__('Width', 'textdomain'),
'type' => \Elementor\Controls_Manager::NUMBER,
'min' => 1,
'max' => 10000,
'step' => 1,
'default' => '240',
]
);
$this->add_control(
'display_team_mb',
[
'label' => esc_html__('Display', 'textdomain'),
'type' => \Elementor\Controls_Manager::TEXT,
'default' => '1.5',
]
);
$this->add_control(
'space_between_mb',
[
'label' => esc_html__('Space Between', 'textdomain'),
'type' => \Elementor\Controls_Manager::NUMBER,
'min' => 1,
'max' => 100,
'step' => 1,
'default' => 14,
]
);
$this->end_controls_section();
// Style
$this->start_controls_section(
'style_name',
[
'label' => esc_html__( 'Style Title', 'textdomain' ),
'tab' => \Elementor\Controls_Manager::TAB_STYLE,
]
);
$this->add_group_control(
\Elementor\Group_Control_Typography::get_type(),
[
'name' => 'title_typography',
'selector' => '{{WRAPPER}} .slider-title',
]
);
$this->end_controls_section();
$this->start_controls_section(
'style_slider_title',
[
'label' => esc_html__( 'Style Slider', 'textdomain' ),
'tab' => \Elementor\Controls_Manager::TAB_STYLE,
]
);
$this->add_group_control(
\Elementor\Group_Control_Typography::get_type(),
[
'name' => 'slider_title_typography',
'selector' => '{{WRAPPER}} .title',
]
);
$this->end_controls_section();
$this->start_controls_section(
'style_slider_subtitle',
[
'label' => esc_html__( 'Style Slider Subtitle', 'textdomain' ),
'tab' => \Elementor\Controls_Manager::TAB_STYLE,
]
);
$this->add_group_control(
\Elementor\Group_Control_Typography::get_type(),
[
'name' => 'slider_subtitle_typography',
'selector' => '{{WRAPPER}} .sub-title',
]
);
$this->end_controls_section();
}
protected function render()
{
$settings = $this->get_settings_for_display();
$title_main = $settings['title_main'];
$slider_list = $settings['slider_list'];
$box_height = $settings['box_height'];
$box_width = $settings['box_width'];
$display_team = $settings['display_team'];
$loop = $settings['loop'] === 'yes' ? 'true' : 'false';
$navigation = $settings['navigation'];
$pagination = $settings['pagination'];
$space_between = $settings['space_between'];
$box_height_mb = $settings['box_height_mb'];
$box_width_mb = $settings['box_width_mb'];
$display_team_mb = $settings['display_team_mb'];
$space_between_mb = $settings['space_between_mb'];
$box_height_tl = $settings['box_height_tl'];
$box_width_tl = $settings['box_width_tl'];
$display_team_tl = $settings['display_team_tl'];
$space_between_tl = $settings['space_between_tl'];
// Generate a random string
$unique_id = uniqid();
$class_unique = 'slider-item'.$unique_id;
ob_start();
?>
<!-- PC -->
<div class="smo-slider-section">
<div class="smo-title-container">
<div class="smo-title-box">
<?php if(!empty($title_main)): ?>
<h2 class="slider-title"><?php echo $title_main?></h2>
<?php endif; ?>
<?php if($navigation == "yes"):?>
<div class="slider-navigation">
<div class="navigation-next navigation-next-<?php echo $unique_id; ?>">
<svg width="40" height="41" viewBox="0 0 40 41" fill="none" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" clip-rule="evenodd" d="M16.2929 27.2572C15.9024 26.8666 15.9024 26.2335 16.2929 25.8429L21.5858 20.55L16.2929 15.2571C15.9024 14.8666 15.9024 14.2334 16.2929 13.8429C16.6834 13.4524 17.3166 13.4524 17.7071 13.8429L23.7071 19.8429C23.8946 20.0305 24 20.2848 24 20.55C24 20.8152 23.8946 21.0696 23.7071 21.2571L17.7071 27.2572C17.3166 27.6477 16.6834 27.6477 16.2929 27.2572Z" fill="#080808" fill-opacity="0.8"/>
</svg>
</div>
<div class="navigation-prev navigation-prev-<?php echo $unique_id; ?>">
<svg width="40" height="41" viewBox="0 0 40 41" fill="none" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" clip-rule="evenodd" d="M23.7071 13.8429C24.0976 14.2335 24.0976 14.8666 23.7071 15.2572L18.4142 20.5501L23.7071 25.8429C24.0976 26.2334 24.0976 26.8666 23.7071 27.2571C23.3166 27.6476 22.6834 27.6476 22.2929 27.2571L16.2929 21.2572C16.1054 21.0696 16 20.8153 16 20.5501C16 20.2848 16.1054 20.0305 16.2929 19.843L22.2929 13.8429C22.6834 13.4524 23.3166 13.4524 23.7071 13.8429Z" fill="#080808" fill-opacity="0.8"/>
</svg>
</div>
</div>
<?php endif; ?>
</div>
</div>
<div class="smo-slider-container">
<div class="smo-slider smo-slider-<?php echo $unique_id; ?> swiper">
<div class="swiper-wrapper">
<?php foreach ($slider_list as $key => $team):
$image = $team['image']['url'];
$title = $team['title'];
$title_color = $team['title_color'];
$sub_title = $team['sub_title'];
$sub_title_color = $team['sub_title_color'];
$link = $team['link'];
$tags = !empty($link['url'])?'a':'div';
$href = !empty($link['url'])?'href="'.$link['url'].'"':'';
$target = !empty($link['url']) && $link['is_external'] ? 'target="_blank"' : '';
$nofollow = !empty($link['url']) && $link['nofollow'] ? 'rel="nofollow"' : '';
$is_video = preg_match('/\.(mp4|webm|ogg)$/i', $image);
?>
<div class="swiper-slide slider-item <?php echo $class_unique ?>">
<<?php echo $tags ?> class="item-box" style="background: url(<?php echo (!$is_video)?esc_url($image):'' ?>) center/cover no-repeat;" <?php echo $href ?> <?php echo $target ?> <?php echo $nofollow ?>>
<?php if ($is_video): ?>
<video class="background-media" autoplay loop muted playsinline>
<source src="<?php echo esc_url($image) ?>" type="video/mp4">
</video>
<?php endif; ?>
<div class="slider-infor">
<?php if(!empty($sub_title)): ?>
<p class="sub-title" style="color: <?php echo $sub_title_color ?>">
<?php echo $sub_title ?>
</p>
<?php endif; ?>
<?php if(!empty($title)): ?>
<h3 class="title" style="color: <?php echo $title_color ?>">
<?php echo $title ?>
</h3>
<?php endif; ?>
</div>
</<?php echo $tags ?>>
</div>
<?php endforeach; ?>
</div>
<?php if($pagination == "yes"):?>
<div class="swiper-pagination slider-pagination"></div>
<?php endif; ?>
</div>
</div>
</div>
<style>
.smo-slider-section <?php echo '.'.$class_unique ?>{
aspect-ratio: <?php echo $box_width?>/<?php echo $box_height?>;
max-width: <?php echo $box_width?>px;
}
@media(max-width: 1024px){
.smo-slider-section <?php echo '.'.$class_unique ?>{
aspect-ratio: <?php echo $box_width_tl?>/<?php echo $box_height_tl?>;
max-width: <?php echo $box_width_tl?>px;
}
}
@media(max-width: 767px){
.smo-slider-section <?php echo '.'.$class_unique ?>{
aspect-ratio: <?php echo $box_width_mb?>/<?php echo $box_height_mb?>;
max-width: <?php echo $box_width_mb?>px;
}
}
</style>
<script>
(function ($) {
$(document).ready(function () {
var swiper = new Swiper(".smo-slider-<?php echo $unique_id; ?>", {
slidesPerView: <?php echo $display_team; ?>,
spaceBetween: <?php echo $space_between; ?>,
loop: <?php echo $loop; ?>,
centeredSlides: false,
speed: 600,
breakpoints: {
0: {
slidesPerView: <?php echo $display_team_mb; ?>,
spaceBetween: <?php echo $space_between_mb; ?>,
},
768: {
slidesPerView: <?php echo $display_team_tl; ?>,
spaceBetween: <?php echo $space_between_tl; ?>,
},
1025: {
slidesPerView: <?php echo $display_team; ?>,
spaceBetween: <?php echo $space_between; ?>,
}
},
pagination: {
el: ".slider-pagination",
},
navigation: {
nextEl: ".navigation-next-<?php echo $unique_id; ?>",
prevEl: ".navigation-prev-<?php echo $unique_id; ?>",
},
// direction: 'horizontal',
// mousewheel: true,
// effect: 'slide'
});
});
})(jQuery)
</script>
<?php
echo ob_get_clean();
}
}