Question

我想使用鼠标拖动向左或向右滑动bx滑块中的幻灯片。有什么办法可以吗？在用鼠标向左或向右拖动时，幻灯片应向左或向右移动。

<div class="slide-two hp-rtwo">
  <ul class="trending-products" style="cursor:-webkit-grab;-webkit-transform:translateX(0);">
    <li>
      <img src="../images/postad.jpg" />
    </li>
    <li>
      <img src="../images/postad.jpg" />
    </li>
    <li>
      <img src="../images/postad.jpg" />
    </li>
    <li>
      <img src="../images/postad.jpg" />
    </li>
    <li>
      <img src="../images/postad.jpg" />
    </li>
    <li>
      <img src="../images/postad.jpg" />
    </li>
  </ul>
</div>

jquery的

$(document).ready(function() {
    $('.bxslider').bxSlider({
        auto: true
    });
    $('.trending-products').bxSlider({
        auto: false,
        minSlides: 4,
        maxSlides: 20,
        slideWidth: 250,
        slideMargin: 20,
        controls: true,
        moveSlides: 1,
        pager: false,
    });
)};

Answer 1

我是这样做的 - ＆gt;

它需要包含jquery-ui bundle

html代码

<div class="slider">
    <div class="dragg-wrap"></div>
    <ul class="bxslider">
        <li>
            <!--slide content goes here-->
        </li>
    </ul>
</div>

.dragg-wrap

的css代码

.dragg-wrap {
    position: absolute;
    top: 0px;
    left: 0px;
    width: 100%;
    height: 90%;
    z-index: 999;
    cursor: grabbing;
}

javascript代码

var slider = $('.bxslider').bxSlider({
    controls: false,
    adaptiveHeight: true,
});


var sliderdiv = $('.slider .dragg-wrap');

sliderdiv.draggable({ 
    axis: "x" ,
    drag: function(event, ui) {
      console.log(ui.position);
      $('.bx-wrapper ul.bxslider').css('left', ui.position.left);
    },
    stop: function(event, ui) {
      $('.bx-wrapper ul.bxslider').css('left', '0px');
      if (ui.position.left > 0 ) {
        slider.goToNextSlide();
      }
      else {
        slider.goToPrevSlide();
      }
     $('.slider .dragg-wrap').css('left', '0px');
    }
});

Answer 2

是的，我的朋友可以在Jquery UI中使用jQuery Draggable https://jqueryui.com/draggable/

如何使用鼠标拖动滑动bxslider中的幻灯片

2 个答案: