フクロウカルーセルと入れ替える複数のdivの

Question

私は今すぐ投票「フクロウカルーセルで」しかし「というボタンをクリックして上のdivは、常に次のdivにスワップ」を達成しようとしています、その上に次のdivに正確に一度だけスワップそれ以外のボタンをクリックすると正確に次のdivにスワップしません。私のfiddleリンクです。

<script type="text/javascript">  
    $(document).ready(function() {   
     $(".go-swap").click(function() {    
      $("#currnt").swap({ 
       target: "next", 
       opacity: "0.5", 
       speed: 1000,      
      });   
     });   
    }); 
</script> 
<script type="text/javascript">  
    $(document).ready(function() {   
     $('.item').hover(function(){ 
      $(this).attr('id', 'currnt'); 
      $(this).parent().prev().children().attr('id', 'next')},     
      function(){ 
       $(this).attr('id', ''); 
       $(this).parent().prev().children().attr('id', '') 
      }); 
     }); 
</script> 
<section id="demos"> 
    <div class="row"> 
    <div class="large-12 columns"> 
     <div class="owl-carousel owl-theme"> 
     <div class="item" data-hash="zero"> 
      <h4>0</h4> 
      <a href="javascript://" class="go-swap"><button>Vote Now</button></a> 
     </div> 

     <div class="item" data-hash="one"> 
      <h4>1</h4> 
      <a href="javascript://" class="go-swap"><button>Vote Now</button></a> 
     </div> 
     <div class="item" data-hash="two"> 
      <h4>2</h4> 
      <a href="javascript://" class="go-swap"><button>Vote Now</button></a> 
     </div> 
     <div class="item" data-hash="three"> 
      <h4>3</h4> 
      <a href="javascript://" class="go-swap"><button>Vote Now</button></a> 
     </div> 
     <div class="item" data-hash="four"> 
      <h4>4</h4> 
      <a href="javascript://" class="go-swap"><button>Vote Now</button></a> 
     </div> 
     </div> 
    </div> 
    </div> 
</section> 

Answer 1

//swap to next div 

     var animating = false; 

     $('.owl-carousel').on('click', '.swap', function() { 

     var clickedDiv = $(this).closest('.owl-item'), 

     prevDiv = clickedDiv.prev(), 
     distance = clickedDiv.offset().left - prevDiv.offset().left; 

      if (prevDiv.length) { 
      animating = true; 
      $.when(clickedDiv.animate({ 
       left: -distance 
       }, 1000), 
       prevDiv.animate({ 
       left: distance 
       }, 1000)).done(function() { 
       prevDiv.css('left', '0px'); 
       clickedDiv.css('left', '0px'); 
       clickedDiv.insertBefore(prevDiv); 
       animating = false; 
      }); 
      } 
      }); 

// owl carousel 
$(document).ready(function() { 
var slider = $('.owl-carousel'); 
    slider.owlCarousel({ 
    items: 4, 
    loop: false, 
    center: false, 
    margin: 10, 
    callbacks: true, 
    URLhashListener: true, 
    autoplayHoverPause: true, 
    startPosition: 'URLHash', 
    touchDrag: false, 
    mouseDrag: false 
    }); 
    $(".swap").click(function() { 
     slider.trigger('prev.owl.carousel'); 
    }); 
}) 

https://jsfiddle.net/yajuvendra1990/b8qx6jjt/9/

Answer 2

それはあなたが達成しようとしているかを理解するために少し難しいですが、あなたはここで、この

$(document).ready(function() { 
     var slider = $('.owl-carousel') 

    slider.owlCarousel({ 
     items: 4, 
     loop: false, 
     center: false, 
     margin: 10, 
     callbacks: true, 
     URLhashListener: true, 
     autoplayHoverPause: true, 
     startPosition: 'URLHash' 
     }); 

    $(".go-swap").click(function() { 
      slider.trigger('next.owl.carousel'); 
     }); 

}); 

バイオリンのようなクリックで次のスライドに移動することができます - https://jsfiddle.net/Jim_Miraidev/uu8ukac6/

この何よです探していた？あなたの答えのための