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

#javascript #jquery #slickjs

Всем привет.

Есть 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
    

Ответы

Ответ 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 $("
").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');
        }
    }
    
}
#w1 {display:block !important}