光滑的旋转木马上的图像沿着鼠标拖动移动答案

【问题标题】：Images on slick carousel moving along mouse dragging光滑的旋转木马上的图像沿着鼠标拖动移动
【发布时间】：2018-10-13 10:45:58
【问题描述】：

场景：

使用 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>

【问题讨论】：

标签： javascript jquery html css slick.js

【解决方案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>

【讨论】：