Question

我的网站上有产品“猫头鹰轮播”滑块。这是产品页面的简单链接。我希望滑块垂直Product Page，我尝试了一些建议，这些建议在此处被列为类似问题，但我找不到解决方案。有人可以看看其中的内容，如果可以的话，请给我提供解决方案。

Answer 1

要使滑块垂直发挥作用，您需要修改实际的滑块脚本。如果要使图像垂直对齐，则可以添加以下CSS：

file2.html

Answer 2

您可以执行以下操作：

<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：

禁用拖动可能会导致问题

如何垂直旋转猫头鹰转盘？

2 个答案: