<div id="picturemove_block"> 
<div class="owl-carousel2 owl-theme owl-loaded owl-drag">
<{foreach item=blockmenu from=$block.picturemove}>
<div class="item"><a id='picturemoveimg' class='a11y_box' href="<{$blockmenu.url}>" title='<{$blockmenu.sorttitle}>' target="<{$blockmenu.target}>" ><img class='a11y_box' alt='<{$blockmenu.sorttitle}>' src="<{xoAppUrl}><{$blockmenu.buttonimg}>"  /></a></div>
<{/foreach}>
</div>
   
<{if $xoops_isadmin}>    
<a  href="<{xoAppUrl}>modules/neothemesadmin/admin/blockmenusort.php?op=imgfunction&categoryid=<{$block.menusortid}>" target="_blank" class="btn btn-primary navbar-btn btn-block " role="button"><{$block.menuadmin}></a>
<{/if}>
</div>



<script type="text/javascript" src="<{$xoops_url}>/modules/neillibrary/js/OwlCarousel/js/owl.carousel.js"></script>

<script>
$(document).ready(function() {
  var owl = $('.owl-carousel2');  
  owl.owlCarousel({
    margin: 10,
    nav: false,
    autoplay: true,
    dots: true,
    autoplayHoverPause: true,
    loop: true,
    items: <{$block.imgQuantity}>,
    onInitialized: function() {
      accessibility_dottoggle('.owl-carousel2 .owl-dots .owl-dot'); 
    }
  });


  // 偵測 TAB 進入 .owl-carousel2 後，暫停自動播放
  const isTabPressed_8 = setupTabKeyDetection(".owl-carousel2 .owl-stage-outer");
  $('.owl-carousel2').on('focusin', function() {
    owl.trigger('stop.owl.autoplay');
    if (isTabPressed_8()) {
  $(".owl-carousel2  .owl-stage").css({
    'animation': 'none',          // 停止動畫
    'transform': 'translate3d(0px, 0px, 0px)'  // 重置位置
  });
  $(".owl-carousel2  .owl_box").css({
    'margin': '10px 0px 20px 10px'
  });
  }
  if (isTabPressed_8()) {
    $('.owl-carousel2 .owl-dot').remove(); 
    }
  });




});


</script>

      