Owl 交换多个 div 的旋转木马

Question

我正在努力实现"a div always swap to next div on clicking a button named "立即投票“在owl轮播中”，但它只有一个单击按钮时时间交换准确到下一个 div 其他时间它不准确交换到下一个 div 这是我的 fiddle link.

<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

有点难以理解您要实现的目标，您可以像这样单击移动到下一张幻灯片

$(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');
      });

});

fiddle 这里 - https://jsfiddle.net/Jim_Miraidev/uu8ukac6/

这是您要找的东西吗？

Answer 2

//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/

Owl 交换多个 div 的旋转木马

Owl Carrousel with Swapping multiple div's

javascript

jquery

swap

onclick

owl-carousel