PluginProbe
Elementor Website Builder – more than just a page builder / 3.2.4
Elementor Website Builder – more than just a page builder v3.2.4
4.3.0-beta3 4.3.0-beta2 4.3.0-beta1 4.2.4 4.2.3 4.2.2 4.2.1 4.2.0 4.1.5 4.2.0-beta2 4.2.0-dev2 4.2.0-beta1 4.1.4 4.1.3 4.1.2 4.1.1 4.1.0 4.1.0-beta3 4.1.0-dev3 4.0.9 4.1.0-beta2 4.1.0-dev2 4.0.8 4.1.0-beta1 4.1.0-dev1 All 452 releases
← All changes | includes/widgets/image-carousel.php +136 -451 4.2.0-dev23.2.4 View file →
@@ -5,9 +5,8 @@
5 5 exit; // Exit if accessed directly.
6 6 }
7 7
8 8 use Elementor\Core\Kits\Documents\Tabs\Global_Colors;
9 -use Elementor\Modules\Promotions\Controls\Promotion_Control;
10 9
11 10 /**
12 11 * Elementor image carousel widget.
13 12 *
@@ -42,9 +41,9 @@
42 41 *
43 42 * @return string Widget title.
44 43 */
45 44 public function get_title() {
46 - return esc_html__( 'Image Carousel', 'elementor' );
45 + return __( 'Image Carousel', 'elementor' );
47 46 }
48 47
49 48 /**
50 49 * Get widget icon.
@@ -73,66 +72,9 @@
73 72 public function get_keywords() {
74 73 return [ 'image', 'photo', 'visual', 'carousel', 'slider' ];
75 74 }
76 75
77 - protected function is_dynamic_content(): bool {
78 - return false;
79 - }
80 -
81 76 /**
82 - * Get style dependencies.
83 - *
84 - * Retrieve the list of style dependencies the widget requires.
85 - *
86 - * @since 3.24.0
87 - * @access public
88 - *
89 - * @return array Widget style dependencies.
90 - */
91 - public function get_style_depends(): array {
92 - return [ 'e-swiper', 'widget-image-carousel' ];
93 - }
94 -
95 - /**
96 - * Get script dependencies.
97 - *
98 - * Retrieve the list of script dependencies the widget requires.
99 - *
100 - * @since 3.27.0
101 - * @access public
102 - *
103 - * @return array Widget script dependencies.
104 - */
105 - public function get_script_depends(): array {
106 - return [ 'swiper' ];
107 - }
108 -
109 - public function has_widget_inner_wrapper(): bool {
110 - return ! Plugin::$instance->experiments->is_feature_active( 'e_optimized_markup' );
111 - }
112 -
113 - /**
114 - * Get widget upsale data.
115 - *
116 - * Retrieve the widget promotion data.
117 - *
118 - * @since 3.18.0
119 - * @access protected
120 - *
121 - * @return array Widget promotion data.
122 - */
123 - protected function get_upsale_data() {
124 - return [
125 - 'condition' => ! Utils::has_pro(),
126 - 'image' => esc_url( ELEMENTOR_ASSETS_URL . 'images/go-pro.svg' ),
127 - 'image_alt' => esc_attr__( 'Upgrade', 'elementor' ),
128 - 'description' => esc_html__( 'Gain complete freedom to design every slide with Elementor"s Pro Carousel.', 'elementor' ),
129 - 'upgrade_url' => esc_url( 'https://go.elementor.com/go-pro-image-carousel-widget/' ),
130 - 'upgrade_text' => esc_html__( 'Upgrade Now', 'elementor' ),
131 - ];
132 - }
133 -
134 - /**
135 77 * Register image carousel widget controls.
136 78 *
137 79 * Adds different input fields to allow the user to change and customize the widget settings.
138 80 *
@@ -142,25 +84,16 @@
142 84 protected function register_controls() {
143 85 $this->start_controls_section(
144 86 'section_image_carousel',
145 87 [
146 - 'label' => esc_html__( 'Image Carousel', 'elementor' ),
88 + 'label' => __( 'Image Carousel', 'elementor' ),
147 89 ]
148 90 );
149 91
150 92 $this->add_control(
151 - 'carousel_name',
152 - [
153 - 'label' => esc_html__( 'Carousel Name', 'elementor' ),
154 - 'type' => Controls_Manager::TEXT,
155 - 'default' => esc_html__( 'Image Carousel', 'elementor' ),
156 - ]
157 - );
158 -
159 - $this->add_control(
160 93 'carousel',
161 94 [
162 - 'label' => esc_html__( 'Add Images', 'elementor' ),
95 + 'label' => __( 'Add Images', 'elementor' ),
163 96 'type' => Controls_Manager::GALLERY,
164 97 'default' => [],
165 98 'show_label' => false,
166 99 'dynamic' => [
@@ -172,8 +105,9 @@
172 105 $this->add_group_control(
173 106 Group_Control_Image_Size::get_type(),
174 107 [
175 108 'name' => 'thumbnail', // Usage: `{name}_size` and `{name}_custom_dimension`, in this case `thumbnail_size` and `thumbnail_custom_dimension`.
109 + 'separator' => 'none',
176 110 ]
177 111 );
178 112
179 113 $slides_to_show = range( 1, 10 );
@@ -181,19 +115,14 @@
181 115
182 116 $this->add_responsive_control(
183 117 'slides_to_show',
184 118 [
185 - 'label' => esc_html__( 'Slides to Show', 'elementor' ),
119 + 'label' => __( 'Slides to Show', 'elementor' ),
186 120 'type' => Controls_Manager::SELECT,
187 121 'options' => [
188 - '' => esc_html__( 'Default', 'elementor' ),
122 + '' => __( 'Default', 'elementor' ),
189 123 ] + $slides_to_show,
190 124 'frontend_available' => true,
191 - 'render_type' => 'template',
192 - 'selectors' => [
193 - '{{WRAPPER}}' => '--e-image-carousel-slides-to-show: {{VALUE}}',
194 - ],
195 - 'content_classes' => 'elementor-control-field-select-small',
196 125 ]
197 126 );
198 127
199 128 $this->add_responsive_control(
@@ -198,19 +127,18 @@
198 127
199 128 $this->add_responsive_control(
200 129 'slides_to_scroll',
201 130 [
202 - 'label' => esc_html__( 'Slides to Scroll', 'elementor' ),
131 + 'label' => __( 'Slides to Scroll', 'elementor' ),
203 132 'type' => Controls_Manager::SELECT,
204 - 'description' => esc_html__( 'Set how many slides are scrolled per swipe.', 'elementor' ),
133 + 'description' => __( 'Set how many slides are scrolled per swipe.', 'elementor' ),
205 134 'options' => [
206 - '' => esc_html__( 'Default', 'elementor' ),
135 + '' => __( 'Default', 'elementor' ),
207 136 ] + $slides_to_show,
208 137 'condition' => [
209 138 'slides_to_show!' => '1',
210 139 ],
211 140 'frontend_available' => true,
212 - 'content_classes' => 'elementor-control-field-select-small',
213 141 ]
214 142 );
215 143
216 144 $this->add_control(
@@ -215,14 +143,14 @@
215 143
216 144 $this->add_control(
217 145 'image_stretch',
218 146 [
219 - 'label' => esc_html__( 'Image Stretch', 'elementor' ),
147 + 'label' => __( 'Image Stretch', 'elementor' ),
220 148 'type' => Controls_Manager::SELECT,
221 149 'default' => 'no',
222 150 'options' => [
223 - 'no' => esc_html__( 'No', 'elementor' ),
224 - 'yes' => esc_html__( 'Yes', 'elementor' ),
151 + 'no' => __( 'No', 'elementor' ),
152 + 'yes' => __( 'Yes', 'elementor' ),
225 153 ],
226 154 ]
227 155 );
228 156
@@ -228,16 +156,16 @@
228 156
229 157 $this->add_control(
230 158 'navigation',
231 159 [
232 - 'label' => esc_html__( 'Navigation', 'elementor' ),
160 + 'label' => __( 'Navigation', 'elementor' ),
233 161 'type' => Controls_Manager::SELECT,
234 162 'default' => 'both',
235 163 'options' => [
236 - 'both' => esc_html__( 'Arrows and Dots', 'elementor' ),
237 - 'arrows' => esc_html__( 'Arrows', 'elementor' ),
238 - 'dots' => esc_html__( 'Dots', 'elementor' ),
239 - 'none' => esc_html__( 'None', 'elementor' ),
164 + 'both' => __( 'Arrows and Dots', 'elementor' ),
165 + 'arrows' => __( 'Arrows', 'elementor' ),
166 + 'dots' => __( 'Dots', 'elementor' ),
167 + 'none' => __( 'None', 'elementor' ),
240 168 ],
241 169 'frontend_available' => true,
242 170 ]
243 171 );
@@ -242,127 +170,17 @@
242 170 ]
243 171 );
244 172
245 173 $this->add_control(
246 - 'navigation_previous_icon',
247 - [
248 - 'label' => esc_html__( 'Previous Arrow Icon', 'elementor' ),
249 - 'type' => Controls_Manager::ICONS,
250 - 'fa4compatibility' => 'icon',
251 - 'skin' => 'inline',
252 - 'label_block' => false,
253 - 'skin_settings' => [
254 - 'inline' => [
255 - 'none' => [
256 - 'label' => 'Default',
257 - 'icon' => 'eicon-chevron-left',
258 - ],
259 - 'icon' => [
260 - 'icon' => 'eicon-star',
261 - ],
262 - ],
263 - ],
264 - 'recommended' => [
265 - 'fa-regular' => [
266 - 'arrow-alt-circle-left',
267 - 'caret-square-left',
268 - ],
269 - 'fa-solid' => [
270 - 'angle-double-left',
271 - 'angle-left',
272 - 'arrow-alt-circle-left',
273 - 'arrow-circle-left',
274 - 'arrow-left',
275 - 'caret-left',
276 - 'caret-square-left',
277 - 'chevron-circle-left',
278 - 'chevron-left',
279 - 'long-arrow-alt-left',
280 - ],
281 - ],
282 - 'conditions' => [
283 - 'relation' => 'or',
284 - 'terms' => [
285 - [
286 - 'name' => 'navigation',
287 - 'operator' => '=',
288 - 'value' => 'both',
289 - ],
290 - [
291 - 'name' => 'navigation',
292 - 'operator' => '=',
293 - 'value' => 'arrows',
294 - ],
295 - ],
296 - ],
297 - ]
298 - );
299 -
300 - $this->add_control(
301 - 'navigation_next_icon',
302 - [
303 - 'label' => esc_html__( 'Next Arrow Icon', 'elementor' ),
304 - 'type' => Controls_Manager::ICONS,
305 - 'fa4compatibility' => 'icon',
306 - 'skin' => 'inline',
307 - 'label_block' => false,
308 - 'skin_settings' => [
309 - 'inline' => [
310 - 'none' => [
311 - 'label' => 'Default',
312 - 'icon' => 'eicon-chevron-right',
313 - ],
314 - 'icon' => [
315 - 'icon' => 'eicon-star',
316 - ],
317 - ],
318 - ],
319 - 'recommended' => [
320 - 'fa-regular' => [
321 - 'arrow-alt-circle-right',
322 - 'caret-square-right',
323 - ],
324 - 'fa-solid' => [
325 - 'angle-double-right',
326 - 'angle-right',
327 - 'arrow-alt-circle-right',
328 - 'arrow-circle-right',
329 - 'arrow-right',
330 - 'caret-right',
331 - 'caret-square-right',
332 - 'chevron-circle-right',
333 - 'chevron-right',
334 - 'long-arrow-alt-right',
335 - ],
336 - ],
337 - 'conditions' => [
338 - 'relation' => 'or',
339 - 'terms' => [
340 - [
341 - 'name' => 'navigation',
342 - 'operator' => '=',
343 - 'value' => 'both',
344 - ],
345 - [
346 - 'name' => 'navigation',
347 - 'operator' => '=',
348 - 'value' => 'arrows',
349 - ],
350 - ],
351 - ],
352 - ]
353 - );
354 -
355 - $this->add_control(
356 174 'link_to',
357 175 [
358 - 'label' => esc_html__( 'Link', 'elementor' ),
176 + 'label' => __( 'Link', 'elementor' ),
359 177 'type' => Controls_Manager::SELECT,
360 178 'default' => 'none',
361 179 'options' => [
362 - 'none' => esc_html__( 'None', 'elementor' ),
363 - 'file' => esc_html__( 'Media File', 'elementor' ),
364 - 'custom' => esc_html__( 'Custom URL', 'elementor' ),
180 + 'none' => __( 'None', 'elementor' ),
181 + 'file' => __( 'Media File', 'elementor' ),
182 + 'custom' => __( 'Custom URL', 'elementor' ),
365 183 ],
366 184 ]
367 185 );
368 186
@@ -368,17 +186,15 @@
368 186
369 187 $this->add_control(
370 188 'link',
371 189 [
372 - 'label' => esc_html__( 'Link', 'elementor' ),
190 + 'label' => __( 'Link', 'elementor' ),
373 191 'type' => Controls_Manager::URL,
192 + 'placeholder' => __( 'https://your-link.com', 'elementor' ),
374 193 'condition' => [
375 194 'link_to' => 'custom',
376 195 ],
377 196 'show_label' => false,
378 - 'dynamic' => [
379 - 'active' => true,
380 - ],
381 197 ]
382 198 );
383 199
384 200 $this->add_control(
@@ -383,21 +199,15 @@
383 199
384 200 $this->add_control(
385 201 'open_lightbox',
386 202 [
387 - 'label' => esc_html__( 'Lightbox', 'elementor' ),
203 + 'label' => __( 'Lightbox', 'elementor' ),
388 204 'type' => Controls_Manager::SELECT,
389 - 'description' => sprintf(
390 - /* translators: 1: Link open tag, 2: Link close tag. */
391 - esc_html__( 'Manage your site’s lightbox settings in the %1$sLightbox panel%2$s.', 'elementor' ),
392 - '<a href="javascript: $e.run( \'panel/global/open\' ).then( () => $e.route( \'panel/global/settings-lightbox\' ) )">',
393 - '</a>'
394 - ),
395 205 'default' => 'default',
396 206 'options' => [
397 - 'default' => esc_html__( 'Default', 'elementor' ),
398 - 'yes' => esc_html__( 'Yes', 'elementor' ),
399 - 'no' => esc_html__( 'No', 'elementor' ),
207 + 'default' => __( 'Default', 'elementor' ),
208 + 'yes' => __( 'Yes', 'elementor' ),
209 + 'no' => __( 'No', 'elementor' ),
400 210 ],
401 211 'condition' => [
402 212 'link_to' => 'file',
403 213 ],
@@ -406,47 +216,48 @@
406 216
407 217 $this->add_control(
408 218 'caption_type',
409 219 [
410 - 'label' => esc_html__( 'Caption', 'elementor' ),
220 + 'label' => __( 'Caption', 'elementor' ),
411 221 'type' => Controls_Manager::SELECT,
412 222 'default' => '',
413 223 'options' => [
414 - '' => esc_html__( 'None', 'elementor' ),
415 - 'title' => esc_html__( 'Title', 'elementor' ),
416 - 'caption' => esc_html__( 'Caption', 'elementor' ),
417 - 'description' => esc_html__( 'Description', 'elementor' ),
224 + '' => __( 'None', 'elementor' ),
225 + 'title' => __( 'Title', 'elementor' ),
226 + 'caption' => __( 'Caption', 'elementor' ),
227 + 'description' => __( 'Description', 'elementor' ),
418 228 ],
419 229 ]
420 230 );
421 231
232 + $this->add_control(
233 + 'view',
234 + [
235 + 'label' => __( 'View', 'elementor' ),
236 + 'type' => Controls_Manager::HIDDEN,
237 + 'default' => 'traditional',
238 + ]
239 + );
240 +
422 241 $this->end_controls_section();
423 242
424 243 $this->start_controls_section(
425 244 'section_additional_options',
426 245 [
427 - 'label' => esc_html__( 'Additional Options', 'elementor' ),
246 + 'label' => __( 'Additional Options', 'elementor' ),
428 247 ]
429 248 );
430 249
431 250 $this->add_control(
432 - 'lazyload',
433 - [
434 - 'label' => esc_html__( 'Lazyload', 'elementor' ),
435 - 'type' => Controls_Manager::SWITCHER,
436 - 'frontend_available' => true,
437 - ]
438 - );
439 -
440 - $this->add_control(
441 251 'autoplay',
442 252 [
443 - 'label' => esc_html__( 'Autoplay', 'elementor' ),
444 - 'type' => Controls_Manager::SWITCHER,
445 - 'label_on' => esc_html__( 'Yes', 'elementor' ),
446 - 'label_off' => esc_html__( 'No', 'elementor' ),
447 - 'return_value' => 'yes',
253 + 'label' => __( 'Autoplay', 'elementor' ),
254 + 'type' => Controls_Manager::SELECT,
448 255 'default' => 'yes',
256 + 'options' => [
257 + 'yes' => __( 'Yes', 'elementor' ),
258 + 'no' => __( 'No', 'elementor' ),
259 + ],
449 260 'frontend_available' => true,
450 261 ]
451 262 );
452 263
@@ -452,14 +263,15 @@
452 263
453 264 $this->add_control(
454 265 'pause_on_hover',
455 266 [
456 - 'label' => esc_html__( 'Pause on Hover', 'elementor' ),
457 - 'type' => Controls_Manager::SWITCHER,
458 - 'label_on' => esc_html__( 'Yes', 'elementor' ),
459 - 'label_off' => esc_html__( 'No', 'elementor' ),
460 - 'return_value' => 'yes',
267 + 'label' => __( 'Pause on Hover', 'elementor' ),
268 + 'type' => Controls_Manager::SELECT,
461 269 'default' => 'yes',
270 + 'options' => [
271 + 'yes' => __( 'Yes', 'elementor' ),
272 + 'no' => __( 'No', 'elementor' ),
273 + ],
462 274 'condition' => [
463 275 'autoplay' => 'yes',
464 276 ],
465 277 'render_type' => 'none',
@@ -469,14 +281,15 @@
469 281
470 282 $this->add_control(
471 283 'pause_on_interaction',
472 284 [
473 - 'label' => esc_html__( 'Pause on Interaction', 'elementor' ),
474 - 'type' => Controls_Manager::SWITCHER,
475 - 'label_on' => esc_html__( 'Yes', 'elementor' ),
476 - 'label_off' => esc_html__( 'No', 'elementor' ),
477 - 'return_value' => 'yes',
285 + 'label' => __( 'Pause on Interaction', 'elementor' ),
286 + 'type' => Controls_Manager::SELECT,
478 287 'default' => 'yes',
288 + 'options' => [
289 + 'yes' => __( 'Yes', 'elementor' ),
290 + 'no' => __( 'No', 'elementor' ),
291 + ],
479 292 'condition' => [
480 293 'autoplay' => 'yes',
481 294 ],
482 295 'frontend_available' => true,
@@ -485,9 +298,9 @@
485 298
486 299 $this->add_control(
487 300 'autoplay_speed',
488 301 [
489 - 'label' => esc_html__( 'Autoplay Speed', 'elementor' ),
302 + 'label' => __( 'Autoplay Speed', 'elementor' ),
490 303 'type' => Controls_Manager::NUMBER,
491 304 'default' => 5000,
492 305 'condition' => [
493 306 'autoplay' => 'yes',
@@ -500,14 +313,15 @@
500 313 // Loop requires a re-render so no 'render_type = none'
501 314 $this->add_control(
502 315 'infinite',
503 316 [
504 - 'label' => esc_html__( 'Infinite Loop', 'elementor' ),
505 - 'type' => Controls_Manager::SWITCHER,
506 - 'label_on' => esc_html__( 'Yes', 'elementor' ),
507 - 'label_off' => esc_html__( 'No', 'elementor' ),
508 - 'return_value' => 'yes',
317 + 'label' => __( 'Infinite Loop', 'elementor' ),
318 + 'type' => Controls_Manager::SELECT,
509 319 'default' => 'yes',
320 + 'options' => [
321 + 'yes' => __( 'Yes', 'elementor' ),
322 + 'no' => __( 'No', 'elementor' ),
323 + ],
510 324 'frontend_available' => true,
511 325 ]
512 326 );
513 327
@@ -513,14 +327,14 @@
513 327
514 328 $this->add_control(
515 329 'effect',
516 330 [
517 - 'label' => esc_html__( 'Effect', 'elementor' ),
331 + 'label' => __( 'Effect', 'elementor' ),
518 332 'type' => Controls_Manager::SELECT,
519 333 'default' => 'slide',
520 334 'options' => [
521 - 'slide' => esc_html__( 'Slide', 'elementor' ),
522 - 'fade' => esc_html__( 'Fade', 'elementor' ),
335 + 'slide' => __( 'Slide', 'elementor' ),
336 + 'fade' => __( 'Fade', 'elementor' ),
523 337 ],
524 338 'condition' => [
525 339 'slides_to_show' => '1',
526 340 ],
@@ -530,9 +344,9 @@
530 344
531 345 $this->add_control(
532 346 'speed',
533 347 [
534 - 'label' => esc_html__( 'Animation Speed', 'elementor' ),
348 + 'label' => __( 'Animation Speed', 'elementor' ),
535 349 'type' => Controls_Manager::NUMBER,
536 350 'default' => 500,
537 351 'render_type' => 'none',
538 352 'frontend_available' => true,
@@ -541,14 +355,14 @@
541 355
542 356 $this->add_control(
543 357 'direction',
544 358 [
545 - 'label' => esc_html__( 'Direction', 'elementor' ),
359 + 'label' => __( 'Direction', 'elementor' ),
546 360 'type' => Controls_Manager::SELECT,
547 361 'default' => 'ltr',
548 362 'options' => [
549 - 'ltr' => esc_html__( 'Left', 'elementor' ),
550 - 'rtl' => esc_html__( 'Right', 'elementor' ),
363 + 'ltr' => __( 'Left', 'elementor' ),
364 + 'rtl' => __( 'Right', 'elementor' ),
551 365 ],
552 366 ]
553 367 );
554 368
@@ -556,9 +370,9 @@
556 370
557 371 $this->start_controls_section(
558 372 'section_style_navigation',
559 373 [
560 - 'label' => esc_html__( 'Navigation', 'elementor' ),
374 + 'label' => __( 'Navigation', 'elementor' ),
561 375 'tab' => Controls_Manager::TAB_STYLE,
562 376 'condition' => [
563 377 'navigation' => [ 'arrows', 'dots', 'both' ],
564 378 ],
@@ -567,9 +381,9 @@
567 381
568 382 $this->add_control(
569 383 'heading_style_arrows',
570 384 [
571 - 'label' => esc_html__( 'Arrows', 'elementor' ),
385 + 'label' => __( 'Arrows', 'elementor' ),
572 386 'type' => Controls_Manager::HEADING,
573 387 'separator' => 'before',
574 388 'condition' => [
575 389 'navigation' => [ 'arrows', 'both' ],
@@ -579,14 +393,14 @@
579 393
580 394 $this->add_control(
581 395 'arrows_position',
582 396 [
583 - 'label' => esc_html__( 'Position', 'elementor' ),
397 + 'label' => __( 'Position', 'elementor' ),
584 398 'type' => Controls_Manager::SELECT,
585 399 'default' => 'inside',
586 400 'options' => [
587 - 'inside' => esc_html__( 'Inside', 'elementor' ),
588 - 'outside' => esc_html__( 'Outside', 'elementor' ),
401 + 'inside' => __( 'Inside', 'elementor' ),
402 + 'outside' => __( 'Outside', 'elementor' ),
589 403 ],
590 404 'prefix_class' => 'elementor-arrows-position-',
591 405 'condition' => [
592 406 'navigation' => [ 'arrows', 'both' ],
@@ -593,17 +407,17 @@
593 407 ],
594 408 ]
595 409 );
596 410
597 - $this->add_responsive_control(
411 + $this->add_control(
598 412 'arrows_size',
599 413 [
600 - 'label' => esc_html__( 'Size', 'elementor' ),
414 + 'label' => __( 'Size', 'elementor' ),
601 415 'type' => Controls_Manager::SLIDER,
602 - 'size_units' => [ 'px', 'em', 'rem', 'custom' ],
603 416 'range' => [
604 417 'px' => [
605 - 'max' => 100,
418 + 'min' => 20,
419 + 'max' => 60,
606 420 ],
607 421 ],
608 422 'selectors' => [
609 423 '{{WRAPPER}} .elementor-swiper-button.elementor-swiper-button-prev, {{WRAPPER}} .elementor-swiper-button.elementor-swiper-button-next' => 'font-size: {{SIZE}}{{UNIT}};',
@@ -616,13 +430,12 @@
616 430
617 431 $this->add_control(
618 432 'arrows_color',
619 433 [
620 - 'label' => esc_html__( 'Color', 'elementor' ),
434 + 'label' => __( 'Color', 'elementor' ),
621 435 'type' => Controls_Manager::COLOR,
622 436 'selectors' => [
623 437 '{{WRAPPER}} .elementor-swiper-button.elementor-swiper-button-prev, {{WRAPPER}} .elementor-swiper-button.elementor-swiper-button-next' => 'color: {{VALUE}};',
624 - '{{WRAPPER}} .elementor-swiper-button.elementor-swiper-button-prev svg, {{WRAPPER}} .elementor-swiper-button.elementor-swiper-button-next svg' => 'fill: {{VALUE}};',
625 438 ],
626 439 'condition' => [
627 440 'navigation' => [ 'arrows', 'both' ],
628 441 ],
@@ -631,9 +444,9 @@
631 444
632 445 $this->add_control(
633 446 'heading_style_dots',
634 447 [
635 - 'label' => esc_html__( 'Pagination', 'elementor' ),
448 + 'label' => __( 'Dots', 'elementor' ),
636 449 'type' => Controls_Manager::HEADING,
637 450 'separator' => 'before',
638 451 'condition' => [
639 452 'navigation' => [ 'dots', 'both' ],
@@ -643,14 +456,14 @@
643 456
644 457 $this->add_control(
645 458 'dots_position',
646 459 [
647 - 'label' => esc_html__( 'Position', 'elementor' ),
460 + 'label' => __( 'Position', 'elementor' ),
648 461 'type' => Controls_Manager::SELECT,
649 462 'default' => 'outside',
650 463 'options' => [
651 - 'outside' => esc_html__( 'Outside', 'elementor' ),
652 - 'inside' => esc_html__( 'Inside', 'elementor' ),
464 + 'outside' => __( 'Outside', 'elementor' ),
465 + 'inside' => __( 'Inside', 'elementor' ),
653 466 ],
654 467 'prefix_class' => 'elementor-pagination-position-',
655 468 'condition' => [
656 469 'navigation' => [ 'dots', 'both' ],
@@ -657,37 +470,17 @@
657 470 ],
658 471 ]
659 472 );
660 473
661 - $this->add_responsive_control(
662 - 'dots_gap',
663 - [
664 - 'label' => esc_html__( 'Space Between Dots', 'elementor' ),
665 - 'type' => Controls_Manager::SLIDER,
666 - 'size_units' => [ 'px', 'em', 'rem', 'custom' ],
667 - 'range' => [
668 - 'px' => [
669 - 'max' => 20,
670 - ],
671 - ],
672 - 'selectors' => [
673 - '{{WRAPPER}} .swiper-pagination-bullet' => '--swiper-pagination-bullet-horizontal-gap: {{SIZE}}{{UNIT}}; --swiper-pagination-bullet-vertical-gap: {{SIZE}}{{UNIT}};',
674 - ],
675 - 'condition' => [
676 - 'navigation' => [ 'dots', 'both' ],
677 - ],
678 - ]
679 - );
680 -
681 - $this->add_responsive_control(
474 + $this->add_control(
682 475 'dots_size',
683 476 [
684 - 'label' => esc_html__( 'Size', 'elementor' ),
477 + 'label' => __( 'Size', 'elementor' ),
685 478 'type' => Controls_Manager::SLIDER,
686 - 'size_units' => [ 'px', 'em', 'rem', 'custom' ],
687 479 'range' => [
688 480 'px' => [
689 - 'max' => 20,
481 + 'min' => 5,
482 + 'max' => 10,
690 483 ],
691 484 ],
692 485 'selectors' => [
693 486 '{{WRAPPER}} .swiper-pagination-bullet' => 'width: {{SIZE}}{{UNIT}}; height: {{SIZE}}{{UNIT}};',
@@ -698,26 +491,11 @@
698 491 ]
699 492 );
700 493
701 494 $this->add_control(
702 - 'dots_inactive_color',
703 - [
704 - 'label' => esc_html__( 'Color', 'elementor' ),
705 - 'type' => Controls_Manager::COLOR,
706 - 'selectors' => [
707 - // The opacity property will override the default inactive dot color which is opacity 0.2.
708 - '{{WRAPPER}} .swiper-pagination-bullet:not(.swiper-pagination-bullet-active)' => 'background: {{VALUE}}; opacity: 1',
709 - ],
710 - 'condition' => [
711 - 'navigation' => [ 'dots', 'both' ],
712 - ],
713 - ]
714 - );
715 -
716 - $this->add_control(
717 495 'dots_color',
718 496 [
719 - 'label' => esc_html__( 'Active Color', 'elementor' ),
497 + 'label' => __( 'Color', 'elementor' ),
720 498 'type' => Controls_Manager::COLOR,
721 499 'selectors' => [
722 500 '{{WRAPPER}} .swiper-pagination-bullet' => 'background: {{VALUE}};',
723 501 ],
@@ -731,9 +509,9 @@
731 509
732 510 $this->start_controls_section(
733 511 'section_style_image',
734 512 [
735 - 'label' => esc_html__( 'Image', 'elementor' ),
513 + 'label' => __( 'Image', 'elementor' ),
736 514 'tab' => Controls_Manager::TAB_STYLE,
737 515 ]
738 516 );
739 517
@@ -739,21 +517,21 @@
739 517
740 518 $this->add_responsive_control(
741 519 'gallery_vertical_align',
742 520 [
743 - 'label' => esc_html__( 'Vertical Align', 'elementor' ),
521 + 'label' => __( 'Vertical Align', 'elementor' ),
744 522 'type' => Controls_Manager::CHOOSE,
745 523 'options' => [
746 524 'flex-start' => [
747 - 'title' => esc_html__( 'Start', 'elementor' ),
525 + 'title' => __( 'Start', 'elementor' ),
748 526 'icon' => 'eicon-v-align-top',
749 527 ],
750 528 'center' => [
751 - 'title' => esc_html__( 'Center', 'elementor' ),
529 + 'title' => __( 'Center', 'elementor' ),
752 530 'icon' => 'eicon-v-align-middle',
753 531 ],
754 532 'flex-end' => [
755 - 'title' => esc_html__( 'End', 'elementor' ),
533 + 'title' => __( 'End', 'elementor' ),
756 534 'icon' => 'eicon-v-align-bottom',
757 535 ],
758 536 ],
759 537 'condition' => [
@@ -767,13 +545,13 @@
767 545
768 546 $this->add_control(
769 547 'image_spacing',
770 548 [
771 - 'label' => esc_html__( 'Spacing', 'elementor' ),
549 + 'label' => __( 'Spacing', 'elementor' ),
772 550 'type' => Controls_Manager::SELECT,
773 551 'options' => [
774 - '' => esc_html__( 'Default', 'elementor' ),
775 - 'custom' => esc_html__( 'Custom', 'elementor' ),
552 + '' => __( 'Default', 'elementor' ),
553 + 'custom' => __( 'Custom', 'elementor' ),
776 554 ],
777 555 'default' => '',
778 556 'condition' => [
779 557 'slides_to_show!' => '1',
@@ -780,14 +558,13 @@
780 558 ],
781 559 ]
782 560 );
783 561
784 - $this->add_responsive_control(
562 + $this->add_control(
785 563 'image_spacing_custom',
786 564 [
787 - 'label' => esc_html__( 'Image Spacing', 'elementor' ),
565 + 'label' => __( 'Image Spacing', 'elementor' ),
788 566 'type' => Controls_Manager::SLIDER,
789 - 'size_units' => [ 'px' ],
790 567 'range' => [
791 568 'px' => [
792 569 'max' => 100,
793 570 ],
@@ -794,8 +571,9 @@
794 571 ],
795 572 'default' => [
796 573 'size' => 20,
797 574 ],
575 + 'show_label' => false,
798 576 'condition' => [
799 577 'image_spacing' => 'custom',
800 578 'slides_to_show!' => '1',
801 579 ],
@@ -812,14 +590,14 @@
812 590 'selector' => '{{WRAPPER}} .elementor-image-carousel-wrapper .elementor-image-carousel .swiper-slide-image',
813 591 ]
814 592 );
815 593
816 - $this->add_responsive_control(
594 + $this->add_control(
817 595 'image_border_radius',
818 596 [
819 - 'label' => esc_html__( 'Border Radius', 'elementor' ),
597 + 'label' => __( 'Border Radius', 'elementor' ),
820 598 'type' => Controls_Manager::DIMENSIONS,
821 - 'size_units' => [ 'px', '%', 'em', 'rem', 'custom' ],
599 + 'size_units' => [ 'px', '%' ],
822 600 'selectors' => [
823 601 '{{WRAPPER}} .elementor-image-carousel-wrapper .elementor-image-carousel .swiper-slide-image' => 'border-radius: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}};',
824 602 ],
825 603 ]
@@ -829,9 +607,9 @@
829 607
830 608 $this->start_controls_section(
831 609 'section_caption',
832 610 [
833 - 'label' => esc_html__( 'Caption', 'elementor' ),
611 + 'label' => __( 'Caption', 'elementor' ),
834 612 'tab' => Controls_Manager::TAB_STYLE,
835 613 'condition' => [
836 614 'caption_type!' => '',
837 615 ],
@@ -837,36 +615,31 @@
837 615 ],
838 616 ]
839 617 );
840 618
841 - $this->add_responsive_control(
619 + $this->add_control(
842 620 'caption_align',
843 621 [
844 - 'label' => esc_html__( 'Alignment', 'elementor' ),
622 + 'label' => __( 'Alignment', 'elementor' ),
845 623 'type' => Controls_Manager::CHOOSE,
846 624 'options' => [
847 - 'start' => [
848 - 'title' => esc_html__( 'Start', 'elementor' ),
625 + 'left' => [
626 + 'title' => __( 'Left', 'elementor' ),
849 627 'icon' => 'eicon-text-align-left',
850 628 ],
851 629 'center' => [
852 - 'title' => esc_html__( 'Center', 'elementor' ),
630 + 'title' => __( 'Center', 'elementor' ),
853 631 'icon' => 'eicon-text-align-center',
854 632 ],
855 - 'end' => [
856 - 'title' => esc_html__( 'End', 'elementor' ),
633 + 'right' => [
634 + 'title' => __( 'Right', 'elementor' ),
857 635 'icon' => 'eicon-text-align-right',
858 636 ],
859 637 'justify' => [
860 - 'title' => esc_html__( 'Justified', 'elementor' ),
638 + 'title' => __( 'Justified', 'elementor' ),
861 639 'icon' => 'eicon-text-align-justify',
862 640 ],
863 641 ],
864 - 'classes' => 'elementor-control-start-end',
865 - 'selectors_dictionary' => [
866 - 'left' => is_rtl() ? 'end' : 'start',
867 - 'right' => is_rtl() ? 'start' : 'end',
868 - ],
869 642 'default' => 'center',
870 643 'selectors' => [
871 644 '{{WRAPPER}} .elementor-image-carousel-caption' => 'text-align: {{VALUE}};',
872 645 ],
@@ -875,9 +648,9 @@
875 648
876 649 $this->add_control(
877 650 'caption_text_color',
878 651 [
879 - 'label' => esc_html__( 'Text Color', 'elementor' ),
652 + 'label' => __( 'Text Color', 'elementor' ),
880 653 'type' => Controls_Manager::COLOR,
881 654 'default' => '',
882 655 'selectors' => [
883 656 '{{WRAPPER}} .elementor-image-carousel-caption' => 'color: {{VALUE}};',
@@ -903,21 +676,10 @@
903 676 'selector' => '{{WRAPPER}} .elementor-image-carousel-caption',
904 677 ]
905 678 );
906 679
907 - $this->add_responsive_control(
908 - 'caption_space',
909 - [
910 - 'label' => esc_html__( 'Spacing', 'elementor' ),
911 - 'type' => Controls_Manager::SLIDER,
912 - 'size_units' => [ 'px', '%', 'em', 'rem', 'custom' ],
913 - 'selectors' => [
914 - '{{WRAPPER}} .elementor-image-carousel-caption' => 'margin-block-start: {{SIZE}}{{UNIT}};',
915 - ],
916 - ]
917 - );
680 + $this->end_controls_section();
918 681
919 - $this->end_controls_section();
920 682 }
921 683
922 684 /**
923 685 * Render image carousel widget output on the frontend.
@@ -929,10 +691,8 @@
929 691 */
930 692 protected function render() {
931 693 $settings = $this->get_settings_for_display();
932 694
933 - $lazyload = 'yes' === $settings['lazyload'];
934 -
935 695 if ( empty( $settings['carousel'] ) ) {
936 696 return;
937 697 }
938 698
@@ -940,18 +700,10 @@
940 700
941 701 foreach ( $settings['carousel'] as $index => $attachment ) {
942 702 $image_url = Group_Control_Image_Size::get_attachment_image_src( $attachment['id'], 'thumbnail', $settings );
943 703
944 - if ( ! $image_url && isset( $attachment['url'] ) ) {
945 - $image_url = $attachment['url'];
946 - }
704 + $image_html = '<img class="swiper-slide-image" src="' . esc_attr( $image_url ) . '" alt="' . esc_attr( Control_Media::get_image_alt( $attachment ) ) . '" />';
947 705
948 - if ( $lazyload ) {
949 - $image_html = '<img class="swiper-slide-image swiper-lazy" data-src="' . esc_attr( $image_url ) . '" alt="' . esc_attr( Control_Media::get_image_alt( $attachment ) ) . '" />';
950 - } else {
951 - $image_html = '<img class="swiper-slide-image" src="' . esc_attr( $image_url ) . '" alt="' . esc_attr( Control_Media::get_image_alt( $attachment ) ) . '" />';
952 - }
953 -
954 706 $link_tag = '';
955 707
956 708 $link = $this->get_link_url( $attachment, $settings );
957 709
@@ -972,31 +724,12 @@
972 724 }
973 725
974 726 $image_caption = $this->get_image_caption( $attachment );
975 727
976 - $slide_count = $index + 1;
977 - $slide_setting_key = 'swiper_slide_' . $index;
728 + $slide_html = '<div class="swiper-slide">' . $link_tag . '<figure class="swiper-slide-inner">' . $image_html;
978 729
979 - $this->add_render_attribute( $slide_setting_key, [
980 - 'class' => 'swiper-slide',
981 - 'role' => 'group',
982 - 'aria-roledescription' => 'slide',
983 - 'aria-label' => sprintf(
984 - /* translators: 1: Slide count, 2: Total slides count. */
985 - esc_html__( '%1$s of %2$s', 'elementor' ),
986 - $slide_count,
987 - count( $settings['carousel'] )
988 - ),
989 - ] );
990 -
991 - $slide_html = '<div ' . $this->get_render_attribute_string( $slide_setting_key ) . '>' . $link_tag . '<figure class="swiper-slide-inner">' . $image_html;
992 -
993 - if ( $lazyload ) {
994 - $slide_html .= '<div class="swiper-lazy-preloader"></div>';
995 - }
996 -
997 730 if ( ! empty( $image_caption ) ) {
998 - $slide_html .= '<figcaption class="elementor-image-carousel-caption">' . wp_kses_post( $image_caption ) . '</figcaption>';
731 + $slide_html .= '<figcaption class="elementor-image-carousel-caption">' . $image_caption . '</figcaption>';
999 732 }
1000 733
1001 734 $slide_html .= '</figure>';
1002 735
@@ -1013,21 +746,14 @@
1013 746 if ( empty( $slides ) ) {
1014 747 return;
1015 748 }
1016 749
1017 - $swiper_class = 'swiper';
1018 - $has_autoplay_enabled = 'yes' === $this->get_settings_for_display( 'autoplay' );
1019 -
1020 750 $this->add_render_attribute( [
1021 751 'carousel' => [
1022 752 'class' => 'elementor-image-carousel swiper-wrapper',
1023 - 'aria-live' => $has_autoplay_enabled ? 'off' : 'polite',
1024 753 ],
1025 754 'carousel-wrapper' => [
1026 - 'class' => 'elementor-image-carousel-wrapper ' . $swiper_class,
1027 - 'role' => 'region',
1028 - 'aria-roledescription' => 'carousel',
1029 - 'aria-label' => $settings['carousel_name'],
755 + 'class' => 'elementor-image-carousel-wrapper swiper-container',
1030 756 'dir' => $settings['direction'],
1031 757 ],
1032 758 ] );
1033 759
@@ -1038,27 +764,28 @@
1038 764 $this->add_render_attribute( 'carousel', 'class', 'swiper-image-stretch' );
1039 765 }
1040 766
1041 767 $slides_count = count( $settings['carousel'] );
768 +
1042 769 ?>
1043 - <div <?php $this->print_render_attribute_string( 'carousel-wrapper' ); ?>>
1044 - <div <?php $this->print_render_attribute_string( 'carousel' ); ?>>
1045 - <?php // PHPCS - $slides contains the slides content, all the relevant content is escaped above. ?>
1046 - <?php echo implode( '', $slides ); // phpcs:ignore WordPress.Security.EscapeOutput.OutputNotEscaped ?>
770 + <div <?php echo $this->get_render_attribute_string( 'carousel-wrapper' ); ?>>
771 + <div <?php echo $this->get_render_attribute_string( 'carousel' ); ?>>
772 + <?php echo implode( '', $slides ); ?>
1047 773 </div>
1048 774 <?php if ( 1 < $slides_count ) : ?>
775 + <?php if ( $show_dots ) : ?>
776 + <div class="swiper-pagination"></div>
777 + <?php endif; ?>
1049 778 <?php if ( $show_arrows ) : ?>
1050 - <div class="elementor-swiper-button elementor-swiper-button-prev" role="button" tabindex="0">
1051 - <?php $this->render_swiper_button( 'previous' ); ?>
779 + <div class="elementor-swiper-button elementor-swiper-button-prev">
780 + <i class="eicon-chevron-left" aria-hidden="true"></i>
781 + <span class="elementor-screen-only"><?php _e( 'Previous', 'elementor' ); ?></span>
1052 782 </div>
1053 - <div class="elementor-swiper-button elementor-swiper-button-next" role="button" tabindex="0">
1054 - <?php $this->render_swiper_button( 'next' ); ?>
783 + <div class="elementor-swiper-button elementor-swiper-button-next">
784 + <i class="eicon-chevron-right" aria-hidden="true"></i>
785 + <span class="elementor-screen-only"><?php _e( 'Next', 'elementor' ); ?></span>
1055 786 </div>
1056 787 <?php endif; ?>
1057 -
1058 - <?php if ( $show_dots ) : ?>
1059 - <div class="swiper-pagination"></div>
1060 - <?php endif; ?>
1061 788 <?php endif; ?>
1062 789 </div>
1063 790 <?php
1064 791 }
@@ -1068,9 +795,9 @@
1068 795 *
1069 796 * @since 1.0.0
1070 797 * @access private
1071 798 *
1072 - * @param array $attachment
799 + * @param array $attachment
1073 800 * @param object $instance
1074 801 *
1075 802 * @return array|string|false An array/string containing the attachment URL, or false if no link.
1076 803 */
@@ -1110,12 +837,8 @@
1110 837 }
1111 838
1112 839 $attachment_post = get_post( $attachment['id'] );
1113 840
1114 - if ( Utils::has_invalid_post_permissions( $attachment_post ) ) {
1115 - return '';
1116 - }
1117 -
1118 841 if ( 'caption' === $caption_type ) {
1119 842 return $attachment_post->post_excerpt;
1120 843 }
1121 844
@@ -1122,45 +845,7 @@
1122 845 if ( 'title' === $caption_type ) {
1123 846 return $attachment_post->post_title;
1124 847 }
1125 848
1126 - if ( empty( $attachment_post->post_content ) ) {
1127 - return '';
1128 - }
1129 -
1130 849 return $attachment_post->post_content;
1131 - }
1132 -
1133 - private function render_swiper_button( $type ) {
1134 - $direction = 'next' === $type ? 'right' : 'left';
1135 - $icon_settings = $this->get_settings_for_display( 'navigation_' . $type . '_icon' );
1136 -
1137 - if ( empty( $icon_settings['value'] ) ) {
1138 - $icon_settings = [
1139 - 'library' => 'eicons',
1140 - 'value' => 'eicon-chevron-' . $direction,
1141 - ];
1142 - }
1143 -
1144 - Icons_Manager::render_icon( $icon_settings, [ 'aria-hidden' => 'true' ] );
1145 - }
1146 -
1147 - public function render_markdown(): string {
1148 - $settings = $this->get_settings_for_display();
1149 - if ( empty( $settings['carousel'] ) ) {
1150 - return '';
1151 - }
1152 - $images = [];
1153 - foreach ( $settings['carousel'] as $item ) {
1154 - $url = $item['url'] ?? '';
1155 - if ( empty( $url ) ) {
1156 - continue;
1157 - }
1158 - $alt = '';
1159 - if ( ! empty( $item['id'] ) ) {
1160 - $alt = get_post_meta( $item['id'], '_wp_attachment_image_alt', true );
1161 - }
1162 - $images[] = '![' . $alt . '](' . esc_url( $url ) . ')';
1163 - }
1164 - return implode( "\n\n", $images );
1165 850 }
1166 851 }