Owl Carousel Centering Mobile Layout

У меня есть веб-страница, отформатированная с помощью jQuery mobile, которая использует Owl Carousel и Photoswipe, и это доставляет мне проблемы при просмотре на мобильных устройствах. Проблема в том, что при просмотре на мобильном телефоне портретного размера (iPhone 5) одно отображаемое изображение смещено от центра. Я заметил, что есть Javascript, применяющий встроенный стиль к ul с классом .owl-carousel.owl-theme, который блокирует отображение. Если я переключу это на встроенный во время отладки страницы в мобильном представлении с помощью инструментов разработчика в Chrome, одно изображение будет правильно центрировано. Если я попытаюсь жестко закодировать это в CSS, тогда все изображения будут наложены друг на друга, и вы сможете щелкнуть только по одному изображению (что является неправильным поведением, поскольку в карусели/галерее три изображения).

Кто-нибудь знает, в чем моя проблема, и как ее решить, чтобы при просмотре с мобильного устройства в портретной ориентации (когда отображается только одно карусельное изображение) изображение правильно центрировалось на странице? У меня есть другие страницы с похожим CSS для карусели (но не jQuery Mobile), и при просмотре на мобильном устройстве поведение правильное, поэтому я в тупике! Спасибо за любую оказанную помощь!


javascript css owl-carousel photoswipe
person finiteloop    schedule 12.07.2017    source источник

Ответы (2)


arrow_upward
2
arrow_downward

Попробуйте этот CSS

CSS

ul.owl-carousel{
padding:0;
text-align:center;
}

надеюсь это поможет..

person Chandra Shekhar    schedule 12.07.2017
comment
Закрывать. теперь изображение выглядит правильно по центру на мобильном телефоне, но как только я вернусь к обычному просмотру браузера в инструментах разработчика, три изображения в галерее потеряют поля между каждым. Это головная боль. Я собираюсь взять сено и проверить завтра. Уже поздно здесь! :) Спасибо за вашу помощь! Это может приблизить меня завтра, когда я вернусь и попробую еще раз! - person finiteloop; 12.07.2017
comment
Я думаю, что понял это сейчас. Я не использовал ваш измененный код. Я использовал то, что вы вставили раньше, и удалил некоторые CSS, которые применялись в точке останова. Я очень ценю это! Я проголосую за ваш ответ раньше, если вы вернете код к тому, что было. :) - person finiteloop; 12.07.2017
comment
Спасибо за вашу помощь! - person finiteloop; 12.07.2017

arrow_upward
1
arrow_downward

Вот как я это сделал. Основываясь на ответе Чандры Шекхар, кажется, что плагин теперь использует div вместо ul; также я добавил мобильный запрос.

@media only screen and (max-width: 450px) {
  div.owl-carousel {
    padding:0;
    text-align:center;
  }
}
person Mike C    schedule 26.01.2021