Mr.X


<div id="sync1" class="emme_gallery thumbnail_template owl-carousel <?=$atts['class']?>">

    <?php  // CHIAMARE il template thumbnail.php
        foreach ($images as $image) {

     

            $urlImage = wp_get_attachment_image_url($image,  'full');
            $gallery = '<div class="emme-slider-item" >';
            $gallery .= '<img src="'.$urlImage.'" alt="'.get_the_title($image).'">';
               //$gallery .= '<a  data-lightbox="'.$light.'" data-title="'.wp_get_attachment_caption($image).'" title="'.get_the_title($image).'" href="'.wp_get_attachment_image_url($image, 'full').'" >';
          //     $gallery .= wp_get_attachment_image($image, $atts['thumb'], false, array('alt'   => get_the_title($image)));
            //$gallery .= '</a>';
            if($atts['title'] != 'No' || $atts['description'] != 'No'){
              $gallery .= '<div class="txt">';  
                if(get_the_title($image) && $atts['title'] != 'No'){
                    $gallery .= '<div class="tit">'.get_the_title($image).'</div>';
                }
               if(wp_get_attachment_caption($image) && $atts['description'] != 'No'){
                    $gallery .= '<figcaption>'.wp_get_attachment_caption($image).'</figcaption>';
                }
               $gallery .= '</div>';  
            }    
            $gallery .= '</div>';
               echo $gallery;
          }
            ?>
</div>

<div id="sync2" class="navigation-thumbs owl-carousel">
    <?php 
     foreach ($images as $image) {
        $nav_thumbnails = wp_get_attachment_image_url($image,  $atts['thumb']);
    echo '<img src="'.$nav_thumbnails.'" alt="'.get_the_title($image).'">';
     }
    
    ?>
</div>



<script type="text/javascript">
jQuery(document).ready(function(e) {

    var sync1 = jQuery(".emme_gallery.thumbnail_template");
var sync2 = jQuery(".navigation-thumbs");

var thumbnailItemClass = '.owl-item';

var slides = sync1.owlCarousel({
    video:true,
  startPosition: 12,
  items:1,
  loop:true,
  margin:10,
  autoHeight: true,
  autoplay:true,
  autoplayTimeout:6000,
  autoplayHoverPause:false,
  nav: false,
  dots: true
}).on('changed.owl.carousel', syncPosition);

function syncPosition(el) {
  $owl_slider = jQuery(this).data('owl.carousel');
  var loop = $owl_slider.options.loop;

  if(loop){
    var count = el.item.count-1;
    var current = Math.round(el.item.index - (el.item.count/2) - .5);
    if(current < 0) {
        current = count;
    }
    if(current > count) {
        current = 0;
    }
  }else{
    var current = el.item.index;
  }

  var owl_thumbnail = sync2.data('owl.carousel');
  var itemClass = "." + owl_thumbnail.options.itemClass;


  var thumbnailCurrentItem = sync2
  .find(itemClass)
  .removeClass("synced")
  .eq(current);

  thumbnailCurrentItem.addClass('synced');

  if (!thumbnailCurrentItem.hasClass('active')) {
    var duration = 300;
    sync2.trigger('to.owl.carousel',[current, duration, true]);
  }   
}
var thumbs = sync2.owlCarousel({
  startPosition: 12,
  items:6,
  loop:false,
  margin:10,
  autoplay:false,
  nav: false,
  dots: false,
  onInitialized: function (e) {
    var thumbnailCurrentItem =  jQuery(e.target).find(thumbnailItemClass).eq(this._current);
    thumbnailCurrentItem.addClass('synced');
  },
})
.on('click', thumbnailItemClass, function(e) {
    e.preventDefault();
    var duration = 300;
    var itemIndex =  jQuery(e.target).parents(thumbnailItemClass).index();
    sync1.trigger('to.owl.carousel',[itemIndex, duration, true]);
}).on("changed.owl.carousel", function (el) {
  var number = el.item.index;
  $owl_slider = sync1.data('owl.carousel');
  $owl_slider.to(number, 100, true);
});


});
</script>


<style>
    #sync1 .item{
    background: #0c83e7;
    padding: 80px 0px;
    margin: 5px;
    color: #FFF;
    -webkit-border-radius: 3px;
    -moz-border-radius: 3px;
    border-radius: 3px;
    text-align: center;
}
#sync2 .item{
    background: #C9C9C9;
    padding: 10px 0px;
    margin: 5px;
    color: #FFF;
    -webkit-border-radius: 3px;
    -moz-border-radius: 3px;
    border-radius: 3px;
    text-align: center;
    cursor: pointer;
}

#sync2 .synced .item{
  background: #0c83e7;
}



.navigation-thumbs .owl-item.active.synced {
  border: 2px solid #76413a;
  box-sizing: border-box;
}
</style>