PluginProbe
Elementor Website Builder – more than just a page builder / 3.0.4
Elementor Website Builder – more than just a page builder v3.0.4
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 4.0.7 All 451 releases
← All changes | includes/widgets/image-carousel.php +140 -461 4.1.0-dev23.0.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,94 +72,28 @@
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 *
139 - * @since 3.1.0
81 + * @since 1.0.0
140 82 * @access protected
141 83 */
142 - protected function register_controls() {
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,49 @@
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 + ],
260 + 'render_type' => 'none',
449 261 'frontend_available' => true,
450 262 ]
451 263 );
452 264
@@ -452,14 +264,15 @@
452 264
453 265 $this->add_control(
454 266 'pause_on_hover',
455 267 [
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',
268 + 'label' => __( 'Pause on Hover', 'elementor' ),
269 + 'type' => Controls_Manager::SELECT,
461 270 'default' => 'yes',
271 + 'options' => [
272 + 'yes' => __( 'Yes', 'elementor' ),
273 + 'no' => __( 'No', 'elementor' ),
274 + ],
462 275 'condition' => [
463 276 'autoplay' => 'yes',
464 277 ],
465 278 'render_type' => 'none',
@@ -469,17 +282,19 @@
469 282
470 283 $this->add_control(
471 284 'pause_on_interaction',
472 285 [
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',
286 + 'label' => __( 'Pause on Interaction', 'elementor' ),
287 + 'type' => Controls_Manager::SELECT,
478 288 'default' => 'yes',
289 + 'options' => [
290 + 'yes' => __( 'Yes', 'elementor' ),
291 + 'no' => __( 'No', 'elementor' ),
292 + ],
479 293 'condition' => [
480 294 'autoplay' => 'yes',
481 295 ],
296 + 'render_type' => 'none',
482 297 'frontend_available' => true,
483 298 ]
484 299 );
485 300
@@ -485,9 +300,9 @@
485 300
486 301 $this->add_control(
487 302 'autoplay_speed',
488 303 [
489 - 'label' => esc_html__( 'Autoplay Speed', 'elementor' ),
304 + 'label' => __( 'Autoplay Speed', 'elementor' ),
490 305 'type' => Controls_Manager::NUMBER,
491 306 'default' => 5000,
492 307 'condition' => [
493 308 'autoplay' => 'yes',
@@ -500,14 +315,15 @@
500 315 // Loop requires a re-render so no 'render_type = none'
501 316 $this->add_control(
502 317 'infinite',
503 318 [
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',
319 + 'label' => __( 'Infinite Loop', 'elementor' ),
320 + 'type' => Controls_Manager::SELECT,
509 321 'default' => 'yes',
322 + 'options' => [
323 + 'yes' => __( 'Yes', 'elementor' ),
324 + 'no' => __( 'No', 'elementor' ),
325 + ],
510 326 'frontend_available' => true,
511 327 ]
512 328 );
513 329
@@ -513,14 +329,14 @@
513 329
514 330 $this->add_control(
515 331 'effect',
516 332 [
517 - 'label' => esc_html__( 'Effect', 'elementor' ),
333 + 'label' => __( 'Effect', 'elementor' ),
518 334 'type' => Controls_Manager::SELECT,
519 335 'default' => 'slide',
520 336 'options' => [
521 - 'slide' => esc_html__( 'Slide', 'elementor' ),
522 - 'fade' => esc_html__( 'Fade', 'elementor' ),
337 + 'slide' => __( 'Slide', 'elementor' ),
338 + 'fade' => __( 'Fade', 'elementor' ),
523 339 ],
524 340 'condition' => [
525 341 'slides_to_show' => '1',
526 342 ],
@@ -530,9 +346,9 @@
530 346
531 347 $this->add_control(
532 348 'speed',
533 349 [
534 - 'label' => esc_html__( 'Animation Speed', 'elementor' ),
350 + 'label' => __( 'Animation Speed', 'elementor' ),
535 351 'type' => Controls_Manager::NUMBER,
536 352 'default' => 500,
537 353 'render_type' => 'none',
538 354 'frontend_available' => true,
@@ -541,14 +357,14 @@
541 357
542 358 $this->add_control(
543 359 'direction',
544 360 [
545 - 'label' => esc_html__( 'Direction', 'elementor' ),
361 + 'label' => __( 'Direction', 'elementor' ),
546 362 'type' => Controls_Manager::SELECT,
547 363 'default' => 'ltr',
548 364 'options' => [
549 - 'ltr' => esc_html__( 'Left', 'elementor' ),
550 - 'rtl' => esc_html__( 'Right', 'elementor' ),
365 + 'ltr' => __( 'Left', 'elementor' ),
366 + 'rtl' => __( 'Right', 'elementor' ),
551 367 ],
552 368 ]
553 369 );
554 370
@@ -556,9 +372,9 @@
556 372
557 373 $this->start_controls_section(
558 374 'section_style_navigation',
559 375 [
560 - 'label' => esc_html__( 'Navigation', 'elementor' ),
376 + 'label' => __( 'Navigation', 'elementor' ),
561 377 'tab' => Controls_Manager::TAB_STYLE,
562 378 'condition' => [
563 379 'navigation' => [ 'arrows', 'dots', 'both' ],
564 380 ],
@@ -567,9 +383,9 @@
567 383
568 384 $this->add_control(
569 385 'heading_style_arrows',
570 386 [
571 - 'label' => esc_html__( 'Arrows', 'elementor' ),
387 + 'label' => __( 'Arrows', 'elementor' ),
572 388 'type' => Controls_Manager::HEADING,
573 389 'separator' => 'before',
574 390 'condition' => [
575 391 'navigation' => [ 'arrows', 'both' ],
@@ -579,14 +395,14 @@
579 395
580 396 $this->add_control(
581 397 'arrows_position',
582 398 [
583 - 'label' => esc_html__( 'Position', 'elementor' ),
399 + 'label' => __( 'Position', 'elementor' ),
584 400 'type' => Controls_Manager::SELECT,
585 401 'default' => 'inside',
586 402 'options' => [
587 - 'inside' => esc_html__( 'Inside', 'elementor' ),
588 - 'outside' => esc_html__( 'Outside', 'elementor' ),
403 + 'inside' => __( 'Inside', 'elementor' ),
404 + 'outside' => __( 'Outside', 'elementor' ),
589 405 ],
590 406 'prefix_class' => 'elementor-arrows-position-',
591 407 'condition' => [
592 408 'navigation' => [ 'arrows', 'both' ],
@@ -593,17 +409,17 @@
593 409 ],
594 410 ]
595 411 );
596 412
597 - $this->add_responsive_control(
413 + $this->add_control(
598 414 'arrows_size',
599 415 [
600 - 'label' => esc_html__( 'Size', 'elementor' ),
416 + 'label' => __( 'Size', 'elementor' ),
601 417 'type' => Controls_Manager::SLIDER,
602 - 'size_units' => [ 'px', 'em', 'rem', 'custom' ],
603 418 'range' => [
604 419 'px' => [
605 - 'max' => 100,
420 + 'min' => 20,
421 + 'max' => 60,
606 422 ],
607 423 ],
608 424 'selectors' => [
609 425 '{{WRAPPER}} .elementor-swiper-button.elementor-swiper-button-prev, {{WRAPPER}} .elementor-swiper-button.elementor-swiper-button-next' => 'font-size: {{SIZE}}{{UNIT}};',
@@ -616,13 +432,12 @@
616 432
617 433 $this->add_control(
618 434 'arrows_color',
619 435 [
620 - 'label' => esc_html__( 'Color', 'elementor' ),
436 + 'label' => __( 'Color', 'elementor' ),
621 437 'type' => Controls_Manager::COLOR,
622 438 'selectors' => [
623 439 '{{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 440 ],
626 441 'condition' => [
627 442 'navigation' => [ 'arrows', 'both' ],
628 443 ],
@@ -631,9 +446,9 @@
631 446
632 447 $this->add_control(
633 448 'heading_style_dots',
634 449 [
635 - 'label' => esc_html__( 'Pagination', 'elementor' ),
450 + 'label' => __( 'Dots', 'elementor' ),
636 451 'type' => Controls_Manager::HEADING,
637 452 'separator' => 'before',
638 453 'condition' => [
639 454 'navigation' => [ 'dots', 'both' ],
@@ -643,14 +458,14 @@
643 458
644 459 $this->add_control(
645 460 'dots_position',
646 461 [
647 - 'label' => esc_html__( 'Position', 'elementor' ),
462 + 'label' => __( 'Position', 'elementor' ),
648 463 'type' => Controls_Manager::SELECT,
649 464 'default' => 'outside',
650 465 'options' => [
651 - 'outside' => esc_html__( 'Outside', 'elementor' ),
652 - 'inside' => esc_html__( 'Inside', 'elementor' ),
466 + 'outside' => __( 'Outside', 'elementor' ),
467 + 'inside' => __( 'Inside', 'elementor' ),
653 468 ],
654 469 'prefix_class' => 'elementor-pagination-position-',
655 470 'condition' => [
656 471 'navigation' => [ 'dots', 'both' ],
@@ -657,37 +472,17 @@
657 472 ],
658 473 ]
659 474 );
660 475
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(
476 + $this->add_control(
682 477 'dots_size',
683 478 [
684 - 'label' => esc_html__( 'Size', 'elementor' ),
479 + 'label' => __( 'Size', 'elementor' ),
685 480 'type' => Controls_Manager::SLIDER,
686 - 'size_units' => [ 'px', 'em', 'rem', 'custom' ],
687 481 'range' => [
688 482 'px' => [
689 - 'max' => 20,
483 + 'min' => 5,
484 + 'max' => 10,
690 485 ],
691 486 ],
692 487 'selectors' => [
693 488 '{{WRAPPER}} .swiper-pagination-bullet' => 'width: {{SIZE}}{{UNIT}}; height: {{SIZE}}{{UNIT}};',
@@ -698,26 +493,11 @@
698 493 ]
699 494 );
700 495
701 496 $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 497 'dots_color',
718 498 [
719 - 'label' => esc_html__( 'Active Color', 'elementor' ),
499 + 'label' => __( 'Color', 'elementor' ),
720 500 'type' => Controls_Manager::COLOR,
721 501 'selectors' => [
722 502 '{{WRAPPER}} .swiper-pagination-bullet' => 'background: {{VALUE}};',
723 503 ],
@@ -731,9 +511,9 @@
731 511
732 512 $this->start_controls_section(
733 513 'section_style_image',
734 514 [
735 - 'label' => esc_html__( 'Image', 'elementor' ),
515 + 'label' => __( 'Image', 'elementor' ),
736 516 'tab' => Controls_Manager::TAB_STYLE,
737 517 ]
738 518 );
739 519
@@ -739,21 +519,21 @@
739 519
740 520 $this->add_responsive_control(
741 521 'gallery_vertical_align',
742 522 [
743 - 'label' => esc_html__( 'Vertical Align', 'elementor' ),
523 + 'label' => __( 'Vertical Align', 'elementor' ),
744 524 'type' => Controls_Manager::CHOOSE,
745 525 'options' => [
746 526 'flex-start' => [
747 - 'title' => esc_html__( 'Start', 'elementor' ),
527 + 'title' => __( 'Start', 'elementor' ),
748 528 'icon' => 'eicon-v-align-top',
749 529 ],
750 530 'center' => [
751 - 'title' => esc_html__( 'Center', 'elementor' ),
531 + 'title' => __( 'Center', 'elementor' ),
752 532 'icon' => 'eicon-v-align-middle',
753 533 ],
754 534 'flex-end' => [
755 - 'title' => esc_html__( 'End', 'elementor' ),
535 + 'title' => __( 'End', 'elementor' ),
756 536 'icon' => 'eicon-v-align-bottom',
757 537 ],
758 538 ],
759 539 'condition' => [
@@ -767,13 +547,13 @@
767 547
768 548 $this->add_control(
769 549 'image_spacing',
770 550 [
771 - 'label' => esc_html__( 'Spacing', 'elementor' ),
551 + 'label' => __( 'Spacing', 'elementor' ),
772 552 'type' => Controls_Manager::SELECT,
773 553 'options' => [
774 - '' => esc_html__( 'Default', 'elementor' ),
775 - 'custom' => esc_html__( 'Custom', 'elementor' ),
554 + '' => __( 'Default', 'elementor' ),
555 + 'custom' => __( 'Custom', 'elementor' ),
776 556 ],
777 557 'default' => '',
778 558 'condition' => [
779 559 'slides_to_show!' => '1',
@@ -780,14 +560,13 @@
780 560 ],
781 561 ]
782 562 );
783 563
784 - $this->add_responsive_control(
564 + $this->add_control(
785 565 'image_spacing_custom',
786 566 [
787 - 'label' => esc_html__( 'Image Spacing', 'elementor' ),
567 + 'label' => __( 'Image Spacing', 'elementor' ),
788 568 'type' => Controls_Manager::SLIDER,
789 - 'size_units' => [ 'px' ],
790 569 'range' => [
791 570 'px' => [
792 571 'max' => 100,
793 572 ],
@@ -794,8 +573,9 @@
794 573 ],
795 574 'default' => [
796 575 'size' => 20,
797 576 ],
577 + 'show_label' => false,
798 578 'condition' => [
799 579 'image_spacing' => 'custom',
800 580 'slides_to_show!' => '1',
801 581 ],
@@ -812,14 +592,14 @@
812 592 'selector' => '{{WRAPPER}} .elementor-image-carousel-wrapper .elementor-image-carousel .swiper-slide-image',
813 593 ]
814 594 );
815 595
816 - $this->add_responsive_control(
596 + $this->add_control(
817 597 'image_border_radius',
818 598 [
819 - 'label' => esc_html__( 'Border Radius', 'elementor' ),
599 + 'label' => __( 'Border Radius', 'elementor' ),
820 600 'type' => Controls_Manager::DIMENSIONS,
821 - 'size_units' => [ 'px', '%', 'em', 'rem', 'custom' ],
601 + 'size_units' => [ 'px', '%' ],
822 602 'selectors' => [
823 603 '{{WRAPPER}} .elementor-image-carousel-wrapper .elementor-image-carousel .swiper-slide-image' => 'border-radius: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}};',
824 604 ],
825 605 ]
@@ -829,9 +609,9 @@
829 609
830 610 $this->start_controls_section(
831 611 'section_caption',
832 612 [
833 - 'label' => esc_html__( 'Caption', 'elementor' ),
613 + 'label' => __( 'Caption', 'elementor' ),
834 614 'tab' => Controls_Manager::TAB_STYLE,
835 615 'condition' => [
836 616 'caption_type!' => '',
837 617 ],
@@ -837,36 +617,31 @@
837 617 ],
838 618 ]
839 619 );
840 620
841 - $this->add_responsive_control(
621 + $this->add_control(
842 622 'caption_align',
843 623 [
844 - 'label' => esc_html__( 'Alignment', 'elementor' ),
624 + 'label' => __( 'Alignment', 'elementor' ),
845 625 'type' => Controls_Manager::CHOOSE,
846 626 'options' => [
847 - 'start' => [
848 - 'title' => esc_html__( 'Start', 'elementor' ),
627 + 'left' => [
628 + 'title' => __( 'Left', 'elementor' ),
849 629 'icon' => 'eicon-text-align-left',
850 630 ],
851 631 'center' => [
852 - 'title' => esc_html__( 'Center', 'elementor' ),
632 + 'title' => __( 'Center', 'elementor' ),
853 633 'icon' => 'eicon-text-align-center',
854 634 ],
855 - 'end' => [
856 - 'title' => esc_html__( 'End', 'elementor' ),
635 + 'right' => [
636 + 'title' => __( 'Right', 'elementor' ),
857 637 'icon' => 'eicon-text-align-right',
858 638 ],
859 639 'justify' => [
860 - 'title' => esc_html__( 'Justified', 'elementor' ),
640 + 'title' => __( 'Justified', 'elementor' ),
861 641 'icon' => 'eicon-text-align-justify',
862 642 ],
863 643 ],
864 - 'classes' => 'elementor-control-start-end',
865 - 'selectors_dictionary' => [
866 - 'left' => is_rtl() ? 'end' : 'start',
867 - 'right' => is_rtl() ? 'start' : 'end',
868 - ],
869 644 'default' => 'center',
870 645 'selectors' => [
871 646 '{{WRAPPER}} .elementor-image-carousel-caption' => 'text-align: {{VALUE}};',
872 647 ],
@@ -875,9 +650,9 @@
875 650
876 651 $this->add_control(
877 652 'caption_text_color',
878 653 [
879 - 'label' => esc_html__( 'Text Color', 'elementor' ),
654 + 'label' => __( 'Text Color', 'elementor' ),
880 655 'type' => Controls_Manager::COLOR,
881 656 'default' => '',
882 657 'selectors' => [
883 658 '{{WRAPPER}} .elementor-image-carousel-caption' => 'color: {{VALUE}};',
@@ -895,29 +670,10 @@
895 670 'selector' => '{{WRAPPER}} .elementor-image-carousel-caption',
896 671 ]
897 672 );
898 673
899 - $this->add_group_control(
900 - Group_Control_Text_Shadow::get_type(),
901 - [
902 - 'name' => 'caption_shadow',
903 - 'selector' => '{{WRAPPER}} .elementor-image-carousel-caption',
904 - ]
905 - );
674 + $this->end_controls_section();
906 675
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 - );
918 -
919 - $this->end_controls_section();
920 676 }
921 677
922 678 /**
923 679 * Render image carousel widget output on the frontend.
@@ -929,10 +685,8 @@
929 685 */
930 686 protected function render() {
931 687 $settings = $this->get_settings_for_display();
932 688
933 - $lazyload = 'yes' === $settings['lazyload'];
934 -
935 689 if ( empty( $settings['carousel'] ) ) {
936 690 return;
937 691 }
938 692
@@ -940,18 +694,10 @@
940 694
941 695 foreach ( $settings['carousel'] as $index => $attachment ) {
942 696 $image_url = Group_Control_Image_Size::get_attachment_image_src( $attachment['id'], 'thumbnail', $settings );
943 697
944 - if ( ! $image_url && isset( $attachment['url'] ) ) {
945 - $image_url = $attachment['url'];
946 - }
698 + $image_html = '<img class="swiper-slide-image" src="' . esc_attr( $image_url ) . '" alt="' . esc_attr( Control_Media::get_image_alt( $attachment ) ) . '" />';
947 699
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 700 $link_tag = '';
955 701
956 702 $link = $this->get_link_url( $attachment, $settings );
957 703
@@ -972,31 +718,12 @@
972 718 }
973 719
974 720 $image_caption = $this->get_image_caption( $attachment );
975 721
976 - $slide_count = $index + 1;
977 - $slide_setting_key = 'swiper_slide_' . $index;
722 + $slide_html = '<div class="swiper-slide">' . $link_tag . '<figure class="swiper-slide-inner">' . $image_html;
978 723
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 724 if ( ! empty( $image_caption ) ) {
998 - $slide_html .= '<figcaption class="elementor-image-carousel-caption">' . wp_kses_post( $image_caption ) . '</figcaption>';
725 + $slide_html .= '<figcaption class="elementor-image-carousel-caption">' . $image_caption . '</figcaption>';
999 726 }
1000 727
1001 728 $slide_html .= '</figure>';
1002 729
@@ -1013,21 +740,14 @@
1013 740 if ( empty( $slides ) ) {
1014 741 return;
1015 742 }
1016 743
1017 - $swiper_class = 'swiper';
1018 - $has_autoplay_enabled = 'yes' === $this->get_settings_for_display( 'autoplay' );
1019 -
1020 744 $this->add_render_attribute( [
1021 745 'carousel' => [
1022 746 'class' => 'elementor-image-carousel swiper-wrapper',
1023 - 'aria-live' => $has_autoplay_enabled ? 'off' : 'polite',
1024 747 ],
1025 748 'carousel-wrapper' => [
1026 - 'class' => 'elementor-image-carousel-wrapper ' . $swiper_class,
1027 - 'role' => 'region',
1028 - 'aria-roledescription' => 'carousel',
1029 - 'aria-label' => $settings['carousel_name'],
749 + 'class' => 'elementor-image-carousel-wrapper swiper-container',
1030 750 'dir' => $settings['direction'],
1031 751 ],
1032 752 ] );
1033 753
@@ -1038,27 +758,28 @@
1038 758 $this->add_render_attribute( 'carousel', 'class', 'swiper-image-stretch' );
1039 759 }
1040 760
1041 761 $slides_count = count( $settings['carousel'] );
762 +
1042 763 ?>
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 ?>
764 + <div <?php echo $this->get_render_attribute_string( 'carousel-wrapper' ); ?>>
765 + <div <?php echo $this->get_render_attribute_string( 'carousel' ); ?>>
766 + <?php echo implode( '', $slides ); ?>
1047 767 </div>
1048 768 <?php if ( 1 < $slides_count ) : ?>
769 + <?php if ( $show_dots ) : ?>
770 + <div class="swiper-pagination"></div>
771 + <?php endif; ?>
1049 772 <?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' ); ?>
773 + <div class="elementor-swiper-button elementor-swiper-button-prev">
774 + <i class="eicon-chevron-left" aria-hidden="true"></i>
775 + <span class="elementor-screen-only"><?php _e( 'Previous', 'elementor' ); ?></span>
1052 776 </div>
1053 - <div class="elementor-swiper-button elementor-swiper-button-next" role="button" tabindex="0">
1054 - <?php $this->render_swiper_button( 'next' ); ?>
777 + <div class="elementor-swiper-button elementor-swiper-button-next">
778 + <i class="eicon-chevron-right" aria-hidden="true"></i>
779 + <span class="elementor-screen-only"><?php _e( 'Next', 'elementor' ); ?></span>
1055 780 </div>
1056 781 <?php endif; ?>
1057 -
1058 - <?php if ( $show_dots ) : ?>
1059 - <div class="swiper-pagination"></div>
1060 - <?php endif; ?>
1061 782 <?php endif; ?>
1062 783 </div>
1063 784 <?php
1064 785 }
@@ -1068,9 +789,9 @@
1068 789 *
1069 790 * @since 1.0.0
1070 791 * @access private
1071 792 *
1072 - * @param array $attachment
793 + * @param array $attachment
1073 794 * @param object $instance
1074 795 *
1075 796 * @return array|string|false An array/string containing the attachment URL, or false if no link.
1076 797 */
@@ -1110,12 +831,8 @@
1110 831 }
1111 832
1112 833 $attachment_post = get_post( $attachment['id'] );
1113 834
1114 - if ( Utils::has_invalid_post_permissions( $attachment_post ) ) {
1115 - return '';
1116 - }
1117 -
1118 835 if ( 'caption' === $caption_type ) {
1119 836 return $attachment_post->post_excerpt;
1120 837 }
1121 838
@@ -1122,45 +839,7 @@
1122 839 if ( 'title' === $caption_type ) {
1123 840 return $attachment_post->post_title;
1124 841 }
1125 842
1126 - if ( empty( $attachment_post->post_content ) ) {
1127 - return '';
1128 - }
1129 -
1130 843 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 844 }
1166 845 }