Всем привет.
Есть 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
Ответ
А не работает всё потому-что разная ширина слайдов, у всех остальных слайдеров всё в 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}
