Na}{

File Content: `layout-1.php`

<?php
$default_settings = [
    'content_list' => [],
];
$settings = array_merge($default_settings, $settings);
extract($settings);
$arrows  = $widget->get_setting('arrows', 'false');   
$dots = $widget->get_setting('dots','false');

$show_arrow = ($arrows == 'true' || (isset($settings['arrows_laptop']) && $settings['arrows_laptop'] == 'true') || (isset($settings['arrows_tablet_extra']) && $settings['arrows_tablet_extra'] == 'true') || $settings['arrows_tablet'] == 'true' || (isset($settings['arrows_mobile_extra']) && $settings['arrows_mobile_extra'] == 'true') || $settings['arrows_mobile'] == 'true') ? true : false;
//$show_dots = ($dots == 'true' || (isset($settings['dots_laptop']) && $settings['dots_laptop'] == 'true') || (isset($settings['dots_tablet_extra']) && $settings['dots_tablet_extra'] == 'true') || $settings['dots_tablet'] == 'true' || (isset($settings['dots_mobile_extra']) && $settings['dots_mobile_extra'] == 'true') || $settings['dots_mobile'] == 'true') ? true : false;

$column    = $widget->get_setting('column_number', 3);
$column_xl = $widget->get_setting('column_number_laptop', $column);
$column_lg = $widget->get_setting('column_number_tablet_extra', $column_xl);
$column_md = $widget->get_setting('column_number_tablet', $column_lg);
$column_sm = $widget->get_setting('column_number_mobile_extra', $column_md);
$column_xs = $widget->get_setting('column_number_mobile', $column_sm);

$slides_gutter    = ( isset($gutter) && $gutter !== '') ? $gutter : 30;
$slides_gutter_xl = ( isset($gutter_laptop) && $gutter_laptop !== '') ? $gutter_laptop : $slides_gutter;
$slides_gutter_lg = ( isset($gutter_tablet_extra) && $gutter_tablet_extra !== '') ? $gutter_tablet_extra : $slides_gutter_xl;
$slides_gutter_md = ( isset($gutter_tablet) && $gutter_tablet !== '') ? $gutter_tablet : $slides_gutter_lg;
$slides_gutter_sm = ( isset($gutter_mobile_extra) && $gutter_mobile_extra !== '') ? $gutter_mobile_extra : $slides_gutter_md;
$slides_gutter_xs = ( isset($gutter_mobile) && $gutter_mobile !== '') ? $gutter_mobile : $slides_gutter_sm;

$opts = [
    'slide_direction'      => 'horizontal',
    'slide_percolumn'      => 1, 
    'slide_mode'           => 'slide', 
    'slides_to_show_xxl'   => $column, 
    'slides_to_show'       => $column_xl, 
    'slides_to_show_lg'    => $column_lg, 
    'slides_to_show_md'    => $column_md, 
    'slides_to_show_sm'    => $column_sm, 
    'slides_to_show_xs'    => $column_xs, 
    'slides_to_scroll'     => $slides_to_scroll, 
    'slides_gutter'        => $slides_gutter,
    'slides_gutter_xl'     => $slides_gutter_xl,
    'slides_gutter_lg'     => $slides_gutter_lg,
    'slides_gutter_md'     => $slides_gutter_md,
    'slides_gutter_sm'     => $slides_gutter_sm,
    'slides_gutter_xs'     => $slides_gutter_xs,
    'center_slide'         => $center_slide != '' ? (bool)$center_slide : false,
    // 'loop'                 => $infinite != '' ? (bool)$infinite : false,
    // 'pause_on_hover'       => $pause_on_hover != '' ? (bool)$pause_on_hover : false,
    // 'autoplay'             => $autoplay != '' ? (bool)$autoplay : false,
    'pause_on_interaction' => true,
    // 'delay'                => $autoplay_speed,
    // 'speed'                => $speed,
    'dots_style'           => 'bullets',
    'set_timeout'          => true
];
  

$widget->add_render_attribute( 'carousel', [
    'class'         => 'pxl-swiper-container overflow-hidden',
    'dir'           => is_rtl() ? 'rtl' : 'ltr',
    'data-settings' => wp_json_encode($opts)
]);
$img_size = !empty( $img_size ) ? $img_size : '460x580';
?>

<?php if(isset($content_list) && !empty($content_list) && count($content_list)): ?>
    <div class="pxl-history-carousel layout-<?php echo esc_attr($settings['layout'])?>">
        <div class="pxl-carousel-inner overflow-hidden">
                <div class="pxl-swiper-wrapper align-items-center">
                    <?php foreach ($content_list as $key => $value):
                        $image_slide    = isset($value['image_slide']) ? $value['image_slide'] : [];
                        $image_link     = isset($value['image_link']) ? $value['image_link'] : [];
                        $slide_title    = isset($value['slide_title']) ? $value['slide_title'] : [];
                        $slide_des      = isset($value['slide_des']) ? $value['slide_des'] : [];
                        $slide_button_text      = isset($value['slide_button_text']) ? $value['slide_button_text'] : [];
                        $thumbnail = '';
                        if(!empty($image_slide['id'])) {
                            $img = pxl_get_image_by_size( array(
                                'attach_id'  => $image_slide['id'],
                                'thumb_size' => $img_size,
                                'class' => 'no-lazyload',
                            ));
                            $thumbnail = $img['thumbnail'];
                        }  

                        $link_key = $widget->get_repeater_setting_key( 'image_link', 'content_list', $key ); 
                        if ( ! empty( $image_link['url'] ) ) {
                            $widget->add_render_attribute( $link_key, 'href', $image_link['url'] );

                            if ( $image_link['is_external'] ) {
                                $widget->add_render_attribute( $link_key, 'target', '_blank' );
                            }

                            if ( $image_link['nofollow'] ) {
                                $widget->add_render_attribute( $link_key, 'rel', 'nofollow' );
                            }

                            if( ! empty($image_link['custom_attributes'])){
                                $custom_attributes = explode('|', $image_link['custom_attributes']);
                                foreach ($custom_attributes as $atts_value) {
                                    $_custom_attributes = explode(':', $atts_value);
                                    $widget->add_render_attribute( $link_key, $_custom_attributes[0], $_custom_attributes[1] );
                                }

                            }
                        }
                        $link_attributes = $widget->get_render_attribute_string( $link_key );
                        ?>
                        <div class="pxl-swiper-slide item-slide">
                            <div class="item-inner relative">
                                <?php if(!empty($thumbnail)) : ?>
                                    <div class="item-image">
                                        <?php echo wp_kses_post($thumbnail); ?>
                                    </div>
                                <?php endif; ?>
                                <div class="content-item">
                                    <?php if(!empty($slide_title)): ?>
                                        <h4 class="item-title"><?php pxl_print_html($slide_title); ?></h4>
                                    <?php endif; ?>
                                    <?php if(!empty($slide_des)): ?>
                                    <div class="item-des">
                                        <?php pxl_print_html($slide_des); ?>
                                    </div>
                                    <?php endif; ?>
                                    <?php if(!empty($slide_button_text)): ?>
                                    <div class="pxl-button-more">
                                        <?php if ( ! empty( $image_link['url'] ) ) echo '<a class="pxl-btn btn-primary"'. $link_attributes .'>';
                                        ?>
                                            <span class="pxl-button-text"><?php pxl_print_html($slide_button_text); ?></span>
                                            <span class="pxl-icon"><i class="pxli pxli-upper-right-arrow"></i></span>
                                        <?php
                                        if ( ! empty( $image_link['url'] ) ) echo '</a>';
                                        ?>
                                    </div>
                                    <?php endif; ?>
                                </div>
                            </div>
                        </div>
                    <?php endforeach; ?>
                </div>
                <div class="box-pev-next">
                    <?php if(!empty($text_history)): ?>
                        <div class="text-pev-next"><?php pxl_print_html($text_history); ?></div>
                    <?php endif; ?>
                    <?php if($show_arrow): 
                        $arrows_position_cls = $widget->get_setting('arrows_position', 'nav-in-vertical');
                        ?>
                        <div class="pxl-swiper-arrows <?php echo esc_attr($arrows_position_cls) ?>">
                            <div class="pxl-swiper-arrow pxl-swiper-arrow-prev">
                                <?php 
                                if( !empty($arrow_prev_icon['value'] )){
                                    echo '<span class="pxl-icon">';
                                    \Elementor\Icons_Manager::render_icon( $arrow_prev_icon, [ 'aria-hidden' => 'true' ], 'span' );
                                    echo '</span>';
                                }else{
                                    echo '<span class="pxl-icon pxli-angle-left2"></span>';
                                }
                                ?> 
                            </div>
                            <div class="pxl-swiper-arrow pxl-swiper-arrow-next">
                                <?php 
                                if( !empty($arrow_next_icon['value'] )){
                                    echo '<span class="pxl-icon">';
                                    \Elementor\Icons_Manager::render_icon( $arrow_next_icon, [ 'aria-hidden' => 'true' ], 'span' );
                                    echo '</span>';
                                }else{
                                    echo '<span class="pxl-icon pxli-angle-right2"></span>';
                                }
                                ?>
                            </div>
                        </div>
                        <div class="pxl-swiper-slider-thumbs">
                            <div class="pxl-swiper-slider-inner">
                                <div class="pxl-swiper-thumbs overflow-hidden">
                                    <div class="pxl-thumbs-wrapper swiper-wrapper">
                                        <?php
                                        $idx = 0;
                                        $total_items = count($content_list);
                                        $loop_items = array_merge($content_list, $content_list, $content_list); 

                                        foreach ($loop_items as $key => $value):
                                            $slide_year = isset($value['slide_year']) ? $value['slide_year'] : '';
                                            ?>
                                            <?php if (!empty($slide_year)): ?>
                                            <div class="pxl-swiper-slide thumb-item">
                                                    <div class="item-inner relative">
                                                        <span class="item-year"><?php pxl_print_html($slide_year); ?></span>
                                                    </div>
                                            </div>
                                            <?php endif; ?>
                                        <?php endforeach; ?>
                                    </div>
                                </div>
                            </div>
                        </div>
                    <?php endif; ?>
                </div>
            <?php /* <?php if($show_dots): ?>
                <div class="pxl-swiper-dots style-<?php echo esc_attr($widget->get_setting('dots_style', 'bullets')) ?>">
                </div>
            <?php endif; ?> */ ?>
        </div>
    </div>
<?php endif; ?>
File Content: layout-1.php

File Content: `layout-1.php`
