Как вернуть в исходное положение слайдер slick после mouseover?

Question

[redesupar]

Есть слайдер картинок товаров, там всегда по 3 картинки

<div class="products__item-images js-slick-products slick-initialized slick-slider slick-dotted">
<button class="slick-arrow slick-prev" style="display: inline-block;"><svg class="icon-arrow-left">
</button>
<div class="slick-list draggable">
<div class="slick-track">

<div class="slick-slide slick-current slick-active">
<div>
1</div>
</div>
<div class="slick-slide" >
<div>2</div></div>

<div class="slick-slide" >
<div>3</div></div>



</div></div>
<button class="slick-arrow slick-next" style="display: inline-block;">
</button>
<ul class="slick-dots" style="display: flex;" role="tablist"><li class="" role="presentation">
<button type="button" role="tab" id="slick-slide-control50" aria-controls="slick-slide50" aria-label="1 of 3" tabindex="-1">1</button></li><li role="presentation">
<button type="button" role="tab" id="slick-slide-control51" aria-controls="slick-slide51" aria-label="2 of 3" tabindex="-1">2</button></li><li role="presentation" class="slick-active">
<button type="button" role="tab" id="slick-slide-control52" aria-controls="slick-slide52" aria-label="3 of 3" tabindex="0" aria-selected="true">3</button></li></ul></div>

Как мне сделать так чтобы когда мышка уходила от слайдера, то она возвращалась обратно?
Пытался и через mouseover и mouseout и вешал на slisck-dots и на сам слайдер, вообще не реагирует

$('. js-slick-products').mouseout(function() {
	 $('. js-slick-products').slick('slickGoTo', 0,  true)
});

Весь код слик слайдера, туда еще непопали lazyload

код

function slick(e) {
var t,
s = '',
o = '';
(null != e && ".js-gallery" != e) ||
$(".js-gallery").each(function () {
var e = $(this),
t = e.find(".js-gallery-slides").not(".slick-initialized"),
s = e.find(".js-gallery-thumbs");
0 != t.length &&
(t.slick({ slidesToShow: 1, slidesToScroll: 1, arrows: !1, fade: !1, infinite: !1, asNavFor: s }),
s.slick({
vertical: !0,
slidesToShow: 4,
slidesToScroll: 1,
asNavFor: t,
arrows: !0,
dots: !3,
focusOnSelect: !0,
mobileFirst: !0,
nextArrow: '',
prevArrow: '',
variableWidth: !0,
infinite: !1,
responsive: [{ breakpoint: 991, settings: { vertical: !0, variableWidth: !1 } }],
}));
}),
// Прокрутка слайдера при навидении на миниатюру
$('.sku__thumbs-item').mouseenter(function (e) {
var btn = $(this);
btn[0].click();
});
(null != e && ".js-slick-other" != e) ||
((t = 0),
$("#popupprod input[name='activelempopup']").val() && (t = parseInt($("#popupprod input[name='activelempopup']").val())),
$(".js-slick-other").slick({ centerMode: !0, slidesToShow: 5, slidesToScroll: 1, initialSlide: t, arrows: !0, fade: !1, mobileFirst: !0, nextArrow: o, prevArrow: s, variableWidth: !0 })),
(null != e && ".js-slick-nav" != e) ||
(991 < screen.width &&
$(".js-slick-nav").slick({
dots: !3,
arrows: !0,
cssEase: "cubic-bezier(0.645, 0.045, 0.355, 1)",
mobileFirst: !0,
nextArrow: '',
prevArrow: '',
})),
(null != e && ".js-slick-slides" != e) ||
$(".js-slick-slides").each(function () {
$(this).slick({
dots: !3,
arrows: !0,
cssEase: "cubic-bezier(0.645, 0.045, 0.355, 1)",
mobileFirst: !0,
nextArrow: '',
prevArrow: '',
});
}),

(null != e && ".js-slick-products" != e) || $(".js-slick-products").not(".slick-initialized").slick({
//dots: !3, arrows: !0, cssEase: "cubic-bezier(0.645, 0.045, 0.355, 1)", mobileFirst: !0, nextArrow: o, prevArrow: s
dots: true,
arrows: true,
cssEase: 'cubic-bezier(0.645, 0.045, 0.355, 1)',
mobileFirst: true,
nextArrow: o,
prevArrow: s
// draggable: false
}),
/*991 < screen.width &&
($(".js-slick-products").mouseover(function () {
$(this).slick("slickSetOption", { speed: 500, autoplaySpeed: 500 }, !1).slick("slickPlay");
}),
$(".js-slick-products").mouseout(function () {
$(this).slick("slickPause");
}));*/
(null != e && ".js-slick-categories" != e) ||
$(window).on("load resize orientationchange", function () {
$(".js-slick-categories").each(function () {
var e = $(this);
768 < $(window).width()
? e.hasClass("slick-initialized") && e.slick("unslick")
: e.hasClass("slick-initialized") ||
e.slick({
slidesToShow: 1,
slidesToScroll: 1,
infinite: !1,
arrows: !1,
dots: !3,
mobileFirst: !0,
variableWidth: !0,
responsive: [
{ breakpoint: 576, settings: { slidesToShow: 2 } },
{ breakpoint: 768, settings: { slidesToShow: 3 } },
],
});
});
}),

(null != e && ".js-slick-category" != e) ||
$(".js-slick-category").slick({
slidesToShow: 1,
slidesToScroll: 1,
infinite: !1,
arrows: !1,
mobileFirst: !0,
variableWidth: !0,
responsive: [
{ breakpoint: 480, settings: { slidesToShow: 2 } },
{ breakpoint: 768, settings: { slidesToShow: 3 } },
{ breakpoint: 992, settings: { slidesToShow: 4 } },
],
}),

(null != e && ".js-slick-article" != e) ||
$(".js-slick-article").slick({
slidesToShow: 1,
slidesToScroll: 1,
infinite: !1,
arrows: !1,
variableWidth: !0,
mobileFirst: !0,
responsive: [
{ breakpoint: 480, settings: { slidesToShow: 2 } },
{ breakpoint: 991, settings: { slidesToShow: 3 } },
{ breakpoint: 1199, settings: { slidesToShow: 4, lazyLoad: "progressive" } },
],
}),

(null != e && ".js-slick-reviews_catalog" != e) || $(".js-slick-reviews_catalog").slick({ slidesToShow: 1, slidesToScroll: 1, infinite: !1, arrows: !0, nextArrow: o, prevArrow: s }),
$(".js-slick-compare").on("init afterChange", function (e, t) {
$.fn.matchHeight._update(),
$(".js-slick-compare-prev, .js-slick-compare-next").removeClass("slick-disabled"),
$(".js-slick-compare").find(".slick-prev").is(".slick-disabled") && $(".js-slick-compare-prev").addClass("slick-disabled"),
$(".js-slick-compare").find(".slick-next").is(".slick-disabled") && $(".js-slick-compare-next").addClass("slick-disabled");
}),
$(window).on("resize", function (e) {
$.fn.matchHeight._update();
}),
(null != e && ".js-slick-compare" != e) || $(".js-slick-compare").slick({ slidesToShow: 2, slidesToScroll: 1, infinite: !1, arrows: !0, mobileFirst: !0, responsive: [{ breakpoint: 768, settings: { slidesToShow: 3 } }] }),
$(document).on("click", ".js-slick-compare-prev", function (e) {
e.preventDefault(), $(".js-slick-compare").slick("slickPrev");
}),
$(document).on("click", ".js-slick-compare-next", function (e) {
e.preventDefault(), $(".js-slick-compare").slick("slickNext");
});
$('.js-slick-products').mouseout(function() {
$('.js-slick-products').slick('slickGoTo', 0, true)
});
});

}

Comments

[Александр]

redesupar

Попробуй использовать событие mouseleave вместо mouseout.

$('.js-slick-products').mouseleave(function() {
   $('.js-slick-products').slick('slickGoTo', 0, true);
});

[redesupar]

Александр, ничего не изменилось

[Александр]

redesupar,
Можете привести пример в codepen.io?

[redesupar]

Александр, почему то не получилось прям точно его воспроизвести, сам сайт
и в карточках товаров

[Александр]

redesupar,

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

$(document).ready(function(){
var $slider = $(".slick-list");
var $slides = $slider.find(".slick-slide");
var currentSlide = 0;

$slider.mouseleave(function() {
$('.slick-slider').slick('slickGoTo', 0,  true)
$slides.removeClass("slick-current slick-active");
$slides.eq(currentSlide).addClass("slick-current slick-active");
});
});

Попробуй и отпишись)

[Александр]

redesupar,

Сорри, вот так лучше, а то я проверял стили и не удалил)

$(document).ready(function(){
var $slider = $(".slick-list");

$slider.mouseleave(function() {
$('.slick-slider').slick('slickGoTo', 0,  true)
});
});

Или так, чтобы уменьшить количество вызовов jQuery:

$(document).ready(function(){
  var $slider = $(".slick-list");
  var $slickSlider = $('.slick-slider');
  
  $slider.mouseleave(function() {
    $slickSlider.slick('slickGoTo', 0,  true)
  });
});

[redesupar]

Александр, спасибо что помогаешь таким кодом) поставил, обновил кэши но проблема не решилась, я его вставил в конец app.min.js

[Александр]

redesupar,
Код точно рабочий, я проверял у тебя на сайте через консоль, ищи проблему с выводом. Возможно вставил куда то не туда)
Буду за компьютером, посмотрю)

[redesupar]

Александр, да я и в футер и в хедер, ничего неполучилось)

[redesupar]

Александр, не получилось посмотреть?)

Answer 1

[redesupar]

В итоге сделал так и заработало.

$(document).ready(function(){

  $('.slick-dots li').mouseleave(function (e) {
    var parent = $(this).parent().parent();
    console.log("первый слайд");
    $(parent).slick('slickGoTo', 0,  true);
  });

});