<?php
/**
 * The team slider template
 * If you want to override this template by your custom template in the theme folder,
 * just create the 'sliderkits' folder in the theme folder,
 * then, copy this file to sliderkits folder.
 * @version 1.0.0
 * @package SliderKits
 */

 $autoplay         =   $sk_data->autoplay;
 $autoplaySpeed    =   $sk_data->autoplaySpeed;
 $infinite         =   $sk_data->infinite;
 $swipe            =   $sk_data->swipe;
 $touchMove        =   $sk_data->touchMove;
 $speed            =   $sk_data->speed;
 $slides           =   $sk_data->slides;
?>

<?php if( $slides ):  ?>
<div class="sk-slick sk-slick-team-info" data-slick='{"slidesToShow": 1, "initialSlide": 2, "dots": false, "asNavFor": ".sk-slick-team-slider", "fade": true, "infinite": false, "lazyLoad": "ondemand", "arrows": false}'>
  <?php foreach( $slides as $item ):?>
  <div class="sk-slick-item elementor-repeater-item-<?php echo esc_attr( $item['_id'] ); ?>">
    <div class="container">
      <div class="row">
        <div class="col-md-4 offset-md-1">
          <?php if( $item['title'] ): ?>
          <h3 class="sk-heading"><?php echo wp_kses_post( $item['title'] ); ?></h3>
          <?php endif; ?>

          <?php if( $item['subtitle'] ): ?>
          <em class="sk-job"><?php echo wp_kses_post( $item['subtitle'] ); ?></em>
          <?php endif; ?>
        </div>
        <div class="col-md-6 col-md-offset-1">
           <?php if( $item['paragraph'] ): ?>
           <div class="sk-content"><?php echo wp_kses_post( $item['paragraph'] ); ?></div>
           <?php endif; ?>
        </div>
      </div>
    </div>
  </div>
 <?php endforeach;?>
</div>

<?php
$team_slider_config = json_encode([
  'autoplay' => $autoplay === 'true'? true: false,
  'autoplaySpeed' => $autoplaySpeed,
  'infinite' => $infinite === 'true'? true: false,
  'dots' => false,
  'arrows' => false,
  'swipe'  => $swipe === 'true'? true: false,
  'speed'  => $speed,
  'touchMove' => $touchMove === 'true'? true: false,
  'fade'   => false,
  'initialSlide' => 2,
  'variableWidth' =>  true,
  'centerMode' => true,
  'focusOnSelect' => true,
  'lazyLoad' => 'ondemand',
  'slidesToShow' => 4,
  'asNavFor' => '.sk-slick-team-info'
]);
?>
<div class="sk-slick sk-slick-team-slider" data-slick='<?php echo esc_attr( $team_slider_config );?>'>
  <?php foreach( $slides as $item ):?>
  <div class="sk-slick-item">
    <?php
     $picture_url = $item['picture']['url'];
     if( $picture_url !== '' ):
    ?>
    <div class="sk-slick-item__img"><img class="lazyload" src="<?php echo wp_get_attachment_image_url( $item['picture']['id'], 'thumbnail' );?>" data-src="<?php echo esc_url( $picture_url );?>" alt="<?php echo esc_attr( $item['title'] );?>" /></div>
    <?php endif; ?>
  </div>
  <?php endforeach;?>
</div>
<?php endif; ?>