Question

我正在使用Owl Carousel plugin，除了一件事，一切正常。当我向下滚动页面时，我想启用轮播自动播放。

问题是，当我向下滚动时，轮播开始自动播放，或试图...

jQuery('#consultants').owlCarousel({
        /* autoPlay: false, */
        pagination: false,
        navigation: true,

        itemsCustom : [
            [0, 1],
            [320, 2],
            [450, 3],
            [600, 4],
            [750, 6],
            [1100, 6]
        ],
    });

当用户向下滚动700像素时自动播放：

jQuery(window).scroll(function() 
{
    var y_scroll_pos = window.pageYOffset;
    var scroll_pos_test = 700;             

    if(y_scroll_pos > scroll_pos_test) 
    {
        var owl = jQuery("#specialist-consultants-list");
        owl.trigger('owl.play');

        console.log('Scroll point reached');
    }
});

关于它为何如此表现的任何线索？

Answer 1

你可以在＆＃34; 5上回答here。猫头鹰数据方法＆＃34;。但是为了简而言之，你可以使用这个代码

jQuery(document).ready(function($) {
  jQuery("#owl-example").owlCarousel({autoPlay : true});
  var owl = jQuery("#owl-example").data('owlCarousel');
  owl.stop();
  jQuery(window).scroll(function() 
  {
      var y_scroll_pos = window.pageYOffset;
      var scroll_pos_test = 700;             

      if(y_scroll_pos > scroll_pos_test) 
      {
          owl.play()
      }
  });
});

如果您需要在用户滚动到＆＃34; 700px＆＃34;之后立即滑动owlCarousel然后每张幻灯片花费5秒延迟

jQuery(document).ready(function($) {
  var owl_event = jQuery("#owl-example");
  owl_event.owlCarousel({autoPlay : true,slideSpeed : 5000});
  var owl = jQuery("#owl-example").data('owlCarousel');
  owl.stop();
  jQuery(window).scroll(function() 
  {
      var y_scroll_pos = window.pageYOffset;
      var scroll_pos_test = 700;             

      if(y_scroll_pos > scroll_pos_test && owl.apStatus != "play") 
      {
          owl.play();
          owl_event.trigger('owl.next');
      }
  });
});

Answer 2

您可能需要设置标志，指示已经触发轮播。在其他情况下，当你滚动时，我认为你正在触发旋转木马自动播放数百次。它可能是这样的：

"40%"

或者在第一次触发后，您可以在窗口上禁用此滚动事件处理程序。

但是我无法确认这是否适用于100％，因为我没有完整的代码。

滚动到特定点

2 个答案: