Как остановить Slick Slider при input загрузке файла?

Question

Как сделать так, чтобы autoplay деактивировался в моменте, пока пользователь загружает файл?

jQuery(document).ready(function($) {
    
$('.slider').slick({
        dots: true,
        arrows: false,
        slidesToShow:1,
    autoplay: true,
   });
});

.slide-s {

background: orange;
min-height: 100;
text-align: center;

}
.slide-s:nth-child(2) {
   background: red;
}
.slide-s:nth-child(3) {
   background: red;
}

<div class="slider">
   <div class="slide-s">Выберите и отправьте файл:<br><input type="file"></div>
    <div class="slide-s">Выберите и отправьте файл:<br><input type="file"></div>
    <div class="slide-s">Выберите и отправьте файл:<br><input type="file"></div>
</div>

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.8.1/slick.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.8.1/slick.min.css" rel="stylesheet"/>
<link href="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.8.1/slick-theme.css" rel="stylesheet"/>

Answer 1

Как написано в документации, можно воспользоваться методами slickPause и slickPlay.

jQuery(document).ready(function($) {

  $('.slider').slick({
    dots: true,
    arrows: false,
    slidesToShow: 1,
    autoplay: true,
    autoplaySpeed: 200
  });

  $('#pause').click(function() {
    $('.slider').slick('slickPause');
  });

  $('#play').click(function() {
    $('.slider').slick('slickPlay');
  });
});

.slide-s {
  background: orange;
  min-height: 100;
  text-align: center;
}

.slide-s:nth-child(2) {
  background: red;
}

.slide-s:nth-child(3) {
  background: red;
}

<div class="slider">
  <div class="slide-s">Выберите и отправьте файл:<br><input type="file"></div>
  <div class="slide-s">Выберите и отправьте файл:<br><input type="file"></div>
  <div class="slide-s">Выберите и отправьте файл:<br><input type="file"></div>
</div>

<button id="pause">pause</button>
<button id="play">play</button>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.8.1/slick.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.8.1/slick.min.css" rel="stylesheet" />
<link href="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.8.1/slick-theme.css" rel="stylesheet" />

Answer 2

$('.slider').slick({
  dots: true,
  arrows: false,
  slidesToShow: 1,
  autoplay: true,
});



$('.slide-s').click(function() {
  $('.slider').slick('slickPause');
});


$('input[type="file"]').change(function() {
  console.log($(this)[0].files.length);
  if ($(this)[0].files.length >= 1) {
    $('.slider').slick('slickPlay');
  }
});

.slide-s {
  background: orange;
  min-height: 100;
  text-align: center;
}

.slide-s:nth-child(2) {
  background: red;
}

.slide-s:nth-child(3) {
  background: red;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.8.1/slick.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.8.1/slick.min.css" rel="stylesheet" />
<link href="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.8.1/slick-theme.css" rel="stylesheet" />

<div class="slider">
  <div class="slide-s">Выберите и отправьте файл:<br><input type="file"></div>
  <div class="slide-s">Выберите и отправьте файл:<br><input type="file"></div>
  <div class="slide-s">Выберите и отправьте файл:<br><input type="file"></div>
</div>

БЛОГ НА HUSL

Как остановить Slick Slider при input загрузке файла?

Ответы (2 шт):