Изображения на скользкой карусели движутся вдоль мыши

Question

Сценарий:

• Работа с каруселью Slick и изображениями, которые я использую, перемещаются вдоль мыши при перетаскивании ползунка, она работает правильно при перетаскивании из пустого пространства.
• Когда ползунок срабатывает на указанных изображениях, изображение застревает в мышке до тех пор, пока я снова не нажму или не отведу мышь от ползунка.

Перетаскиваемое изображение.

Вот мой код:

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