Top.Mail.Ru
Ответы
Аватар пользователя
6лет
Изменено
Аватар пользователя
Аватар пользователя
Аватар пользователя
Программирование
+4

OWL CAROUSEL вопрос респонсивности слайдов

Здравствуйте! Делаю адаптивный слайдер продукции на owl carousel, под компьютер все получается идеально а вот с мобилкой есть проблемы. Охото, чтобы на мобильном выглядел слайдер вот так (рисунок 1)
У меня это легко получается с помощью такого кусочка скрипта:
responsive:{
0:{
items: 2.5,
},
1000:{
items:5,
}
}

Даже отображается как нужно. Но проблема в том, что при таком виде слайдер не листается как нужно, тоесть он зацикливается на первых трех продуктах и крутится только на них
При таком коде все работает отлично:

responsive:{
0:{
items: 3,
},
1000:{
items:5,
}
}

Подскажите в чем проблема и как решить это?

Дополнен

Вопрос уже решен!
Немного пораскинув мозгами подумал что такое легко можно осуществить следующим способом:
responsive:{
0:{
items: 2,
stagePadding: 40,
},
1000:{
items:5,
}
}
То есть респонсивность мы ставим на двойку, добавляем начальный отступ в 40 и дальше в стиль записываем эту строчку:
.owl-stage {
margin-left: -40px;
}
То есть мы скрипту говорим, якобы все норм, отодвинь начальное положение на 40 а на страничке так и оставь два айтема. А стилям мы говорим, что мол отодвинь начальное положение слева обратно

По дате
По рейтингу
Аватар пользователя
Новичок
6лет

Разобрался и хорошо :)
Получилось так, что не надо спешить... а надо подумать.