圆滑的传送带上的图像会随着鼠标拖动而移动

Question

场景：

• 使用Slick轮播和我使用的图像在拖动滑块时会沿鼠标移动，从空白空间拖动时它可以正常工作。
• 当滑块从所述图像触发时，图像被卡在 鼠标，直到我再次单击或将鼠标移离滑块为止。

Image being dragged.

这是我的代码：

  <script type="text/javascript">
     $(document).on('ready', function () {
            $(".slideslick").slick({
  slidesToScroll: 1,
  autoplay: true,
  autoplaySpeed: 5000,
  centerMode: true,
  slidesToShow: 3,
  arrows: false,
});
			
        });
  </script>

.slideslick {
  width: 100%;
  height: 160 px;
  margin-right: auto;
  margin-left: auto;
}
.slide1 {
  width: 200px;
  height: 140px;
}
.slide2 {
  width: 200px;
  height: 140px;
}
.slide3 {
  width: 200px;
  height: 140px;
}
.slide4 {
  width: 200px;
  height: 140px;
}
.slide5 {
  width: 200px;
  height: 140px;
}
.cliente1 {
  display: block;
  position: relative;
  margin-left: auto;
  margin-right: auto;
}
.cliente2 {
  display: block;
 position: relative;
  margin-left: auto;
  margin-right: auto;
}
.cliente3 {
  display: block;
  position: relative;
  margin-left: auto;
  margin-right: auto;
}
.cliente4 {
  display: block;
  position: relative;
  margin-left: auto;
  margin-right: auto;
}
.cliente5 {
  display: block;
  position: relative;
  margin-left: auto;
  margin-right: auto;
}

<div class="slideslick">
        <div class="slide1">
                <img src="assets/images/logonando.png" class="cliente1">
        </div>
        <div class="slide2">
                <img src="assets/images/logoyaya.png" class="cliente2">
        </div>
        <div class="slide3">
                <img src="assets/images/logoincomparables.png" class="cliente3">
        </div>
        <div class="slide4">
                <img src="assets/images/logoincomparables.png" class="cliente4">
        </div>
        <div class="slide5">
                <img src="assets/images/logoincomparables.png" class="cliente5">
        </div>
</div>

Answer 1

尝试在图像上使用可拖动的false或在其上放置透明覆盖物

  <script type="text/javascript">
     $(document).on('ready', function () {
            $(".slideslick").slick({
  slidesToScroll: 1,
  autoplay: true,
  autoplaySpeed: 5000,
  centerMode: true,
  slidesToShow: 3,
  arrows: false,
});
			
        });
  </script>

.slideslick {
  width: 100%;
  height: 160 px;
  margin-right: auto;
  margin-left: auto;
}
.slide1 {
  width: 200px;
  height: 140px;
}
.slide2 {
  width: 200px;
  height: 140px;
}
.slide3 {
  width: 200px;
  height: 140px;
}
.slide4 {
  width: 200px;
  height: 140px;
}
.slide5 {
  width: 200px;
  height: 140px;
}
.cliente1 {
  display: block;
  position: relative;
  margin-left: auto;
  margin-right: auto;
}
.cliente2 {
  display: block;
 position: relative;
  margin-left: auto;
  margin-right: auto;
}
.cliente3 {
  display: block;
  position: relative;
  margin-left: auto;
  margin-right: auto;
}
.cliente4 {
  display: block;
  position: relative;
  margin-left: auto;
  margin-right: auto;
}
.cliente5 {
  display: block;
  position: relative;
  margin-left: auto;
  margin-right: auto;
}

.transparent-overlay {
position:absolute;top:0;right:0;left:0;bottom:0;background-color:transparent;
}

<div class="slideslick">
        <div class="slide1">
                <img draggable="false" src="assets/images/logonando.png" class="cliente1">
<div class="transparent-overlay"></div>
        </div>
        <div class="slide2">
                <img  draggable="false"src="assets/images/logoyaya.png" class="cliente2">
        </div>
        <div class="slide3">
                <img draggable="false" src="assets/images/logoincomparables.png" class="cliente3">
        </div>
        <div class="slide4">
                <img draggable="false" src="assets/images/logoincomparables.png" class="cliente4">
        </div>
        <div class="slide5">
                <img draggable="false" src="assets/images/logoincomparables.png" class="cliente5">
        </div>
</div>