Owl 轮播居中移动布局

Question

我有一个使用 jQuery 移动设备格式化的网页，该网页使用 Owl 旋转木马和 Photoswipe，在移动设备尺寸上查看时给我带来了麻烦。问题是，当在纵向尺寸的手机 phone (IPhone 5) 上查看时，显示的一个图像偏离了中心。我注意到有 Javascript 将内联样式应用到 ul 与 class of .owl-carousel.owl-theme 将显示设置为阻塞。如果我在 Chrome 中使用开发人员工具在移动视图中调试页面时将其切换为内联，则一张图像正确居中。如果我尝试将其硬编码到 CSS 中，那么所有图像都会堆叠在一起，您只能单击一张图像（这是不正确的行为，因为 carousel/gallery 中有三张图像） .

有谁知道我的问题是什么，以及如何解决它，以便在移动设备上以纵向方式查看时（当仅显示一个轮播图像时）图像在页面上正确居中？我有其他页面的轮播类似 CSS（虽然不是 jQuery 移动），当在移动设备上查看时，行为是正确的，所以我很难过！感谢您提供的任何帮助！

Answer 1

试试这个 CSS

CSS

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

希望这对您有所帮助..

Answer 2

我就是这样做的。基于 Chandra Shekhar 的回答，但似乎插件现在使用的是 divs 而不是 ul；我还添加了一个移动查询。

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

Owl 轮播居中移动布局

Owl Carousel Centering Mobile Layout

javascript

css

photoswipe

owl-carousel