Подскажите, есть какое-либо решение, чтобы отключать owl-carousel на больших разрешениях, и включать только на мобилках ?
2 ответа
Написал скрипт, отлично работает. Может кому пригодится.
$(document).ready(function(){
$(window).on('resize', function(){
if($(window).width() <= 767) {
$('.doc-block').addClass('owl-carousel');
}
else {
$('.doc-block').removeClass('owl-carousel');
}
}).trigger('resize');
});
-
Только еще нужно проверку сделать и в
$(document).ready()
, что бы при открытии сразу на телефоне оно то же работало. 7 окт 2017 в 8:09 -
ну document это понятно. сейчас добавлю. Не могу понять, почему при ресайзе окна не работает ? trigger же стоит :( Работает только если сразу на мобилках открывать 7 окт 2017 в 8:32
Обычно проверку на мобильник выполняют всё-таки в php или ином языке, на стороне сервера при формировании страницы. Вряд-ли блок, подготовленный для карусели, имеет такие же параметры, как и без карусели. Поэтому замена класса - сложный путь - как в сказке "и дудочку, и кувшинчик", ну или "на ёлку влезть и на ... сесть".
Проще сразу проверить тип устройства и интегрировать в готовую страницу уже специализированный код. Будет и проще, и лучше, и меньше. В WordPress, например, есть специализированная функция wp_is_mobile(). По ссылке можно посмотреть, что она проверяет и сделать свою по необходимости.
Проверка размеров экрана устройства также не годится. Современные смартфоны имеют разрешение практически не уступающее десктопам. Но десктопный вариант страницы на них неудобочитаем.
$(window).width() < x
.