1

Как сделать так, чтобы 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"/>

5
  • Может, почитать документацию? 24 дек 2020 в 9:54
  • @StepanKasyanenko ничего подобного нет. Есть только stopOnHover, но он не работает в моей ситуации
    – Alex
    24 дек 2020 в 10:05
  • Интересно, как вы читаете документацию? kenwheeler.github.io/slick ищите по словам slickPause и slickPlay 24 дек 2020 в 10:09
  • $('.slide-s').click(function() { $('.slider').slick('slickPause'); }); 24 дек 2020 в 10:15
  • @Stepan Kasyanenko прошу прощения, в процессе борьбы с синдромом дефицита внимания
    – Alex
    24 дек 2020 в 10:43

2 ответа 2

1

$('.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>

0

Как написано в документации, можно воспользоваться методами 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" />

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.