Question

我有一个垂直光滑工作在两个内联div。问题是，当我将鼠标悬停在左侧div上时，它会停止滚动，但是右侧会继续滚动，之后，滑块会失去它的同步。有没有办法在只悬停一个时阻止它们？（左或右？）HTML：

<div class="vertical-scroll">
            <!--SCROLL TITLES-->
            <div class="row">
                <div class="col-sm-12  col-md-5">
                    <h2 class="">
                        <?php echo $right; ?>
                    </h2>
                </div>
                <div class="col-sm-12  col-md-5 col-md-offset-2">
                    <h2 class="">
                        <?php echo $left; ?>
                    </h2>

                </div>
            </div>

            <div class="row">
                <div class="col-sm-12  col-md-5">
                    <h2 class="info-title">
                        <?php echo $right2; ?>
                    </h2>
                </div>
                <div class="col-sm-12  col-md-5 col-md-offset-2">
                    <h2 class="">
                        <?php echo $left2; ?>
                    </h2>
                </div>
            </div>

        </div>

jQuery：

 jQuery('.vertical-scroll').slick({
    slidesToShow: 1,
    slidesToScroll: 1,
    autoplay: true,
    autoplaySpeed: 1000,
    vertical: true,
    verticalSwiping: false,
    touchMove: false,
    swipe: false,
     pauseOnHover: true,
    arrows: false,
  });

Answer 1

不完全确定您的最终结果是什么，但您可以使用＆＃39; asNavFor＆＃39;使一个光滑的滑块与另一个保持同步。

Fiddle

HTML：

<div>
  <div class="slider-1 text-center">
    <div>item1</div>
    <div>item2</div>
    <div>item3</div>
  </div>
  <div class="slider-2 text-center">
    <div>item1</div>
    <div>item2</div>
    <div>item3</div>
  </div>
</div>

JS：

$(document).ready( function() {

    $('.slider-1').slick({
      vertical:true,
      slidesToShow: 1,
      slidesToScroll: 1,
      autoplay: true,
      autoplaySpeed: 500,
      pauseOnHover: true,
      arrows: false,
      dots: false,
      asNavFor: '.slider-2'
    });
    $('.slider-2').slick({
      vertical:true,
      slidesToShow: 1,
      slidesToScroll: 1,
      dots: true,
      focusOnSelect: true,
      asNavFor: '.slider-1'
    });
});

希望这有帮助！

当只悬停一个时，如何阻止垂直光滑滚动两个div？

1 个答案: