File "slider-widget.php"
Full Path: /home/stylijtl/public_html/wp-content/plugins/acens-elementor/widgets/home-slider/slider-widget.php
File size: 9.47 KB
MIME-type: text/x-php
Charset: utf-8
<?php
namespace BdevsElementor\Widget;
use Elementor\Controls_Manager;
use Elementor\Group_Control_Typography;
use Elementor\Scheme_Typography;
use Elementor\Group_Control_Border;
use Elementor\Group_Control_Box_Shadow;
/**
* Bdevs Elementor Widget.
*
* Elementor widget that inserts an embbedable content into the page, from any given URL.
*
* @since 1.0.0
*/
class BdevsSlider extends \Elementor\Widget_Base {
/**
* Get widget name.
*
* Retrieve Bdevs Elementor widget name.
*
* @since 1.0.0
* @access public
*
* @return string Widget name.
*/
public function get_name() {
return 'bdevs-slider';
}
/**
* Get widget title.
*
* Retrieve Bdevs Elementor widget title.
*
* @since 1.0.0
* @access public
*
* @return string Widget title.
*/
public function get_title() {
return __( 'Slider ', 'bdevs-elementor' );
}
/**
* Get widget icon.
*
* Retrieve Bdevs Slider widget icon.
*
* @since 1.0.0
* @access public
*
* @return string Widget icon.
*/
public function get_icon() {
return 'eicon-slideshow';
}
/**
* Get widget categories.
*
* Retrieve the list of categories the Bdevs Slider widget belongs to.
*
* @since 1.0.0
* @access public
*
* @return array Widget categories.
*/
public function get_categories() {
return [ 'home-slider-elementor' ];
}
public function get_keywords() {
return [ 'slides', 'carousel' ];
}
public function get_script_depends() {
return [ 'bdevs-elementor'];
}
// BDT Position
protected function element_pack_position() {
$position_options = [
'' => esc_html__('Default', 'bdevs-elementor'),
'top-left' => esc_html__('Top Left', 'bdevs-elementor') ,
'top-center' => esc_html__('Top Center', 'bdevs-elementor') ,
'top-right' => esc_html__('Top Right', 'bdevs-elementor') ,
'center' => esc_html__('Center', 'bdevs-elementor') ,
'center-left' => esc_html__('Center Left', 'bdevs-elementor') ,
'center-right' => esc_html__('Center Right', 'bdevs-elementor') ,
'bottom-left' => esc_html__('Bottom Left', 'bdevs-elementor') ,
'bottom-center' => esc_html__('Bottom Center', 'bdevs-elementor') ,
'bottom-right' => esc_html__('Bottom Right', 'bdevs-elementor') ,
];
return $position_options;
}
protected function _register_controls() {
$this->start_controls_section(
'section_content_sliders_image',
[
'label' => esc_html__( 'Sliders Image', 'bdevs-elementor' ),
]
);
$this->add_control(
'tabs',
[
'label' => esc_html__( 'Slider Items', 'bdevs-elementor' ),
'type' => Controls_Manager::REPEATER,
'default' => [
[
'tab_title' => esc_html__( 'Slider #1', 'bdevs-elementor' ),
'tab_content' => esc_html__( 'I am item content. Click edit button to change this text.', 'bdevs-elementor' ),
]
],
'fields' => [
[
'name' => 'image',
'label' => esc_html__( 'Background Image ', 'bdevs-elementor' ),
'type' => Controls_Manager::MEDIA,
'dynamic' => [ 'active' => true ],
'default' => esc_html__( '' , 'bdevs-elementor' ),
],
[
'name' => 'title',
'label' => esc_html__( 'Title', 'bdevs-elementor' ),
'type' => Controls_Manager::TEXT,
'dynamic' => [ 'active' => true ],
'default' => esc_html__( 'Emily Brown' , 'bdevs-elementor' ),
'label_block' => true,
],
[
'name' => 'subtitle',
'label' => esc_html__( 'Subtitle', 'bdevs-elementor' ),
'type' => Controls_Manager::TEXT,
'dynamic' => [ 'active' => true ],
'default' => esc_html__( 'HLL Company' , 'bdevs-elementor' ),
'label_block' => true,
],
[
'name' => 'button',
'label' => esc_html__( ' Button ', 'bdevs-elementor' ),
'type' => Controls_Manager::TEXT,
'dynamic' => [ 'active' => true ],
'default' => esc_html__( 'Getting Started' , 'bdevs-elementor' ),
'label_block' => true,
],
[
'name' => 'link_button',
'label' => esc_html__( ' Link Button', 'bdevs-elementor' ),
'type' => Controls_Manager::TEXTAREA,
'dynamic' => [ 'active' => true ],
'default' => esc_html__( '#' , 'bdevs-elementor' ),
'label_block' => true,
],
],
]
);
$this->end_controls_section();
$this->start_controls_section(
'section_content_layout',
[
'label' => esc_html__( 'Layout', 'bdevs-elementor' ),
]
);
$this->add_responsive_control(
'align',
[
'label' => esc_html__( 'Alignment', 'bdevs-elementor' ),
'type' => Controls_Manager::CHOOSE,
'options' => [
'left' => [
'title' => esc_html__( 'Left', 'bdevs-elementor' ),
'icon' => 'fa fa-align-left',
],
'center' => [
'title' => esc_html__( 'Center', 'bdevs-elementor' ),
'icon' => 'fa fa-align-center',
],
'right' => [
'title' => esc_html__( 'Right', 'bdevs-elementor' ),
'icon' => 'fa fa-align-right',
],
'justify' => [
'title' => esc_html__( 'Justified', 'bdevs-elementor' ),
'icon' => 'fa fa-align-justify',
],
],
'prefix_class' => 'elementor%s-align-',
'description' => 'Use align to match position',
'default' => 'left',
]
);
$this->end_controls_section();
}
public function render() {
$settings = $this->get_settings_for_display();
extract($settings);
?>
<header class="header slider-fade">
<div class="owl-carousel owl-theme">
<!-- The opacity on the image is made with "data-overlay-dark="number". You can change it using the numbers 0-9. -->
<?php
$idd = 0;
foreach ( $settings['tabs'] as $item ) :
$idd++;
?>
<div class="item bg-img" data-overlay-dark="7" data-background="<?php print esc_url($item['image']['url']); ?>">
<div class="v-middle caption">
<div class="container">
<?php if( $idd%3 == 1 ){ ?>
<div class="row justify-content-center">
<div class="col-md-12 text-center mt-60">
<?php } elseif($idd%3 == 2 ){?>
<div class="row">
<div class="col-md-12 mt-60">
<?php } else { ?>
<div class="row justify-content-end">
<div class="col-md-12 text-end mt-60">
<?php } ?>
<?php if ( '' !== $item['title'] ) : ?>
<h1><?php echo wp_kses_post($item['title']); ?></h1>
<?php endif; ?>
<?php if ( '' !== $item['subtitle'] ) : ?>
<p><?php echo wp_kses_post($item['subtitle']); ?></p>
<?php endif; ?>
<?php if ( '' !== $item['button'] ) : ?>
<a href="<?php echo wp_kses_post($item['link_button']); ?>" class="btn-1 mt-15"> <?php echo wp_kses_post($item['button']); ?></a>
<?php endif; ?>
</div>
</div>
</div>
</div>
</div>
<?php endforeach; ?>
</div>
</header>
<!-- divider line -->
<div class="line-vr-section"></div>
<?php if (is_admin()) { ?>
<script type="text/javascript">
var pageSection = $(".bg-img, section");
pageSection.each(function (indx) {
if ($(this).attr("data-background")) {
$(this).css("background-image", "url(" + $(this).data("background") + ")");
}
});
var owl = $('.header .owl-carousel');
$('.slider-fade .owl-carousel').owlCarousel({
items: 1,
loop: true,
dots: true,
margin: 0,
mouseDrag: true,
autoplay: true,
autoplayTimeout: 5000,
animateOut: 'fadeOut',
autoplayHoverPause: true,
nav: true,
navText: ['<i class="fa-solid fa-angle-left"></i>', '<i class="fa-solid fa-angle-right"></i>'],
responsiveClass: true,
responsive: {
0: {
nav: false
},
600: {
nav: false
},
1000: {
nav: true
}
}
});
owl.on('changed.owl.carousel', function (event) {
var item = event.item.index - 2; // Position of the current item
$('h6').removeClass('animated fadeInUp');
$('h1').removeClass('animated fadeInUp');
$('p').removeClass('animated fadeInUp');
$('.btn-1').removeClass('animated fadeInUp');
$('.btn-2').removeClass('animated fadeInUp');
$('.owl-item').not('.cloned').eq(item).find('h6').addClass('animated fadeInUp');
$('.owl-item').not('.cloned').eq(item).find('h1').addClass('animated fadeInUp');
$('.owl-item').not('.cloned').eq(item).find('p').addClass('animated fadeInUp');
$('.owl-item').not('.cloned').eq(item).find('.btn-1').addClass('animated fadeInUp');
$('.owl-item').not('.cloned').eq(item).find('.btn-2').addClass('animated fadeInUp');
});
</script>
<?php } ?>
<?php
}
}