premium-carousel.php — Premium Addons for Elementor – Powerful Elementor Templates & Widgets 2.5.6

premium-addons-for-elementor / widgets / premium-carousel.php

premium-addons-for-elementor / widgets Last commit date

premium-carousel.php

966 lines

1	<?php
2	namespace Elementor;
3	if( !defined( 'ABSPATH' ) ) exit; // No access of directly access
4
5	class Premium_Carousel_Widget extends Widget_Base {
6
7	protected $templateInstance;
8
9	public function getTemplateInstance() {
10	return $this->templateInstance = premium_Template_Tags::getInstance();
11	}
12
13	public function get_name() {
14	return 'premium-carousel-widget';
15	}
16
17	public function get_title() {
18	return \PremiumAddons\Helper_Functions::get_prefix() . ' Carousel';
19	}
20
21	public function get_icon() {
22	return 'pa-carousel';
23	}
24
25	public function is_reload_preview_required()
26	{
27	return true;
28	}
29
30	public function get_script_depends() {
31	return ['premium-addons-js','slick-carousel-js'];
32	}
33
34	public function get_categories() {
35	return [ 'premium-elements' ];
36	}
37
38
39	// Adding the controls fields for the premium carousel
40	// This will controls the animation, colors and background, dimensions etc
41	protected function _register_controls() {
42	$this->start_controls_section(
43	'premium_carousel_global_settings',
44	[
45	'label' => esc_html__( 'Carousel' , 'premium-addons-for-elementor' )
46	]
47	);
48
49	$this->add_control(
50	'premium_carousel_slider_content',
51	[
52	'label' => esc_html__( 'Content', 'premium-addons-for-elementor' ),
53	'description' => esc_html__( 'Slider content is a template which you can choose from Elementor library. Each template will be a slider content', 'premium-addons-for-elementor' ),
54	'type' => Controls_Manager::SELECT2,
55	'options' => $this->getTemplateInstance()->get_elementor_page_list(),
56	'multiple' => true,
57	]
58	);
59
60
61	$this->add_control(
62	'premium_carousel_slider_type',
63	[
64	'label' => esc_html__( 'Type', 'premium-addons-for-elementor' ),
65	'description' => esc_html__( 'Set a navigation type', 'premium-addons-for-elementor' ),
66	'type' => Controls_Manager::SELECT,
67	'default' => 'horizontal',
68	'options' => [
69	'horizontal' => esc_html__( 'Horizontal', 'premium-addons-for-elementor' ),
70	'vertical' => esc_html__( 'Vertical', 'premium-addons-for-elementor' )
71	]
72	]
73	);
74
75	$this->add_control(
76	'premium_carousel_slides_to_show',
77	[
78	'label' => esc_html__( 'Appearance', 'premium-addons-for-elementor' ),
79	'type' => Controls_Manager::SELECT,
80	'default' => 'all',
81	'options' => [
82	'all' => esc_html__( 'All visible', 'premium-addons-for-elementor' ),
83	'single' => esc_html__( 'One at a time', 'premium-addons-for-elementor' )
84	]
85	]
86	);
87
88	$this->add_control(
89	'premium_carousel_responsive_desktop',
90	[
91	'label' => esc_html__( 'Desktop Slides', 'premium-addons-for-elementor' ),
92	'type' => Controls_Manager::NUMBER,
93	'default' => 5
94	]
95	);
96
97	$this->add_control(
98	'premium_carousel_responsive_tabs',
99	[
100	'label' => esc_html__( 'Tabs Slides', 'premium-addons-for-elementor' ),
101	'type' => Controls_Manager::NUMBER,
102	'default' => 3
103	]
104	);
105
106	$this->add_control(
107	'premium_carousel_responsive_mobile',
108	[
109	'label' => esc_html__( 'Mobile Slides', 'premium-addons-for-elementor' ),
110	'type' => Controls_Manager::NUMBER,
111	'default' => 2
112	]
113	);
114
115	$this->end_controls_section();
116
117	$this->start_controls_section(
118	'premium_carousel_slides_settings',
119	[
120	'label' => esc_html__( 'Slides\' Settings' , 'premium-addons-for-elementor' )
121	]
122	);
123
124	$this->add_control(
125	'premium_carousel_loop',
126	[
127	'label' => esc_html__( 'Infinite Loop', 'premium-addons-for-elementor' ),
128	'type' => Controls_Manager::SWITCHER,
129	'description' => esc_html__( 'Restart the slider automatically as it passes the last slide', 'premium-addons-for-elementor' ),
130	'default' => 'yes'
131	]
132	);
133
134	$this->add_control(
135	'premium_carousel_speed',
136	[
137	'label' => esc_html__( 'Transition Speed', 'premium-addons-for-elementor' ),
138	'description' => esc_html__( 'Set a navigation speed value. The value will be counted in milliseconds (ms)', 'premium-addons-for-elementor' ),
139	'type' => Controls_Manager::NUMBER,
140	'default' => 300
141	]
142	);
143
144	$this->add_control(
145	'premium_carousel_autoplay',
146	[
147	'label' => esc_html__( 'Autoplay Slides‏', 'premium-addons-for-elementor' ),
148	'description' => esc_html__( 'Slide will start automatically', 'premium-addons-for-elementor' ),
149	'type' => Controls_Manager::SWITCHER,
150	'default' => 'yes'
151	]
152	);
153
154	$this->add_control(
155	'premium_carousel_autoplay_speed',
156	[
157	'label' => esc_html__( 'Autoplay Speed', 'premium-addons-for-elementor' ),
158	'description' => esc_html__( 'Autoplay Speed means at which time the next slide should come. Set a value in milliseconds (ms)', 'premium-addons-for-elementor' ),
159	'type' => Controls_Manager::NUMBER,
160	'default' => 5000,
161	'condition' => [
162	'premium_carousel_autoplay' => 'yes'
163	],
164	'separator' => 'after'
165	]
166	);
167
168	$this->add_control('premium_carousel_animation_list',
169	[
170	'label' => esc_html__('Animations', 'premium-addons-for-elementor'),
171	'type' => Controls_Manager::ANIMATION,
172	]
173	);
174
175	$this->add_control(
176	'premium_carousel_extra_class',
177	[
178	'label' => esc_html__( 'Extra Class', 'premium-addons-for-elementor' ),
179	'type' => Controls_Manager::TEXT,
180	'description' => esc_html__( 'Add extra class name that will be applied to the carousel, and you can use this class for your customizations.', 'premium-addons-for-elementor' ),
181	]
182	);
183
184	$this->end_controls_section();
185
186	$this->start_controls_section(
187	'premium_carousel_navigation',
188	[
189	'label' => esc_html__( 'Navigation', 'premium-addons-for-elementor' ),
190	'tab' => Controls_Manager::TAB_STYLE
191	]
192	);
193
194	$this->add_control('premium_carousel_arrow_heading',
195	[
196	'label' => esc_html__('Arrows','premium-addons-for-elementor'),
197	'type' => Controls_manager::HEADING,
198	]);
199
200	$this->add_control(
201	'premium_carousel_navigation_show',
202	[
203	'label' => esc_html__( 'Arrows', 'premium-addons-for-elementor' ),
204	'description' => esc_html__( 'Enable or disable navigation arrows', 'premium-addons-for-elementor' ),
205	'type' => Controls_Manager::SWITCHER,
206	'default' => 'yes'
207	]
208	);
209
210	$this->add_control(
211	'premium_carousel_arrow_icon_next',
212	[
213	'label' => esc_html__( 'Right Icon', 'premium-addons-for-elementor' ),
214	'type' => Controls_Manager::CHOOSE,
215	'options' => [
216	'right_arrow_bold' => [
217	'icon' => 'fa fa-arrow-right',
218	],
219	'right_arrow_long' => [
220	'icon' => 'fa fa-long-arrow-right',
221	],
222	'right_arrow_long_circle' => [
223	'icon' => 'fa fa-arrow-circle-right',
224	],
225	'right_arrow_angle' => [
226	'icon' => 'fa fa-angle-right',
227	],
228	'right_arrow_chevron' => [
229	'icon' => 'fa fa-chevron-right',
230	]
231	],
232	'default' => 'right_arrow_angle',
233	'condition' => [
234	'premium_carousel_navigation_show' => 'yes',
235	'premium_carousel_slider_type!' => 'vertical'
236	]
237	]
238	);
239
240	// If the carousel type vertical
241	$this->add_control(
242	'premium_carousel_arrow_icon_next_ver',
243	[
244	'label' => esc_html__( 'Bottom Icon', 'premium-addons-for-elementor' ),
245	'type' => Controls_Manager::CHOOSE,
246	'options' => [
247	'right_arrow_bold' => [
248	'icon' => 'fa fa-arrow-down',
249	],
250	'right_arrow_long' => [
251	'icon' => 'fa fa-long-arrow-down',
252	],
253	'right_arrow_long_circle' => [
254	'icon' => 'fa fa-arrow-circle-down',
255	],
256	'right_arrow_angle' => [
257	'icon' => 'fa fa-angle-down',
258	],
259	'right_arrow_chevron' => [
260	'icon' => 'fa fa-chevron-down',
261	]
262	],
263	'default' => 'right_arrow_angle',
264	'condition' => [
265	'premium_carousel_navigation_show' => 'yes',
266	'premium_carousel_slider_type' => 'vertical',
267	]
268	]
269	);
270
271	// If carousel slider is vertical type
272	$this->add_control(
273	'premium_carousel_arrow_icon_prev_ver',
274	[
275	'label' => esc_html__( 'Top Icon', 'premium-addons-for-elementor' ),
276	'type' => Controls_Manager::CHOOSE,
277	'options' => [
278	'left_arrow_bold' => [
279	'icon' => 'fa fa-arrow-up',
280	],
281	'left_arrow_long' => [
282	'icon' => 'fa fa-long-arrow-up',
283	],
284	'left_arrow_long_circle' => [
285	'icon' => 'fa fa-arrow-circle-up',
286	],
287	'left_arrow_angle' => [
288	'icon' => 'fa fa-angle-up',
289	],
290	'left_arrow_chevron' => [
291	'icon' => 'fa fa-chevron-up',
292	]
293	],
294	'default' => 'left_arrow_angle',
295	'condition' => [
296	'premium_carousel_navigation_show' => 'yes',
297	'premium_carousel_slider_type' => 'vertical',
298	]
299	]
300	);
301
302	$this->add_control(
303	'premium_carousel_arrow_icon_prev',
304	[
305	'label' => esc_html__( 'Left Icon', 'premium-addons-for-elementor' ),
306	'type' => Controls_Manager::CHOOSE,
307	'options' => [
308	'left_arrow_bold' => [
309	'icon' => 'fa fa-arrow-left',
310	],
311	'left_arrow_long' => [
312	'icon' => 'fa fa-long-arrow-left',
313	],
314	'left_arrow_long_circle' => [
315	'icon' => 'fa fa-arrow-circle-left',
316	],
317	'left_arrow_angle' => [
318	'icon' => 'fa fa-angle-left',
319	],
320	'left_arrow_chevron' => [
321	'icon' => 'fa fa-chevron-left',
322	]
323	],
324	'default' => 'left_arrow_angle',
325	'condition' => [
326	'premium_carousel_navigation_show' => 'yes',
327	'premium_carousel_slider_type!' => 'vertical',
328	]
329	]
330	);
331
332	$this->add_control(
333	'premium_carousel_arrow_style',
334	[
335	'label' => esc_html__( 'Style', 'premium-addons-for-elementor' ),
336	'type' => Controls_Manager::SELECT,
337	'default' => 'default',
338	'options' => [
339	'default' => esc_html__( 'Default', 'premium-addons-for-elementor' ),
340	'circle-bg' => esc_html__( 'Circle Background', 'premium-addons-for-elementor' ),
341	'square-bg' => esc_html__( 'Square Background', 'premium-addons-for-elementor' ),
342	'circle-border' => esc_html__( 'Circle border', 'premium-addons-for-elementor' ),
343	'square-border' => esc_html__( 'Square border', 'premium-addons-for-elementor' ),
344	],
345	'condition' => [
346	'premium_carousel_navigation_show' => 'yes'
347	]
348	]
349	);
350
351	$this->add_control(
352	'premium_carousel_arrow_color',
353	[
354	'label' => esc_html__( 'Color', 'premium-addons-for-elementor' ),
355	'type' => Controls_Manager::COLOR,
356	'scheme' => [
357	'type' => Scheme_Color::get_type(),
358	'value' => Scheme_Color::COLOR_2,
359	],
360	'condition' => [
361	'premium_carousel_navigation_show' => 'yes'
362	],
363	'selectors' => [
364	'{{WRAPPER}} .premium-carousel-wrapper .slick-arrow' => 'color: {{VALUE}};',
365	],
366	]
367	);
368
369	$this->add_control(
370	'premium_carousel_arrow_size',
371	[
372	'label' => esc_html__( 'Size', 'premium-addons-for-elementor' ),
373	'type' => Controls_Manager::SLIDER,
374	'default' => [
375	'size' => 14,
376	],
377	'range' => [
378	'px' => [
379	'min' => 0,
380	'max' => 60
381	],
382	],
383	'condition' => [
384	'premium_carousel_navigation_show' => 'yes'
385	],
386	'selectors' => [
387	'{{WRAPPER}} .premium-carousel-wrapper .slick-arrow' => 'font-size: {{SIZE}}{{UNIT}};',
388	],
389	]
390	);
391
392	$this->add_control(
393	'premium_carousel_arrow_bg_color',
394	[
395	'label' => esc_html__( 'Background Color', 'premium-addons-for-elementor' ),
396	'type' => Controls_Manager::COLOR,
397	'scheme' => [
398	'type' => Scheme_Color::get_type(),
399	'value' => Scheme_Color::COLOR_1,
400	],
401	'condition' => [
402	'premium_carousel_arrow_style' => [ 'circle-bg', 'square-bg' ]
403	],
404	'selectors' => [
405	'{{WRAPPER}} .premium-carousel-wrapper .circle-bg' => 'background: {{VALUE}};',
406	'{{WRAPPER}} .premium-carousel-wrapper .square-bg' => 'background: {{VALUE}};',
407	],
408	]
409	);
410
411	$this->add_control(
412	'premium_carousel_arrow_border_color',
413	[
414	'label' => esc_html__( 'Border Color', 'premium-addons-for-elementor' ),
415	'type' => Controls_Manager::COLOR,
416	'scheme' => [
417	'type' => Scheme_Color::get_type(),
418	'value' => Scheme_Color::COLOR_1,
419	],
420	'condition' => [
421	'premium_carousel_arrow_style' => [ 'circle-border', 'square-border' ]
422	],
423	'selectors' => [
424	'{{WRAPPER}} .premium-carousel-wrapper .square-border' => 'border: solid {{VALUE}};',
425	'{{WRAPPER}} .premium-carousel-wrapper .circle-border' => 'border: solid {{VALUE}};',
426	],
427	]
428	);
429
430	$this->add_control(
431	'premium_carousel_border_size',
432	[
433	'label' => esc_html__( 'Border Size', 'premium-addons-for-elementor' ),
434	'type' => Controls_Manager::SLIDER,
435	'default' => [
436	'size' => 1,
437	],
438	'range' => [
439	'px' => [
440	'min' => 0,
441	'max' => 60
442	],
443	],
444	'condition' => [
445	'premium_carousel_arrow_style' => [ 'circle-border', 'square-border' ]
446	],
447	'selectors' => [
448	'{{WRAPPER}} .premium-carousel-wrapper .square-border' => 'border-width: {{SIZE}}{{UNIT}};',
449	'{{WRAPPER}} .premium-carousel-wrapper .circle-border' => 'border-width: {{SIZE}}{{UNIT}};',
450	],
451	]
452	);
453
454	$this->add_control('premium_carousel_arrow_position',
455	[
456	'label' => esc_html__('Position (PX)', 'premium-addons-for-elementor'),
457	'type' => Controls_Manager::SLIDER,
458	'range' => [
459	'px' => [
460	'min' => -50,
461	'max' => 1,
462	],
463	],
464	'condition' => [
465	'premium_carousel_navigation_show' => 'yes',
466	'premium_carousel_slider_type' => 'horizontal'
467	],
468	]
469	);
470
471	$this->add_control('premium_carousel_dots_heading',
472	[
473	'label' => esc_html__('Dots','premium-addons-for-elementor'),
474	'type' => Controls_manager::HEADING,
475	]);
476
477	$this->add_control(
478	'premium_carousel_dot_navigation_show',
479	[
480	'label' => esc_html__( 'Dots', 'premium-addons-for-elementor' ),
481	'description' => esc_html__( 'Enable or disable navigation dots', 'premium-addons-for-elementor' ),
482	'type' => Controls_Manager::SWITCHER,
483	'default' => 'yes'
484	]
485	);
486
487	$this->add_control(
488	'premium_carousel_dot_icon',
489	[
490	'label' => esc_html__( 'Icon', 'premium-addons-for-elementor' ),
491	'type' => Controls_Manager::CHOOSE,
492	'options' => [
493	'square_white' => [
494	'icon' => 'fa fa-square-o',
495	],
496	'square_black' => [
497	'icon' => 'fa fa-square',
498	],
499	'circle_white' => [
500	'icon' => 'fa fa-circle',
501	],
502	'circle_thin' => [
503	'icon' => 'fa fa-circle-thin',
504	],
505	'circle_thin_bold' => [
506	'icon' => 'fa fa-circle-o',
507	]
508	],
509	'default' => 'circle_white',
510	'condition' => [
511	'premium_carousel_dot_navigation_show' => 'yes'
512	]
513	]
514	);
515
516	$this->add_control(
517	'premium_carousel_dot_navigation_color',
518	[
519	'label' => esc_html__( 'Color', 'premium-addons-for-elementor' ),
520	'type' => Controls_Manager::COLOR,
521	'scheme' => [
522	'type' => Scheme_Color::get_type(),
523	'value' => Scheme_Color::COLOR_2,
524	],
525	'condition' => [
526	'premium_carousel_dot_navigation_show' => 'yes'
527	],
528	'selectors' => [
529	'{{WRAPPER}} ul.slick-dots li' => 'color: {{VALUE}}'
530	]
531	]
532	);
533
534	$this->add_control(
535	'premium_carousel_dot_navigation_active_color',
536	[
537	'label' => esc_html__( 'Active Color', 'premium-addons-for-elementor' ),
538	'type' => Controls_Manager::COLOR,
539	'scheme' => [
540	'type' => Scheme_Color::get_type(),
541	'value' => Scheme_Color::COLOR_1,
542	],
543	'condition' => [
544	'premium_carousel_dot_navigation_show' => 'yes'
545	],
546	'selectors' => [
547	'{{WRAPPER}} ul.slick-dots li.slick-active' => 'color: {{VALUE}}'
548	]
549	]
550	);
551
552	$this->add_control(
553	'premium_carousel_navigation_effect',
554	[
555	'label' => esc_html__( 'Ripple Effect', 'premium-addons-for-elementor' ),
556	'description' => esc_html__( 'Enable a ripple effect when the active dot is hovered/clicked', 'premium-addons-for-elementor' ),
557	'type' => Controls_Manager::SWITCHER,
558	'condition' => [
559	'premium_carousel_dot_navigation_show' => 'yes'
560	],
561	]
562	);
563
564	$this->add_control(
565	'premium_carousel_navigation_effect_border_color',
566	[
567	'label' => esc_html__( 'Ripple Color', 'premium-addons-for-elementor' ),
568	'type' => Controls_Manager::COLOR,
569	'scheme' => [
570	'type' => Scheme_Color::get_type(),
571	'value' => Scheme_Color::COLOR_1,
572	],
573	'condition' => [
574	'premium_carousel_dot_navigation_show' => 'yes',
575	'premium_carousel_navigation_effect' => 'yes'
576	],
577	'selectors' => [
578	'{{WRAPPER}} .premium-carousel-wrapper.hvr-ripple-out ul.slick-dots li.slick-active:before' => 'border-color: {{VALUE}}'
579	]
580	]
581	);
582
583	/First Border Radius/
584	$this->add_control('premium_carousel_navigation_effect_border_radius',
585	[
586	'label' => esc_html__('Border Radius', 'premium-addons-for-elementor'),
587	'type' => Controls_Manager::SLIDER,
588	'size_units' => ['px', '%', 'em'],
589	'condition' => [
590	'premium_carousel_dot_navigation_show' => 'yes',
591	'premium_carousel_navigation_effect' => 'yes'
592	],
593	'selectors' => [
594	'{{WRAPPER}} .premium-carousel-wrapper.hvr-ripple-out ul.slick-dots li.slick-active:before' => 'border-radius: {{SIZE}}{{UNIT}};'
595	]
596	]
597	);
598
599	$this->end_controls_section();
600
601	$this->start_controls_section(
602	'premium-carousel-advance-settings',
603	[
604	'label' => esc_html__( 'Additional Settings' , 'premium-addons-for-elementor' ),
605	'tab' => Controls_Manager::TAB_STYLE
606	]
607	);
608
609	$this->add_control(
610	'premium_carousel_draggable_effect',
611	[
612	'label' => esc_html__( 'Draggable Effect', 'premium-addons-for-elementor' ),
613	'description' => esc_html__( 'Allow the slides to be dragged by mouse click', 'premium-addons-for-elementor' ),
614	'type' => Controls_Manager::SWITCHER,
615	'default' => 'yes'
616	]
617	);
618
619	$this->add_control(
620	'premium_carousel_touch_move',
621	[
622	'label' => esc_html__( 'Touch Move', 'premium-addons-for-elementor' ),
623	'description' => esc_html__( 'Enable slide moving with touch', 'premium-addons-for-elementor' ),
624	'type' => Controls_Manager::SWITCHER,
625	'default' => 'yes'
626	]
627	);
628
629	$this->add_control(
630	'premium_carousel_RTL_Mode',
631	[
632	'label' => esc_html__( 'RTL Mode', 'premium-addons-for-elementor' ),
633	'description' => esc_html__( 'Turn on RTL mode if your language starts from right to left', 'premium-addons-for-elementor' ),
634	'type' => Controls_Manager::SWITCHER,
635	'condition' => [
636	'premium_carousel_slider_type!' => 'vertical'
637	]
638	]
639	);
640
641	$this->add_control(
642	'premium_carousel_adaptive_height',
643	[
644	'label' => esc_html__( 'Adaptive Height', 'premium-addons-for-elementor' ),
645	'description' => esc_html__( 'Adaptive height setting gives each slide a fixed height to avoid huge white space gaps', 'premium-addons-for-elementor' ),
646	'type' => Controls_Manager::SWITCHER,
647	]
648	);
649
650	$this->add_control(
651	'premium_carousel_pausehover',
652	[
653	'label' => esc_html__( 'Pause on Hover', 'premium-addons-for-elementor' ),
654	'description' => esc_html__( 'Pause the slider when mouse hover', 'premium-addons-for-elementor' ),
655	'type' => Controls_Manager::SWITCHER,
656	]
657	);
658
659	$this->add_control(
660	'premium_carousel_center_mode',
661	[
662	'label' => esc_html__( 'Center Mode', 'premium-addons-for-elementor' ),
663	'description' => esc_html__( 'Center mode enables a centered view with partial next/previous slides. Animations and all visible scroll type doesn\'t work with this mode', 'premium-addons-for-elementor' ),
664	'type' => Controls_Manager::SWITCHER,
665	]
666	);
667
668	$this->add_control(
669	'premium_carousel_space_btw_items',
670	[
671	'label' => esc_html__( 'Slides\' Spacing', 'premium-addons-for-elementor' ),
672	'description' => esc_html__('Set a spacing value in pixels (px)', 'premium-addons-for-elementor'),
673	'type' => Controls_Manager::NUMBER,
674	'default' => '15'
675	]
676	);
677	}
678
679	protected function render() {
680	$settings = $this->get_settings();
681	$arrows_position = $settings['premium_carousel_arrow_position']['size'] . 'px';
682	// Carousel sliding type
683	if( $settings['premium_carousel_slider_type'] == 'horizontal' ){
684	$vertical = false;
685	} else if( $settings['premium_carousel_slider_type'] == 'vertical' ) {
686	$vertical = true;
687	}
688
689	// responsive carousel set up
690
691	$slides_on_desk = $settings['premium_carousel_responsive_desktop'];
692	if( $settings['premium_carousel_slides_to_show'] == 'all' ) {
693	$slidesToScroll = !empty($slides_on_desk) ? $slides_on_desk : 1;
694	} else {
695	$slidesToScroll = 1;
696	}
697
698	$slidesToShow = !empty($slides_on_desk) ? $slides_on_desk : 1;
699
700	$slides_on_tabs = $settings['premium_carousel_responsive_tabs'];
701	$slides_on_mob = $settings['premium_carousel_responsive_mobile'];
702
703	if( $settings['premium_carousel_responsive_tabs'] == '' ) {
704	$slides_on_tabs = $slides_on_desk;
705	}
706
707	if( $settings['premium_carousel_responsive_mobile'] == '' ) {
708	$slides_on_mob = $slides_on_desk;
709	}
710
711	$responsive = '[{breakpoint: 1025,settings: {slidesToShow: ' . $slides_on_desk . ',slidesToScroll: ' . $slidesToScroll . '}},{breakpoint: 769,settings: {slidesToShow: ' . $slides_on_tabs . ',slidesToScroll: ' . $slides_on_tabs . '}},{breakpoint: 481,settings: {slidesToShow: ' . $slides_on_mob . ',slidesToScroll: ' . $slides_on_mob . '}}]';
712
713	if( $settings['premium_carousel_loop'] == 'yes' ) {
714	$infinite = true;
715	} else {
716	$infinite = false;
717	}
718
719	if( $settings['premium_carousel_speed'] != '' ) {
720	$speed = $settings['premium_carousel_speed'];
721	} else {
722	$speed = '';
723	}
724
725	if( $settings['premium_carousel_autoplay'] == 'yes' ) {
726	$autoplay = true;
727
728	if( $settings['premium_carousel_autoplay_speed'] !== '' ) {
729	$autoplaySpeed = $settings['premium_carousel_autoplay_speed'];
730	}
731	} else {
732	$autoplay = false;
733	$autoplaySpeed = '';
734	}
735
736	if( $settings['premium_carousel_draggable_effect'] == 'yes' ) {
737	$draggable = true;
738	} else {
739	$draggable = false;
740	}
741	if( $settings['premium_carousel_touch_move'] == 'yes' ) {
742	$touchMove = true;
743	} else {
744	$touchMove = false;
745	}
746	$dir = '';
747	if( $settings['premium_carousel_RTL_Mode'] == 'yes' ) {
748	$rtl = true;
749	$dir = 'dir="rtl"';
750	} else {
751	$rtl = false;
752	}
753	if( $settings['premium_carousel_adaptive_height'] == 'yes' ) {
754	$adaptiveHeight = true;
755	} else {
756	$adaptiveHeight = false;
757	}
758	if( $settings['premium_carousel_pausehover'] == 'yes' ) {
759	$pauseOnHover = true;
760	} else {
761	$pauseOnHover = false;
762	}
763	if( $settings['premium_carousel_center_mode'] == 'yes' ) {
764	$centerMode = true;
765	} else {
766	$centerMode = false;
767	}
768	if( $settings['premium_carousel_space_btw_items'] !== '' ) {
769	$centerPadding = $settings['premium_carousel_space_btw_items']."px";
770	} else {
771	$centerPadding = '';
772	}
773	// Navigation arrow setting setup
774	if( $settings['premium_carousel_navigation_show'] == 'yes') {
775	$arrows = true;
776
777	if( $settings['premium_carousel_slider_type'] == 'vertical' ) {
778	$vertical_alignment = "ver-carousel-arrow";
779	} else {
780	$vertical_alignment = "carousel-arrow";
781	}
782	if( $settings['premium_carousel_arrow_style'] == 'circle-bg' ) {
783	$arrow_class = ' circle-bg';
784	}
785	if( $settings['premium_carousel_arrow_style'] == 'square-bg' ) {
786	$arrow_class = ' square-bg';
787	}
788	if( $settings['premium_carousel_arrow_style'] == 'square-border' ) {
789	$arrow_class = ' square-border';
790	}
791	if( $settings['premium_carousel_arrow_style'] == 'circle-border' ) {
792	$arrow_class = ' circle-border';
793	}
794	if( $settings['premium_carousel_arrow_style'] == 'default' ) {
795	$arrow_class = '';
796	}
797	if( $settings['premium_carousel_slider_type'] == 'vertical' ) {
798	$icon_next = $settings['premium_carousel_arrow_icon_next_ver'];
799	if( $icon_next == 'right_arrow_bold' ) {
800	$icon_next_class = 'fa fa-arrow-down';
801	}
802	if( $icon_next == 'right_arrow_long' ) {
803	$icon_next_class = 'fa fa-long-arrow-down';
804	}
805	if( $icon_next == 'right_arrow_long_circle' ) {
806	$icon_next_class = 'fa fa-arrow-circle-down';
807	}
808	if( $icon_next == 'right_arrow_angle' ) {
809	$icon_next_class = 'fa fa-angle-down';
810	}
811	if( $icon_next == 'right_arrow_chevron' ) {
812	$icon_next_class = 'fa fa-chevron-down';
813	}
814	$icon_prev = $settings['premium_carousel_arrow_icon_prev_ver'];
815
816	if( $icon_prev == 'left_arrow_bold' ) {
817	$icon_prev_class = 'fa fa-arrow-up';
818	}
819	if( $icon_prev == 'left_arrow_long' ) {
820	$icon_prev_class = 'fa fa-long-arrow-up';
821	}
822	if( $icon_prev == 'left_arrow_long_circle' ) {
823	$icon_prev_class = 'fa fa-arrow-circle-up';
824	}
825	if( $icon_prev == 'left_arrow_angle' ) {
826	$icon_prev_class = 'fa fa-angle-up';
827	}
828	if( $icon_prev == 'left_arrow_chevron' ) {
829	$icon_prev_class = 'fa fa-chevron-up';
830	}
831	} else {
832	$icon_next = $settings['premium_carousel_arrow_icon_next'];
833	if( $icon_next == 'right_arrow_bold' ) {
834	$icon_next_class = 'fa fa-arrow-right';
835	}
836	if( $icon_next == 'right_arrow_long' ) {
837	$icon_next_class = 'fa fa-long-arrow-right';
838	}
839	if( $icon_next == 'right_arrow_long_circle' ) {
840	$icon_next_class = 'fa fa-arrow-circle-right';
841	}
842	if( $icon_next == 'right_arrow_angle' ) {
843	$icon_next_class = 'fa fa-angle-right';
844	}
845	if( $icon_next == 'right_arrow_chevron' ) {
846	$icon_next_class = 'fa fa-chevron-right';
847	}
848	$icon_prev = $settings['premium_carousel_arrow_icon_prev'];
849
850	if( $icon_prev == 'left_arrow_bold' ) {
851	$icon_prev_class = 'fa fa-arrow-left';
852	}
853	if( $icon_prev == 'left_arrow_long' ) {
854	$icon_prev_class = 'fa fa-long-arrow-left';
855	}
856	if( $icon_prev == 'left_arrow_long_circle' ) {
857	$icon_prev_class = 'fa fa-arrow-circle-left';
858	}
859	if( $icon_prev == 'left_arrow_angle' ) {
860	$icon_prev_class = 'fa fa-angle-left';
861	}
862	if( $icon_prev == 'left_arrow_chevron' ) {
863	$icon_prev_class = 'fa fa-chevron-left';
864	}
865	}
866
867	$next_arrow = '<a type="button" data-role="none" class="'. $vertical_alignment .' carousel-next'.$arrow_class.'" aria-label="Next" role="button" style=""><i class="'.$icon_next_class.'" aria-hidden="true"></i></a>';
868
869	$left_arrow = '<a type="button" data-role="none" class="'. $vertical_alignment .' carousel-prev'.$arrow_class.'" aria-label="Next" role="button" style=""><i class="'.$icon_prev_class.'" aria-hidden="true"></i></a>';
870
871	$nextArrow = $next_arrow;
872	$prevArrow = $left_arrow;
873	} else {
874	$arrows = false;
875	$nextArrow = '';
876	$prevArrow = '';
877	}
878	if( $settings['premium_carousel_dot_navigation_show'] == 'yes' ){
879	$dots = true;
880	if( $settings['premium_carousel_dot_icon'] == 'square_white' ) {
881	$dot_icon = 'fa fa-square-o';
882	}
883	if( $settings['premium_carousel_dot_icon'] == 'square_black' ) {
884	$dot_icon = 'fa fa-square';
885	}
886	if( $settings['premium_carousel_dot_icon'] == 'circle_white' ) {
887	$dot_icon = 'fa fa-circle';
888	}
889	if( $settings['premium_carousel_dot_icon'] == 'circle_thin' ) {
890	$dot_icon = 'fa fa-circle-thin';
891	}
892	if( $settings['premium_carousel_dot_icon'] == 'circle_thin_bold' ) {
893	$dot_icon = 'fa fa-circle-o';
894	}
895	$customPaging = $dot_icon;
896	} else {
897	$dots = false;
898	$dot_icon = '';
899	$customPaging = '';
900	}
901	$extra_class = $settings['premium_carousel_extra_class'] !== '' ? ' '.$settings['premium_carousel_extra_class'] : '';
902
903	$animation_class = $settings['premium_carousel_animation_list'];
904	$animation = 'class="item-wrapper" data-animation="animated ' . $animation_class .'"';
905
906	if($settings['premium_carousel_navigation_effect'] == 'yes') {
907	$dot_anim = 'hvr-ripple-out';
908	} else {
909	$dot_anim = '';
910	}
911
912	$carousel_settings = [
913	'vertical' => $vertical,
914	'slidesToScroll'=> $slidesToScroll,
915	'slidesToShow' => $slidesToShow,
916	'responsive' => $responsive,
917	'infinite' => $infinite,
918	'speed' => $speed,
919	'autoplay' => $autoplay,
920	'autoplaySpeed' => $autoplaySpeed,
921	'draggable' => $draggable,
922	'touchMove' => $touchMove,
923	'rtl' => $rtl,
924	'adaptiveHeight'=> $adaptiveHeight,
925	'pauseOnHover' => $pauseOnHover,
926	'centerMode' => $centerMode,
927	'centerPadding' => $centerPadding,
928	'arrows' => $arrows,
929	'nextArrow' => $nextArrow,
930	'prevArrow' => $prevArrow,
931	'dots' => $dots,
932	'customPaging' => $customPaging,
933	'slidesDesk' => $slides_on_desk,
934	'slidesTab' => $slides_on_tabs,
935	'slidesMob' => $slides_on_mob,
936	];
937	?>
938
939	<div id="premium-carousel-wrapper-<?php echo esc_attr( $this->get_id() ); ?>" class="premium-carousel-wrapper <?php echo esc_attr($dot_anim); ?> carousel-wrapper-<?php echo esc_attr( $this->get_id() ); ?><?php echo $extra_class;?>" <?php echo $dir; ?> data-settings='<?php echo wp_json_encode($carousel_settings); ?>'>
940	<div id="premium-carousel-<?php echo esc_attr( $this->get_id() ); ?>" class="premium-carousel-inner">
941	<?php
942	$premium_elements_page_id = is_array( $settings['premium_carousel_slider_content'] ) ? $settings['premium_carousel_slider_content'] : array();
943	$premium_elements_frontend = new Frontend;
944
945	foreach( $premium_elements_page_id as $elementor_post_id ) :
946	?>
947	<div <?php echo $animation; ?>>
948	<?php echo $premium_elements_frontend->get_builder_content($elementor_post_id, true); ?>
949	</div>
950	<?php endforeach; ?>
951	</div>
952	</div>
953	<style>
954	<?php if(!empty($settings['premium_carousel_arrow_position']['size'])) : ?>
955	#premium-carousel-wrapper-<?php echo esc_attr( $this->get_id() ); ?> a.carousel-arrow.carousel-next {
956	right: <?php echo $arrows_position; ?>
957	}
958	#premium-carousel-wrapper-<?php echo esc_attr( $this->get_id() ); ?> a.carousel-arrow.carousel-prev {
959	left: <?php echo $arrows_position; ?>
960	}
961	<?php endif; ?>
962	</style>
963	<?php
964	}
965	}
966	Plugin::instance()->widgets_manager->register_widget_type( new Premium_Carousel_Widget() );