Блог

Я довольно новичок в веб-разработке и прошу прощения, если мой английский нарушен. Я пытаюсь реализовать автозапуск Slick в этом разделе, где всплывающие подсказки должны появляться автоматически. Я реализовал стрелки, которые работают отлично, но помимо этого мне также нужно автозапуск. Может кто-нибудь дать мне какие-либо идеи, как автозапуск slick-carousel?

[HTML]

 <section class="section showcase" id="section2">
  <div class="second-background"></div>
  <div class="map" id="pin-container">
     <div class="slider">
       <i class="fas fa-chevron-left slide-left"></i>
       <i class="fas fa-chevron-right slide-right"></i>
     </div>
  </div>
</section>
  

[JS]

 function initServicesSlider() {
   var width = $(window).width();

   if (width <= 992) {
      $('.service-slider').slick({
         mobileFirst: true,
         touchThreshold: 10,
      });
      $('.services div .slide-right').click(function () {
         $('.service-slider').slick('slickNext');
      });
      $('.services div .slide-left').click(function () {
         $('.service-slider').slick('slickPrev');
      });
}
  

Это должно быть что-то с:

 $(.'service-slider').slick({
  autoplay: true,
  autoplaySpeed: 3000,
})
  

но я не знаю, как это реализовать.

PS: Я импортировал slick-carousel

Спасибо за помощь!:)

https://i.stack.imgur.com/Wfjp3.png

Здесь есть несколько вещей:

1. Вам нужно закрыть if инструкцию

  if (width <= 992) {
      $('.service-slider').slick({
         mobileFirst: true,
         touchThreshold: 10,
      });
      $('.services div .slide-right').click(function () {
         $('.service-slider').slick('slickNext');
      });
      $('.services div .slide-left').click(function () {
         $('.service-slider').slick('slickPrev');
      });
  }
  

2. $(.'service-slider') должно быть $('.service-slider').slick... (перемещение точки в строку).

3. Вы вызываете класс, который в вашем HTML выше не существует. Вам просто нужно позвонить $('.slider').slick... .

В дополнение к исправлениям разметки # 1 и # 2, рекомендованным @nihiser, вам следует объединить весь ваш код инициализации Slick в одном вызове:

 $('.service-slider').slick({
  mobileFirst: true,
  touchThreshold: 10,
  autoplay: true,
  autoplaySpeed: 3000,
});
  

Это предполагает, что вы включаете свои слайды с разметкой, которая выглядит следующим образом:

     <div class="slider">
       <div class="service-slider">
           <div>Slide 1 Contents</div>
           <div>Slide 2 Contents</div>
           <div>Slide 3 Contents</div>
           ...
       </div>
       <i class="fas fa-chevron-left slide-left"></i>
       <i class="fas fa-chevron-right slide-right"></i>
   </div>
  

Вы не хотите включать свои стрелки в список <div> , содержащий ваши слайды, иначе Slick будет рассматривать их как дополнительные слайды.