← All changes | includes/widgets/Team_Member_Slider/Team_Member_Slider.php +688 -0 51.1.2 → 51.1.87 View file →

		@@ -1,0 +1,688 @@
	1	+<?php
	2	+/**
	3	+ * Team Member Slider Widget
	4	+ *
	5	+ * @package King_Addons
	6	+ */
	7	+namespace King_Addons;
	8	+
	9	+use Elementor\Controls_Manager;
	10	+use Elementor\Group_Control_Image_Size;
	11	+use Elementor\Group_Control_Typography;
	12	+use Elementor\Group_Control_Border;
	13	+use Elementor\Group_Control_Box_Shadow;
	14	+use Elementor\Group_Control_Css_Filter;
	15	+use Elementor\Repeater;
	16	+use Elementor\Utils;
	17	+use Elementor\Widget_Base;
	18	+
	19	+if (!defined('ABSPATH')) {
	20	+ exit; // Exit if accessed directly.
	21	+}
	22	+
	23	+
	24	+
	25	+class Team_Member_Slider extends Widget_Base {
	26	+
	27	+
	28	+ public function get_name(): string {
	29	+ return 'king-addons-team-member-slider';
	30	+ }
	31	+
	32	+ public function get_title(): string {
	33	+ return esc_html__('Team Member Slider', 'king-addons');
	34	+ }
	35	+
	36	+ public function get_icon(): string {
	37	+ return 'king-addons-icon king-addons-team-member-slider';
	38	+ }
	39	+
	40	+ public function get_script_depends(): array {
	41	+ return [
	42	+ KING_ADDONS_ASSETS_UNIQUE_KEY . '-swiper-swiper',
	43	+ KING_ADDONS_ASSETS_UNIQUE_KEY . '-team-member-slider-script',
	44	+ ];
	45	+ }
	46	+
	47	+ public function get_style_depends(): array {
	48	+ return [
	49	+ KING_ADDONS_ASSETS_UNIQUE_KEY . '-swiper-swiper',
	50	+ KING_ADDONS_ASSETS_UNIQUE_KEY . '-team-member-slider-style',
	51	+ ];
	52	+ }
	53	+
	54	+ public function get_categories(): array {
	55	+ return ['king-addons'];
	56	+ }
	57	+
	58	+ public function get_keywords(): array {
	59	+ return ['team', 'members', 'slider', 'carousel', 'staff', 'profile'];
	60	+ }
	61	+
	62	+ public function get_custom_help_url()
	63	+ {
	64	+ return 'mailto:[email protected]?subject=Bug Report - King Addons&body=Please describe the issue';
	65	+ }
	66	+
	67	+ protected function register_controls(): void {
	68	+ // Slider behavior settings
	69	+ $this->start_controls_section(
	70	+ 'section_slider_settings',
	71	+ [
	72	+ 'label' => esc_html__('Slider Settings', 'king-addons'),
	73	+ 'tab' => Controls_Manager::TAB_CONTENT,
	74	+ ]
	75	+ );
	76	+ $this->add_control(
	77	+ 'slides_per_view',
	78	+ [
	79	+ 'label' => esc_html__('Slides Per View', 'king-addons'),
	80	+ 'type' => Controls_Manager::NUMBER,
	81	+ 'min' => 1,
	82	+ 'max' => 6,
	83	+ 'step' => 1,
	84	+ 'default' => 4,
	85	+ ]
	86	+ );
	87	+ $this->add_control(
	88	+ 'slides_per_view_tablet',
	89	+ [
	90	+ 'label' => esc_html__('Slides Per View (Tablet)', 'king-addons'),
	91	+ 'type' => Controls_Manager::NUMBER,
	92	+ 'min' => 1,
	93	+ 'max' => 6,
	94	+ 'step' => 1,
	95	+ 'default' => 3,
	96	+ ]
	97	+ );
	98	+ $this->add_control(
	99	+ 'slides_per_view_mobile',
	100	+ [
	101	+ 'label' => esc_html__('Slides Per View (Mobile)', 'king-addons'),
	102	+ 'type' => Controls_Manager::NUMBER,
	103	+ 'min' => 1,
	104	+ 'max' => 6,
	105	+ 'step' => 1,
	106	+ 'default' => 1,
	107	+ ]
	108	+ );
	109	+ $this->add_control(
	110	+ 'space_between',
	111	+ [
	112	+ 'label' => esc_html__('Space Between (px)', 'king-addons'),
	113	+ 'type' => Controls_Manager::SLIDER,
	114	+ 'size_units' => ['px'],
	115	+ 'range' => [
	116	+ 'px' => [
	117	+ 'min' => 0,
	118	+ 'max' => 100,
	119	+ ],
	120	+ ],
	121	+ 'default' => [
	122	+ 'size' => 30,
	123	+ 'unit' => 'px',
	124	+ ],
	125	+ ]
	126	+ );
	127	+ $this->add_control(
	128	+ 'loop',
	129	+ [
	130	+ 'label' => esc_html__('Loop', 'king-addons'),
	131	+ 'type' => Controls_Manager::SWITCHER,
	132	+ 'label_on' => esc_html__('Yes', 'king-addons'),
	133	+ 'label_off' => esc_html__('No', 'king-addons'),
	134	+ 'return_value' => 'yes',
	135	+ 'default' => '',
	136	+ ]
	137	+ );
	138	+ $this->add_control(
	139	+ 'autoplay',
	140	+ [
	141	+ 'label' => esc_html__('Autoplay', 'king-addons'),
	142	+ 'type' => Controls_Manager::SWITCHER,
	143	+ 'label_on' => esc_html__('Yes', 'king-addons'),
	144	+ 'label_off' => esc_html__('No', 'king-addons'),
	145	+ 'return_value' => 'yes',
	146	+ 'default' => '',
	147	+ ]
	148	+ );
	149	+ $this->add_control(
	150	+ 'autoplay_delay',
	151	+ [
	152	+ 'label' => esc_html__('Autoplay Delay (ms)', 'king-addons'),
	153	+ 'type' => Controls_Manager::NUMBER,
	154	+ 'min' => 0,
	155	+ 'step' => 100,
	156	+ 'default' => 2000,
	157	+ 'condition' => [
	158	+ 'autoplay' => 'yes',
	159	+ ],
	160	+ ]
	161	+ );
	162	+ $this->add_control(
	163	+ 'autoplay_reverse',
	164	+ [
	165	+ 'label' => esc_html__('Reverse Autoplay Direction', 'king-addons'),
	166	+ 'type' => Controls_Manager::SWITCHER,
	167	+ 'label_on' => esc_html__('Yes', 'king-addons'),
	168	+ 'label_off' => esc_html__('No', 'king-addons'),
	169	+ 'return_value' => 'yes',
	170	+ 'default' => '',
	171	+ 'condition' => [
	172	+ 'autoplay' => 'yes',
	173	+ ],
	174	+ ]
	175	+ );
	176	+ $this->add_control(
	177	+ 'speed',
	178	+ [
	179	+ 'label' => esc_html__('Transition Speed (ms)', 'king-addons'),
	180	+ 'type' => Controls_Manager::NUMBER,
	181	+ 'min' => 0,
	182	+ 'step' => 100,
	183	+ 'default' => 600,
	184	+ ]
	185	+ );
	186	+ $this->add_control(
	187	+ 'pagination',
	188	+ [
	189	+ 'label' => esc_html__('Pagination', 'king-addons'),
	190	+ 'type' => Controls_Manager::SWITCHER,
	191	+ 'return_value' => 'yes',
	192	+ 'default' => 'yes',
	193	+ ]
	194	+ );
	195	+ $this->add_control(
	196	+ 'navigation',
	197	+ [
	198	+ 'label' => esc_html__('Navigation Arrows', 'king-addons'),
	199	+ 'type' => Controls_Manager::SWITCHER,
	200	+ 'return_value' => 'yes',
	201	+ 'default' => 'yes',
	202	+ ]
	203	+ );
	204	+ $this->end_controls_section();
	205	+
	206	+ // Style: Slide
	207	+ $this->start_controls_section(
	208	+ 'section_style_slide',
	209	+ [
	210	+ 'label' => esc_html__('Slide', 'king-addons'),
	211	+ 'tab' => Controls_Manager::TAB_STYLE,
	212	+ ]
	213	+ );
	214	+ $this->add_responsive_control(
	215	+ 'slide_padding',
	216	+ [
	217	+ 'label' => esc_html__('Padding', 'king-addons'),
	218	+ 'type' => Controls_Manager::DIMENSIONS,
	219	+ 'size_units' => ['px', '%', 'em'],
	220	+ 'selectors' => [
	221	+ '{{WRAPPER}} .king-addons-tms-item' => 'padding: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}};',
	222	+ ],
	223	+ ]
	224	+ );
	225	+ $this->add_control(
	226	+ 'slide_bg_color',
	227	+ [
	228	+ 'label' => esc_html__('Background Color', 'king-addons'),
	229	+ 'type' => Controls_Manager::COLOR,
	230	+ 'selectors' => [
	231	+ '{{WRAPPER}} .king-addons-tms-item' => 'background-color: {{VALUE}};',
	232	+ ],
	233	+ ]
	234	+ );
	235	+ $this->add_group_control(
	236	+ Group_Control_Border::get_type(),
	237	+ [
	238	+ 'name' => 'slide_border',
	239	+ 'selector' => '{{WRAPPER}} .king-addons-tms-item',
	240	+ ]
	241	+ );
	242	+ $this->add_control(
	243	+ 'slide_border_radius',
	244	+ [
	245	+ 'label' => esc_html__('Border Radius', 'king-addons'),
	246	+ 'type' => Controls_Manager::SLIDER,
	247	+ 'size_units' => ['px', '%'],
	248	+ 'range' => [
	249	+ 'px' => ['min' => 0, 'max' => 200],
	250	+ '%' => ['min' => 0, 'max' => 100],
	251	+ ],
	252	+ 'selectors' => [
	253	+ '{{WRAPPER}} .king-addons-tms-item' => 'border-radius: {{SIZE}}{{UNIT}};',
	254	+ ],
	255	+ ]
	256	+ );
	257	+ $this->add_group_control(
	258	+ Group_Control_Box_Shadow::get_type(),
	259	+ [
	260	+ 'name' => 'slide_box_shadow',
	261	+ 'selector' => '{{WRAPPER}} .king-addons-tms-item',
	262	+ ]
	263	+ );
	264	+ $this->end_controls_section();
	265	+
	266	+ // Style: Photo
	267	+ $this->start_controls_section(
	268	+ 'section_style_photo',
	269	+ [
	270	+ 'label' => esc_html__('Photo', 'king-addons'),
	271	+ 'tab' => Controls_Manager::TAB_STYLE,
	272	+ ]
	273	+ );
	274	+ $this->add_group_control(
	275	+ Group_Control_Image_Size::get_type(),
	276	+ [
	277	+ 'name' => 'photo_size',
	278	+ 'default' => 'thumbnail',
	279	+ 'separator' => 'none',
	280	+ ]
	281	+ );
	282	+ $this->add_responsive_control(
	283	+ 'photo_width',
	284	+ [
	285	+ 'label' => esc_html__('Width', 'king-addons'),
	286	+ 'type' => Controls_Manager::SLIDER,
	287	+ 'size_units' => ['px', '%', 'em'],
	288	+ 'range' => [
	289	+ 'px' => ['min' => 0, 'max' => 1000],
	290	+ '%' => ['min' => 0, 'max' => 100],
	291	+ 'em' => ['min' => 0, 'max' => 10],
	292	+ ],
	293	+ 'selectors' => [
	294	+ '{{WRAPPER}} .king-addons-tms-photo img' => 'width: {{SIZE}}{{UNIT}};',
	295	+ ],
	296	+ ]
	297	+ );
	298	+ $this->add_responsive_control(
	299	+ 'photo_height',
	300	+ [
	301	+ 'label' => esc_html__('Height', 'king-addons'),
	302	+ 'type' => Controls_Manager::SLIDER,
	303	+ 'size_units' => ['px', '%', 'em'],
	304	+ 'range' => [
	305	+ 'px' => ['min' => 0, 'max' => 1000],
	306	+ '%' => ['min' => 0, 'max' => 100],
	307	+ 'em' => ['min' => 0, 'max' => 10],
	308	+ ],
	309	+ 'selectors' => [
	310	+ '{{WRAPPER}} .king-addons-tms-photo img' => 'height: {{SIZE}}{{UNIT}};',
	311	+ ],
	312	+ ]
	313	+ );
	314	+ $this->add_control(
	315	+ 'photo_fit',
	316	+ [
	317	+ 'label' => esc_html__('Image Fit', 'king-addons'),
	318	+ 'type' => Controls_Manager::SELECT,
	319	+ 'options' => [
	320	+ 'cover' => esc_html__('Cover', 'king-addons'),
	321	+ 'contain' => esc_html__('Contain', 'king-addons'),
	322	+ 'fill' => esc_html__('Fill', 'king-addons'),
	323	+ 'none' => esc_html__('None', 'king-addons'),
	324	+ ],
	325	+ 'default' => 'cover',
	326	+ 'selectors' => [
	327	+ '{{WRAPPER}} .king-addons-tms-photo img' => 'object-fit: {{VALUE}};',
	328	+ ],
	329	+ ]
	330	+ );
	331	+ $this->add_control(
	332	+ 'photo_border_radius',
	333	+ [
	334	+ 'label' => esc_html__('Border Radius', 'king-addons'),
	335	+ 'type' => Controls_Manager::SLIDER,
	336	+ 'size_units' => ['px', '%'],
	337	+ 'range' => [
	338	+ 'px' => ['min' => 0, 'max' => 200],
	339	+ '%' => ['min' => 0, 'max' => 100],
	340	+ ],
	341	+ 'selectors' => [
	342	+ '{{WRAPPER}} .king-addons-tms-photo img' => 'border-radius: {{SIZE}}{{UNIT}};',
	343	+ ],
	344	+ ]
	345	+ );
	346	+ $this->add_group_control(
	347	+ Group_Control_Box_Shadow::get_type(),
	348	+ [
	349	+ 'name' => 'photo_box_shadow',
	350	+ 'selector' => '{{WRAPPER}} .king-addons-tms-photo img',
	351	+ ]
	352	+ );
	353	+
	354	+ $this->add_group_control(
	355	+ Group_Control_Css_Filter::get_type(),
	356	+ [
	357	+ 'name' => 'kng_photo_css_filters',
	358	+ 'label' => esc_html__('CSS Filters', 'king-addons'),
	359	+ 'selector' => '{{WRAPPER}} .king-addons-tms-photo img',
	360	+ 'separator' => 'before',
	361	+ ]
	362	+ );
	363	+
	364	+ $this->add_group_control(
	365	+ Group_Control_Css_Filter::get_type(),
	366	+ [
	367	+ 'name' => 'kng_photo_css_filters_hover',
	368	+ 'label' => esc_html__('CSS Filters on Hover', 'king-addons'),
	369	+ 'selector' => '{{WRAPPER}} .king-addons-tms-photo:hover img',
	370	+ ]
	371	+ );
	372	+
	373	+ $this->end_controls_section();
	374	+
	375	+ // Style: Name
	376	+ $this->start_controls_section(
	377	+ 'section_style_name',
	378	+ [
	379	+ 'label' => esc_html__('Name', 'king-addons'),
	380	+ 'tab' => Controls_Manager::TAB_STYLE,
	381	+ ]
	382	+ );
	383	+ $this->add_group_control(
	384	+ Group_Control_Typography::get_type(),
	385	+ [
	386	+ 'name' => 'name_typography',
	387	+ 'selector' => '{{WRAPPER}} .king-addons-tms-name',
	388	+ ]
	389	+ );
	390	+ $this->add_control(
	391	+ 'name_color',
	392	+ [
	393	+ 'label' => esc_html__('Color', 'king-addons'),
	394	+ 'type' => Controls_Manager::COLOR,
	395	+ 'selectors' => [
	396	+ '{{WRAPPER}} .king-addons-tms-name' => 'color: {{VALUE}};',
	397	+ ],
	398	+ ]
	399	+ );
	400	+ $this->end_controls_section();
	401	+
	402	+ // Style: Role
	403	+ $this->start_controls_section(
	404	+ 'section_style_role',
	405	+ [
	406	+ 'label' => esc_html__('Role', 'king-addons'),
	407	+ 'tab' => Controls_Manager::TAB_STYLE,
	408	+ ]
	409	+ );
	410	+ $this->add_group_control(
	411	+ Group_Control_Typography::get_type(),
	412	+ [
	413	+ 'name' => 'role_typography',
	414	+ 'selector' => '{{WRAPPER}} .king-addons-tms-role',
	415	+ ]
	416	+ );
	417	+ $this->add_control(
	418	+ 'role_color',
	419	+ [
	420	+ 'label' => esc_html__('Color', 'king-addons'),
	421	+ 'type' => Controls_Manager::COLOR,
	422	+ 'selectors' => [
	423	+ '{{WRAPPER}} .king-addons-tms-role' => 'color: {{VALUE}};',
	424	+ ],
	425	+ ]
	426	+ );
	427	+ $this->end_controls_section();
	428	+
	429	+ // Style: Bio
	430	+ $this->start_controls_section(
	431	+ 'section_style_bio',
	432	+ [
	433	+ 'label' => esc_html__('Bio', 'king-addons'),
	434	+ 'tab' => Controls_Manager::TAB_STYLE,
	435	+ ]
	436	+ );
	437	+ $this->add_group_control(
	438	+ Group_Control_Typography::get_type(),
	439	+ [
	440	+ 'name' => 'bio_typography',
	441	+ 'selector' => '{{WRAPPER}} .king-addons-tms-bio',
	442	+ ]
	443	+ );
	444	+ $this->add_control(
	445	+ 'bio_color',
	446	+ [
	447	+ 'label' => esc_html__('Color', 'king-addons'),
	448	+ 'type' => Controls_Manager::COLOR,
	449	+ 'selectors' => [
	450	+ '{{WRAPPER}} .king-addons-tms-bio' => 'color: {{VALUE}};',
	451	+ ],
	452	+ ]
	453	+ );
	454	+ $this->end_controls_section();
	455	+
	456	+ // Style: Pagination
	457	+ $this->start_controls_section(
	458	+ 'section_style_pagination',
	459	+ [
	460	+ 'label' => esc_html__('Pagination', 'king-addons'),
	461	+ 'tab' => Controls_Manager::TAB_STYLE,
	462	+ ]
	463	+ );
	464	+ $this->add_control(
	465	+ 'pagination_bullet_size',
	466	+ [
	467	+ 'label' => esc_html__('Bullet Size (px)', 'king-addons'),
	468	+ 'type' => Controls_Manager::SLIDER,
	469	+ 'range' => [
	470	+ 'px' => [ 'min' => 4, 'max' => 20 ],
	471	+ ],
	472	+ 'selectors' => [
	473	+ '{{WRAPPER}} .swiper-pagination-bullet' => 'width: {{SIZE}}{{UNIT}}; height: {{SIZE}}{{UNIT}};',
	474	+ ],
	475	+ ]
	476	+ );
	477	+ $this->add_control(
	478	+ 'pagination_bullet_color',
	479	+ [
	480	+ 'label' => esc_html__('Bullet Color', 'king-addons'),
	481	+ 'type' => Controls_Manager::COLOR,
	482	+ 'selectors' => [
	483	+ '{{WRAPPER}} .swiper-pagination-bullet' => 'background: {{VALUE}};',
	484	+ ],
	485	+ ]
	486	+ );
	487	+ $this->add_control(
	488	+ 'pagination_bullet_active_color',
	489	+ [
	490	+ 'label' => esc_html__('Bullet Active Color', 'king-addons'),
	491	+ 'type' => Controls_Manager::COLOR,
	492	+ 'selectors' => [
	493	+ '{{WRAPPER}} .swiper-pagination-bullet-active' => 'background: {{VALUE}};',
	494	+ ],
	495	+ ]
	496	+ );
	497	+ // Pagination position (inside/outside)
	498	+ $this->add_control(
	499	+ 'pagination_position',
	500	+ [
	501	+ 'label' => esc_html__('Pagination Position', 'king-addons'),
	502	+ 'type' => Controls_Manager::SELECT,
	503	+ 'options' => [
	504	+ 'inside' => esc_html__('Inside', 'king-addons'),
	505	+ 'outside' => esc_html__('Outside', 'king-addons'),
	506	+ ],
	507	+ 'default' => 'inside',
	508	+ ]
	509	+ );
	510	+ $this->end_controls_section();
	511	+
	512	+ // Style: Navigation
	513	+ $this->start_controls_section(
	514	+ 'section_style_navigation',
	515	+ [
	516	+ 'label' => esc_html__('Navigation', 'king-addons'),
	517	+ 'tab' => Controls_Manager::TAB_STYLE,
	518	+ ]
	519	+ );
	520	+ $this->add_responsive_control(
	521	+ 'nav_arrow_size',
	522	+ [
	523	+ 'label' => esc_html__('Arrow Size (px)', 'king-addons'),
	524	+ 'type' => Controls_Manager::SLIDER,
	525	+ 'range' => [
	526	+ 'px' => [ 'min' => 10, 'max' => 60 ],
	527	+ ],
	528	+ 'selectors' => [
	529	+ '{{WRAPPER}} .swiper-button-next, {{WRAPPER}} .swiper-button-prev' => 'width: {{SIZE}}{{UNIT}}; height: {{SIZE}}{{UNIT}}; background-size: {{SIZE}}{{UNIT}} {{SIZE}}{{UNIT}};',
	530	+ '{{WRAPPER}} .swiper-button-next::after, {{WRAPPER}} .swiper-button-prev::after' => 'font-size: {{SIZE}}{{UNIT}};',
	531	+ ],
	532	+ ]
	533	+ );
	534	+ $this->add_control(
	535	+ 'nav_arrow_color',
	536	+ [
	537	+ 'label' => esc_html__('Arrow Color', 'king-addons'),
	538	+ 'type' => Controls_Manager::COLOR,
	539	+ 'selectors' => [
	540	+ '{{WRAPPER}} .swiper-button-next, {{WRAPPER}} .swiper-button-prev' => 'color: {{VALUE}};',
	541	+ ],
	542	+ ]
	543	+ );
	544	+ // Navigation position (inside/outside)
	545	+ $this->add_control(
	546	+ 'navigation_position',
	547	+ [
	548	+ 'label' => esc_html__('Arrows Position', 'king-addons'),
	549	+ 'type' => Controls_Manager::SELECT,
	550	+ 'options' => [
	551	+ 'inside' => esc_html__('Inside', 'king-addons'),
	552	+ 'outside' => esc_html__('Outside', 'king-addons'),
	553	+ ],
	554	+ 'default' => 'inside',
	555	+ ]
	556	+ );
	557	+ $this->end_controls_section();
	558	+
	559	+ // Team members list
	560	+ $this->start_controls_section(
	561	+ 'section_members',
	562	+ [
	563	+ 'label' => esc_html__('Team Members', 'king-addons'),
	564	+ 'tab' => Controls_Manager::TAB_CONTENT,
	565	+ ]
	566	+ );
	567	+
	568	+ $repeater = new Repeater();
	569	+ $repeater->add_control(
	570	+ 'name',
	571	+ [
	572	+ 'label' => esc_html__('Name', 'king-addons'),
	573	+ 'type' => Controls_Manager::TEXT,
	574	+ 'default' => esc_html__('John Doe', 'king-addons'),
	575	+ 'label_block' => true,
	576	+ ]
	577	+ );
	578	+ $repeater->add_control(
	579	+ 'role',
	580	+ [
	581	+ 'label' => esc_html__('Role', 'king-addons'),
	582	+ 'type' => Controls_Manager::TEXT,
	583	+ 'default' => esc_html__('CEO', 'king-addons'),
	584	+ 'label_block' => true,
	585	+ ]
	586	+ );
	587	+ $repeater->add_control(
	588	+ 'photo',
	589	+ [
	590	+ 'label' => esc_html__('Photo', 'king-addons'),
	591	+ 'type' => Controls_Manager::MEDIA,
	592	+ 'default' => [
	593	+ 'url' => Utils::get_placeholder_image_src(),
	594	+ ],
	595	+ ]
	596	+ );
	597	+ $repeater->add_control(
	598	+ 'bio',
	599	+ [
	600	+ 'label' => esc_html__('Bio', 'king-addons'),
	601	+ 'type' => Controls_Manager::TEXTAREA,
	602	+ 'default' => esc_html__('Brief bio goes here.', 'king-addons'),
	603	+ ]
	604	+ );
	605	+
	606	+ $this->add_control(
	607	+ 'members',
	608	+ [
	609	+ 'label' => esc_html__('Members', 'king-addons'),
	610	+ 'type' => Controls_Manager::REPEATER,
	611	+ 'fields' => $repeater->get_controls(),
	612	+ 'default' => [
	613	+ ['name' => esc_html__('John Doe', 'king-addons'), 'role' => esc_html__('CEO', 'king-addons')],
	614	+ ],
	615	+ 'title_field' => '{{ name }}',
	616	+ ]
	617	+ );
	618	+
	619	+
	620	+
	621	+$this->end_controls_section();
	622	+
	623	+
	624	+ }
	625	+
	626	+ protected function render(): void {
	627	+ $settings = $this->get_settings_for_display();
	628	+ if (empty($settings['members'])) {
	629	+ return;
	630	+ }
	631	+ ?>
	632	+ <?php
	633	+ // Prepare carousel settings attributes
	634	+ $attrs = [];
	635	+ $attrs[] = 'data-slides-per-view="' . esc_attr($settings['slides_per_view']) . '"';
	636	+ $attrs[] = 'data-slides-per-view-tablet="' . esc_attr($settings['slides_per_view_tablet']) . '"';
	637	+ $attrs[] = 'data-slides-per-view-mobile="' . esc_attr($settings['slides_per_view_mobile']) . '"';
	638	+ $attrs[] = 'data-space-between="' . esc_attr($settings['space_between']['size']) . '"';
	639	+ $attrs[] = 'data-loop="' . esc_attr($settings['loop']) . '"';
	640	+ $attrs[] = 'data-autoplay="' . esc_attr($settings['autoplay']) . '"';
	641	+ $attrs[] = 'data-autoplay-delay="' . esc_attr($settings['autoplay_delay']) . '"';
	642	+ $attrs[] = 'data-autoplay-reverse="' . esc_attr($settings['autoplay_reverse']) . '"';
	643	+ $attrs[] = 'data-speed="' . esc_attr($settings['speed']) . '"';
	644	+ $attrs[] = 'data-pagination="' . esc_attr($settings['pagination']) . '"';
	645	+ $attrs[] = 'data-navigation="' . esc_attr($settings['navigation']) . '"';
	646	+ ?>
	647	+ <?php
	648	+ // Build container classes
	649	+ $classes = [
	650	+ 'king-addons-team-member-slider',
	651	+ 'swiper-container',
	652	+ 'swiper',
	653	+ ];
	654	+ if (!empty($settings['navigation_position']) && 'outside' === $settings['navigation_position']) {
	655	+ $classes[] = 'arrows-outside';
	656	+ }
	657	+ if (!empty($settings['pagination_position']) && 'outside' === $settings['pagination_position']) {
	658	+ $classes[] = 'pagination-outside';
	659	+ }
	660	+ ?>
	661	+ <div class="<?php echo esc_attr(implode(' ', $classes)); ?>" <?php echo implode(' ', $attrs); ?>>
	662	+ <div class="swiper-wrapper">
	663	+ <?php foreach ($settings['members'] as $member) : ?>
	664	+ <div class="swiper-slide">
	665	+ <div class="king-addons-tms-item">
	666	+ <?php if (!empty($member['photo']['url'])) : ?>
	667	+ <div class="king-addons-tms-photo">
	668	+ <img src="<?php echo esc_url($member['photo']['url']); ?>" alt="<?php echo esc_attr($member['name']); ?>" />
	669	+ </div>
	670	+ <?php endif; ?>
	671	+ <div class="king-addons-tms-info">
	672	+ <h4 class="king-addons-tms-name"><?php echo esc_html($member['name']); ?></h4>
	673	+ <span class="king-addons-tms-role"><?php echo esc_html($member['role']); ?></span>
	674	+ <?php if (!empty($member['bio'])) : ?>
	675	+ <p class="king-addons-tms-bio"><?php echo esc_html($member['bio']); ?></p>
	676	+ <?php endif; ?>
	677	+ </div>
	678	+ </div>
	679	+ </div>
	680	+ <?php endforeach; ?>
	681	+ </div>
	682	+ <div class="swiper-pagination"></div>
	683	+ <div class="swiper-button-prev"></div>
	684	+ <div class="swiper-button-next"></div>
	685	+ </div>
	686	+ <?php
	687	+ }
	688	+}