Images on slick carousel moving along mouse dragging

Question

Scenario :

• Working with Slick carousel and the images I'm using move along the mouse when dragging the slider, it works properly when dragging from blank space.
• When the slider triggers from said images, the image gets stuck to the mouse until I click again or move the mouse away from the slider.

Image being dragged.

Here's my code:

  <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

Try with draggable false on the images or put a transparent overlay on it

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