Slick slider свайп не работает

445

22 декабря 2018, 20:10

Всем привет.

Есть slick-slider на странице целых 4 .

Проблема очень экстрординарная так как все слайдеры работают кроме 3-го.У всех прописан один и тот же стиль

$(function(){
    try
    {
        $( 'section.cinema .slider, section.news .slider, section.shopping .slider, section.restaurants .slider' ).slick({
            dots: false,
            infinite: true,
            speed: 300,
            centerMode: false,
            variableWidth: true,
            swipe:true,
            slidesToShow: 3,
            slidesToScroll: 1,
            responsive: [
                {
                    breakpoint: 400,
                    settings: {
                        slidesToShow: 1,
                        slidesToScroll: 1
                    }
                },
                {
                    breakpoint: 768,
                    settings: {
                        slidesToShow: 2,
                        slidesToScroll: 1
                    }
                },
                {
                    breakpoint: 1140,
                    settings: {
                        slidesToShow: 3,
                        slidesToScroll: 1
                    }
                }
            ]
        });
    }
    catch( $e ){}
});

section.cinema .slider,
section.news .slider
section.shopping .slider слайдер которое не работает
section.restaurants .slider

Третий работает только стрелками а swipe не работает.У других все работает. Очень прошу помогите.

Мои попытки.

1.Вместо $( 'section.cinema .slider, section.news .slider, section.shopping .slider, section.restaurants .slider' ). этого проста написать $(.slider' ).

2.Изменить версию слайдера я поставил 1.8.0 также 1.9.0 тоже не помогло

3.Также добавить для каждого класса свою функцию слайдера тоже не помогло

Правка.

Я пробовал добавить версию 1.5.9 тогда свайп работал только один раз

Ссылка на слайдер slick

Answer 1

А не работает всё потому-что разная ширина слайдов, у всех остальных слайдеров всё в display:block + img и соответственно variableWidth параметр отрабатывает верно, а в 3-м варианте background-image + flex-wrap: wrap.

Это те изменения которые вам необходимо ввести для корректной работы в css и scripts.min.js . На 3-м слайдеры стоит display:flex , скиньте его в display:block, в целом flex не нужен и уж если используешь flex то flex-wrap:wrap в слайдере не должно быть, элементы в 3 ряда падают. Также убираем variableWidth: true. Тестируйте, у меня всё завелось.

$(function () { 
    try { 
        $("section.cinema .slider, section.news .slider, section.restaurants .slider").slick({ 
            dots: false, 
            infinite: true, 
            speed: 300, 
            centerMode: false, 
            variableWidth: true, 
            slidesToShow: 3, 
            slidesToScroll: 1, 
            draggable: true, 
            touchMove: true, 
            swipe: true, 
            touchThreshold: 100, 
            swipeToSlide: true, 
            responsive: [{breakpoint: 400, settings: {slidesToShow: 1, slidesToScroll: 1}}, { 
                breakpoint: 768, 
                settings: {slidesToShow: 2, slidesToScroll: 1} 
            }, {breakpoint: 1140, settings: {slidesToShow: 3, slidesToScroll: 1}}] 
        }) 
    } catch ($e) { 
    } 
}); 
$(function () { 
    try { 
        $("section.shopping .slider").slick({ 
            dots: false, 
            infinite: true, 
            speed: 300, 
touchThreshold:1, 
            slidesToShow: 3, 
            slidesToScroll: 1, 
            draggable: true, 
            touchMove: true, 
            touchThreshold: 100, 
            swipeToSlide: true, 
            responsive: [{breakpoint: 400, settings: {slidesToShow: 1, slidesToScroll: 1}}, { 
                breakpoint: 768, 
                settings: {slidesToShow: 2, slidesToScroll: 1} 
            }, {breakpoint: 1140, settings: {slidesToShow: 3, slidesToScroll: 1}}] 
        }) 
    } catch ($e) { 
    } 
}); 
 
$(document).ready(function () { 
    if ($.fn.customScrollbar) $(".shops-list").customScrollbar(); 
    selectActiveMapArea() 
}); 
$(document).on("pjax:success", function () { 
    selectActiveMapArea() 
}); 
 
function selectActiveMapArea() { 
    if ($(".map svg") !== undefined) { 
        $(".map svg a").on("click", function (e) { 
            $.pjax({container: "#p0", url: $(this).attr("href")}); 
            e.preventDefault(); 
            return false 
        }); 
        if ($("h1").attr("data-shop-id") !== undefined) { 
            $(".map svg a[data-shop-id=" + $("h1").attr("data-shop-id") + "] polygon").addClass("active") 
        } 
    } 
} 
 
$(window).on("scroll", function () { 
    var body = $("body"), position; 
    if (body.attr("data-parallax") === undefined) body.attr("data-parallax", body.css("background-position-y")); 
    position = parseInt(body.attr("data-parallax")) - parseInt($(window).scrollTop()) / 5; 
    body.css({"background-position-y": position}) 
}); 
$(document).on("click", ".search", function (e) { 
    if ($(this).hasClass("active")) { 
        if ($(e.target).attr("name") !== "search") { 
            if ($(this).find("input").val() === "") { 
                $(this).removeClass("active"); 
                $("nav .mini-logo").removeClass("hide") 
            } else $(this).closest("form").submit() 
        } 
    } else { 
        $(this).addClass("active"); 
        $("nav .mini-logo").addClass("hide") 
    } 
}); 
$(document).ready(function () { 
    stickyNavTop = $("nav").offset().top - 15; 
    stickyNav(); 
    $(window).scroll(function () { 
        stickyNav() 
    }); 
    $["ui"]["autocomplete"].prototype["_renderItem"] = function (ul, item) { 
        return $("<li></li>").data("item.autocomplete", item).append(item.label).appendTo(ul) 
    } 
}); 
var stickyNavTop; 
 
function stickyNav() { 
    var header = $("header"); 
    var logo = $(".logo > a > img"); 
 
    if ($(window).scrollTop() > stickyNavTop) { 
        header.css({height: header.innerHeight()}); 
        $("nav").addClass("sticky"); 
        logo.hide(); 
        $(".c").addClass("container"); 
        if (window.innerWidth > 766) 
        { 
            $('.navbars').addClass('navbar-reverse content-center'); 
            $('.second').addClass('auto-width'); 
            $('.actions').addClass('display-none'); 
            // let elem = document.querySelector("rect[data-shop-id='" + document.querySelector("h1[data-shop-id]").getAttribute("data-shop-id") + "']"); 
            // if (elem === null) 
            // { 
            //     elem = document.querySelector("polygon[data-shop-id='" + document.querySelector("h1[data-shop-id]").getAttribute("data-shop-id") + "']"); 
            // } 
            // elem.setAttribute("stroke", "red"); 
        } 
    } else { 
        $("nav").removeClass("sticky"); 
        logo.show(); 
        $(".c").removeClass("container"); 
        if (window.innerWidth > 766) 
        { 
            $('.navbars').removeClass('navbar-reverse content-center'); 
            $('.second').removeClass('auto-width'); 
            $('.actions').removeClass('display-none'); 
        } 
    } 
     
}