如何垂直旋转猫头鹰旋转木马？答案

【问题标题】：How to rotate Owl Carousel vertically?如何垂直旋转猫头鹰旋转木马？
【发布时间】：2020-01-30 23:30:58
【问题描述】：

我的网站上有产品 Owl Carousel 滑块。这是产品页面的简单链接。我希望滑块垂直Product Page 我已经尝试了一些建议，这些建议在这里被列为类似问题，但我找不到解决方案。有人可以看看内容，如果可能的话，请给我一个解决方案。

【问题讨论】：

标签： html css slider magento2 owl-carousel-2

【解决方案1】：

你可以这样做：

<div class="owl-carousel owl-theme">
  <img class="item" src="http://placehold.it/320x240?text=Slide%200">
  <img class="item" src="http://placehold.it/320x240?text=Slide%201">
  <img class="item" src="http://placehold.it/320x240?text=Slide%202">
  <img class="item" src="http://placehold.it/320x240?text=Slide%203">
  <img class="item" src="http://placehold.it/320x240?text=Slide%204">
  <img class="item" src="http://placehold.it/320x240?text=Slide%205">
  <img class="item" src="http://placehold.it/320x240?text=Slide%206">
  <img class="item" src="http://placehold.it/320x240?text=Slide%207">
</div>

CSS：

.owl-carousel{
  transform: rotate(90deg);
  width: 270px; 
  margin-top:100px;
} 
.item{
  transform: rotate(-90deg);
}
.owl-carousel .owl-nav{
  display: flex;
  justify-content: space-between;
  position: absolute;
  width: 100%;
  top: calc(50% - 33px);
}
div.owl-carousel .owl-nav .owl-prev, div.owl-carousel .owl-nav .owl-next{
    font-size:36px;
    top:unset;
    bottom: 15px; 
}

JS：

$( document ).ready(function() {

  $(".owl-carousel").owlCarousel({
    items: 3,
    loop: false,
    mouseDrag: false,
    touchDrag: false,
    pullDrag: false,
    rewind: true,
    autoplay: true,
    margin: 0,
    nav: true
  });
});

看看这个Fork：

禁用拖动，因为它可能会导致问题

【讨论】：

我在网上看到了这个解决方案，但我不确定为什么我不能让它在我的滑块上工作。它旋转滑块，但图像显示为彼此相邻的两个。 ://
问题，很可能是由于您在HTML 上使用的内联CSS。尝试避免内联样式，因为它具有更高级别的优先级，并且浏览器拒绝任何外部样式，这最终会产生不需要的结果。

【解决方案2】：

要使滑块垂直工作，您需要修改实际的滑块脚本。如果你想让图像垂直对齐，你可以添加这个 CSS：

@media (min-width: 992px) {
.product.media .parent__gallery-thumbnail .owl-carousel .owl-item {
    float: left;
    clear: both;
}}

【讨论】：