Slick slider. Сделать автоматическое пролистывание слайдов только пока курсор наведён на слайдер.

@Artiom27111990 · Регистрация: 10.03.2020

Студворк — интернет-сервис помощи студентам

Здравствуйте всем!
Помогите пожалуйста настроить slick слайдер
Проблема в том, что нужно сделать автоматическое пролистывание слайдов только пока курсор наведён на слайдер. Вот как выглядит js. Но при таком раскладе слайд пролистывается только один раз

JavaScript
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
$(function () {
 
$('.slider__slick').slick({
slidesToShow: 1,
slidesToScroll: 1,
autoplay: true,
autoplaySpeed: 2000,
});
 
$(".slider__slick").hover(function(){
 
$(".slider__slick").slick('slickNext')
 
})
});

@gogolik · 10.03.2020, 13:56

Попробуйте так.

JavaScript
1
2
3
4
5
6
7
8
9
10
11
$(function(){
    $('.slider__slick').slick({
        slidesToShow: 1,
        slidesToScroll: 1
    });
    $(".slider__slick").hover(function(){
        setTimeuot(function(){
            $(".slider__slick").slick('slickNext');
        }, 2000)
    })
});

@Artiom27111990 · 10.03.2020, 14:00 **[ТС]**

Попробовал.
Не работает, даже одно пролистывание

@gogolik · 10.03.2020, 14:09

Artiom27111990, ну да, потому что я опечатался.

JavaScript
1
setTimeout

@Artiom27111990 · 10.03.2020, 14:18 **[ТС]**

Попробовал setInterval вместо setimeout. Заработал при наведении! Но не отключается, когда убираешь курсор

Добавлено через 1 минуту
Теперь срабатывает, но только одно пролистывание

Добавлено через 2 минуты
Вроде такая мелочь, а вчера всю ночь просидел в поисках решения, и всё время близко к решению, но нет результата

@gogolik · 10.03.2020, 14:22

Artiom27111990,

JavaScript
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
var timeout;
function nextSlide(){
  $('.main-slider').slick('slickNext');
  timeout = setTimeout(function(){
    nextSlide();
  },2000);
}
function stopAutoplay(timeout){
    window.clearTimeout(timeout);
}
$('.slider__slick').on('mouseover', function(){
    nextSlide();
});
$('.slider__slick').on('mouseout', function(){
    stopAutoplay(timeout);
});

@Artiom27111990 · 10.03.2020, 14:24 **[ТС]**

Подскажите пожалуйста как правильно всавить этот код

@gogolik · 10.03.2020, 14:27

Artiom27111990, вместо своего кода. В 3 строчке свой класс подставьте ещё, забыл там поменять. Проверял у себя, работает.

@Artiom27111990 · 10.03.2020, 14:34 **[ТС]**

Я вставил так :

JavaScript
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
$(function(){
    var timeout;
function nextSlide(){
  $('.slider__slick').slick('slickNext');
  timeout = setTimeout(function(){
    nextSlide();
  },2000);
}
function stopAutoplay(timeout){
    window.clearTimeout(timeout);
}
$('.slider__slick').on('mouseover', function(){
    nextSlide();
});
$('.slider__slick').on('mouseout', function(){
    stopAutoplay(timeout);
});
});

Добавлено через 1 минуту
Не работает

Добавлено через 1 минуту
Ура. Получилось! Спасибо вам огромное!!!

@Artiom27111990 · 12.03.2020, 15:09 **[ТС]**

Снова здравствуйте!)
Раскажите пожалуйста как теперь в этом слайдере сделать так, чтобы после того, как убираешь курсор слайдер не только останавливался, а ещё и возвращался к стартовому слайду.
Ещё нужно чтобы при наведении слайдер начинал пререлистывание не сразу, а спустя 1 секунду

@gogolik · 12.03.2020, 15:15

Artiom27111990, ну вы хоть немного пытайтесь вникнуть в то, что вам пишут.

JavaScript
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
$(function(){
var timeout;
  function nextSlide(){
    $('.slider__slick').slick('slickNext');
    timeout = setTimeout(function(){
      nextSlide();
  },2000);
}
function stopAutoplay(timeout){
  window.clearTimeout(timeout);
}
$('.slider__slick').on('mouseover', function(){
  setTimeout(function(){
    nextSlide();
  }, 1000);
});
$('.slider__slick').on('mouseout', function(){
  stopAutoplay(timeout);
  $('.slider__slick').slick("slickGoTo", 0);
});
});

@Artiom27111990 · 12.03.2020, 15:28 **[ТС]**

Я очень пытаюсь. Просто я в js пока практически полный 0.
А слайдер теперь не выключается после того как уводишь курсор)

@gogolik · 12.03.2020, 15:37

JavaScript
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
var timeout;
var slider = $('.slider__slick');
function nextSlide(){
    setTimeout(function(){
        slider.slick('slickNext');
        timeout = setTimeout(function(){
            nextSlide();
        },2000);
    },1000)
}
function stopAutoplay(timeout){
    window.clearTimeout(timeout);
}
slider.on('mouseover', function(){
    nextSlide();
});
slider.on('mouseout', function(){
    stopAutoplay(timeout);
    slider.slick("slickGoTo", 0);
});

@Artiom27111990 · 12.03.2020, 15:45 **[ТС]**

ничего не поменялось

@gogolik · 12.03.2020, 15:49

Artiom27111990, я проверил - прекрасно работает.

@Artiom27111990 · 12.03.2020, 15:52 **[ТС]**

JavaScript
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
$(function(){
    $('.slider__slick').slick({
        slidesToShow: 1,
        slidesToScroll: 1
    });
  var timeout;
var slider = $('.slider__slick');
function nextSlide(){
    setTimeout(function(){
        slider.slick('slickNext');
        timeout = setTimeout(function(){
            nextSlide();
        },2000);
    },1000)
}
function stopAutoplay(timeout){
    window.clearTimeout(timeout);
}
slider.on('mouseover', function(){
    nextSlide();
});
slider.on('mouseout', function(){
    stopAutoplay(timeout);
    slider.slick("slickGoTo", 0);
});
 
});

вот мой весь файл js.
Слайдер стартует как надо, с задержкой. Слайд возвращается к стартовому. Но после начинает пролистываться дальше
не срабатывает stopautoplay

@gogolik · 12.03.2020, 15:56

Artiom27111990, в консоли нет ошибок? Кеш сбрасывали?

@Artiom27111990 · 12.03.2020, 16:03 **[ТС]**

В консоле ошибки есть. Файл вложил. А кешь вы имеете ввиду чистку кеша браузера?

@gogolik · 12.03.2020, 16:04

Artiom27111990, ctrl+f5.

@Artiom27111990 · 12.03.2020, 16:46 **[ТС]**

Да, конечно. Сбрасывал

Добавлено через 35 минут

JavaScript
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
$(function(){
    $('.slider__slick').slick({
        slidesToShow: 1,
        slidesToScroll: 1
    });
 var timeout;
  function nextSlide(){
    $('.slider__slick').slick('slickNext');
    timeout = setTimeout(function(){
      nextSlide();
  },2000);
}
function stopAutoplay(timeout){
  window.clearTimeout(timeout);
}
$('.slider__slick').on('mouseover', function(){
  setTimeout(function(){
    nextSlide();
  });
});
$('.slider__slick').on('mouseout', function(){
  stopAutoplay(timeout);
  $('.slider__slick').slick("slickGoTo", 0);
});
 
});

Вставил код вот так. В хроме сработало пару раз), потом опять не работало. В опрере заработало всё как надо и всегда всё срабатывает)
Видимо что-то не так с хромом. Если вас не затруднит можно я чуть позже скину вам ссылку на этот сайт, когда на хостинг его выложу, чтобы убедиться, что всё в ппорядке перед показом заказчику?

Добавлено через 5 минут
Хром очень странно себя ведёт, только что проверил сработал слайдер несколько раз как нужно. Потом то слайдер не возвращается, то не останавливается. Обновляю страницу опять всё работает.

Новые блоги и статьи Все статьи Все блоги /
PhpStorm 2025.3: WSL Terminal всегда стартует в ~ and_y87 14.12.2025 PhpStorm 2025. 3: WSL Terminal всегда стартует в ~ (home), игнорируя директорию проекта Симптом: После обновления до PhpStorm 2025. 3 встроенный терминал WSL открывается в домашней директории. . .	Access VikBal 11.12.2025 Помогите пожалуйста !! Как объединить 2 одинаковые БД Access с разными данными.	Новый ноутбук volvo 07.12.2025 Всем привет. По скидке в "черную пятницу" взял себе новый ноутбук Lenovo ThinkBook 16 G7 на Амазоне: Ryzen 5 7533HS 64 Gb DDR5 1Tb NVMe 16" Full HD Display Win11 Pro	Музыка, написанная Искусственным Интеллектом volvo 04.12.2025 Всем привет. Некоторое время назад меня заинтересовало, что уже умеет ИИ в плане написания музыки для песен, и, собственно, исполнения этих самых песен. Стихов у нас много, уже вышли 4 книги, еще 3. . .	От async/await к виртуальным потокам в Python IndentationError 23.11.2025 Армин Ронахер поставил под сомнение async/ await. Создатель Flask заявляет: цветные функции - провал, виртуальные потоки - решение. Не threading-динозавры, а новое поколение лёгких потоков. Откат?. . .
Поиск "дружественных имён" СОМ портов Argus19 22.11.2025 Поиск "дружественных имён" СОМ портов На странице: https:/ / norseev. ru/ 2018/ 01/ 04/ comportlist_windows/ нашёл схожую тему. Там приведён код на С++, который показывает только имена СОМ портов, типа,. . .	Сколько Государство потратило денег на меня, обеспечивая инсулином. Programma_Boinc 20.11.2025 Сколько Государство потратило денег на меня, обеспечивая инсулином. Вот решила сделать интересный приблизительный подсчет, сколько государство потратило на меня денег на покупку инсулинов. . . .	Ломающие изменения в C#.NStar Alpha Etyuhibosecyu 20.11.2025 Уже можно не только тестировать, но и пользоваться C#. NStar - писать оконные приложения, содержащие надписи, кнопки, текстовые поля и даже изображения, например, моя игра "Три в ряд" написана на этом. . .	Мысли в слух kumehtar 18.11.2025 Кстати, совсем недавно имел разговор на тему медитаций с людьми. И обнаружил, что они вообще не понимают что такое медитация и зачем она нужна. Самые базовые вещи. Для них это - когда просто люди. . .	Создание Single Page Application на фреймах krapotkin 16.11.2025 Статья исключительно для начинающих. Подходы оригинальностью не блещут. В век Веб все очень привыкли к дизайну Single-Page-Application . Быстренько разберем подход "на фреймах". Мы делаем одну. . .

@Artiom27111990 0 / 0 / 0 Регистрация: 10.03.2020 Сообщений: 14
	10.03.2020, 14:00 [ТС]
	Попробовал. Не работает, даже одно пролистывание 0

@Artiom27111990 0 / 0 / 0 Регистрация: 10.03.2020 Сообщений: 14
	10.03.2020, 14:18 [ТС]
	Попробовал setInterval вместо setimeout. Заработал при наведении! Но не отключается, когда убираешь курсор Добавлено через 1 минуту Теперь срабатывает, но только одно пролистывание Добавлено через 2 минуты Вроде такая мелочь, а вчера всю ночь просидел в поисках решения, и всё время близко к решению, но нет результата 0

@Artiom27111990 0 / 0 / 0 Регистрация: 10.03.2020 Сообщений: 14
	10.03.2020, 14:24 [ТС]
	Подскажите пожалуйста как правильно всавить этот код 0

@gogolik Супер-модератор 3941 / 2044 / 829 Регистрация: 13.03.2010 Сообщений: 6,722
	10.03.2020, 14:27
	Сообщение было отмечено gogolik как решение Решение Artiom27111990, вместо своего кода. В 3 строчке свой класс подставьте ещё, забыл там поменять. Проверял у себя, работает. 1

@Artiom27111990 0 / 0 / 0 Регистрация: 10.03.2020 Сообщений: 14
	12.03.2020, 15:09 [ТС]
	Снова здравствуйте!) Раскажите пожалуйста как теперь в этом слайдере сделать так, чтобы после того, как убираешь курсор слайдер не только останавливался, а ещё и возвращался к стартовому слайду. Ещё нужно чтобы при наведении слайдер начинал пререлистывание не сразу, а спустя 1 секунду 0

@Artiom27111990 0 / 0 / 0 Регистрация: 10.03.2020 Сообщений: 14
	12.03.2020, 15:28 [ТС]
	Я очень пытаюсь. Просто я в js пока практически полный 0. А слайдер теперь не выключается после того как уводишь курсор) 0

@Artiom27111990 0 / 0 / 0 Регистрация: 10.03.2020 Сообщений: 14
	12.03.2020, 15:45 [ТС]
	ничего не поменялось 0

@gogolik Супер-модератор 3941 / 2044 / 829 Регистрация: 13.03.2010 Сообщений: 6,722
	12.03.2020, 15:49
	Artiom27111990, я проверил - прекрасно работает. 0

@gogolik Супер-модератор 3941 / 2044 / 829 Регистрация: 13.03.2010 Сообщений: 6,722
	12.03.2020, 15:56
	Artiom27111990, в консоли нет ошибок? Кеш сбрасывали? 0

@Artiom27111990 0 / 0 / 0 Регистрация: 10.03.2020 Сообщений: 14
	12.03.2020, 16:03 [ТС]
	В консоле ошибки есть. Файл вложил. А кешь вы имеете ввиду чистку кеша браузера? Миниатюры 0

@gogolik Супер-модератор 3941 / 2044 / 829 Регистрация: 13.03.2010 Сообщений: 6,722
	12.03.2020, 16:04
	Artiom27111990, ctrl+f5. 0

Slick slider. Сделать автоматическое пролистывание слайдов только пока курсор наведён на слайдер.

Решение