html - 如何垂直旋转猫头鹰旋转木马？

Question

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

Answer 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 :

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