Skip to content

Instantly share code, notes, and snippets.

@f4h3m

f4h3m/custom-js

Last active May 30, 2019 10:15
Show Gist options
  • Save f4h3m/15c01e0df1992b9d1465926a9cb2c7cd to your computer and use it in GitHub Desktop.
Save f4h3m/15c01e0df1992b9d1465926a9cb2c7cd to your computer and use it in GitHub Desktop.
Download ZIP
Raw
custom-js
jQuery(document).ready(function () {
var slide_show = $('.center-slider-carusel').attr('slide_show');
slide_show = parseInt(slide_show, 10);
jQuery(".center-slider-carusel").slick({
slidesToShow: slide_show,
slidesToScroll: 1,
dots: true,
infinite: true,
centerMode: true,
autoplaySpeed: 6000,
arrows: false,
responsive: [
{
breakpoint: 768,
settings: {
slidesToShow: 3,
slidesToScroll: 1
}
},
{
breakpoint: 568,
settings: {
slidesToShow: 1,
slidesToScroll: 1
}
}
]
});
});
Raw
custom-widget
<?php
namespace DopeCore\Widgets;
use Elementor\Widget_Base;
use Elementor\Controls_Manager;
if ( ! defined( 'ABSPATH' ) ) exit; // Exit if accessed directly
/**
* @since 1.1.0
*/
class Center_Mode_Carousel extends Widget_Base {
public function get_name() {
return 'Center Mode Carousel';
}
/**
* Get widget title.
*a
* Retrieve oEmbed widget title.
*
* @since 1.0.0
* @access public
*
* @return string Widget title.
*/
public function get_title() {
return __( 'Center Mode Carousel', 'dope-core' );
}
/**
* Get widget icon.
*
* Retrieve oEmbed widget icon.
*
* @since 1.0.0
* @access public
*
* @return string Widget icon.
*/
public function get_icon() {
return 'eicon-slider-album';
}
/**
* Get widget categories.
*
* Retrieve the list of categories the oEmbed widget belongs to.
*
* @since 1.0.0
* @access public
*
* @return array Widget categories.
*/
public function get_categories() {
return [ 'dope-elements' ];
}
public function get_script_depends() {
return ['jquery-slick'];
}
/**
* Register oEmbed widget controls.
*
* Adds different input fields to allow the user to change and customize the widget settings.
*
* @since 1.0.0
* @access protected
*/
protected function _register_controls() {
$this->start_controls_section(
'content_section',
[
'label' => __( 'Center Mode Carousel', 'dope-core' )
]
);
$this->add_control(
'gallery',
[
'label' => __( 'Add Images', 'dope-core' ),
'type' => Controls_Manager::GALLERY,
'default' => [],
]
);
$this->end_controls_section();
$this->start_controls_section(
'style_section',
[
'label' => __( 'Center Mode Carousel Settings', 'dope-core' )
]
);
$this->add_control(
'autoplay',
[
'label' => __( 'Autoplay', 'dope-core' ),
'type' => Controls_Manager::SWITCHER,
'label_on' => __( 'On', 'dope-core' ),
'label_off' => __( 'Off', 'dope-core' ),
'return_value' => 'true',
'default' => 'true',
]
);
$this->add_control(
'slide_show',
[
'label' => __( 'Slide To Show', 'dope-core' ),
'type' => Controls_Manager::NUMBER,
'min' => 1,
'max' => 30,
'step' => 1,
'default' => 5
]
);
$this->add_control(
'slide_scroll',
[
'label' => __( 'Slide To Scroll', 'dope-core' ),
'type' => Controls_Manager::NUMBER,
'min' => 1,
'max' => 30,
'step' => 1,
'default' => 1
]
);
$this->end_controls_section();
}
/**
* Render oEmbed widget output on the frontend.
*
* Written in PHP and used to generate the final HTML.
*
* @since 1.0.0
* @access protected
*/
protected function render()
{
$settings = $this->get_settings_for_display();
$this->add_render_attribute(
'center-mode-carousel',
[
'class' => [ 'center-slider-carusel'],
'slide_show' => $settings['slide_show'],
'slide_scroll' => $settings['slide_scroll'],
'autoplay' => $settings['autoplay'],
]
);
?>
<div <?php echo $this->get_render_attribute_string( 'center-mode-carousel' ); ?> >
<?php foreach ($settings['gallery'] as $item):?>
<div class="single-slider"><img src="<?php echo($item['url']); ?>"></div>
<?php
endforeach; ?>
</div>
<?php }
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment