Как повернуть Сову Карусель вертикально? - PullRequest
Новая
       34

Как повернуть Сову Карусель вертикально?

1 голос
/ 01 октября 2019

У меня есть слайдер Owl Carousel на моем веб-сайте. Это простая ссылка на страницу продукта. Я хочу, чтобы ползунок был вертикальным Страница продукта Я попробовал несколько предложений, которые были перечислены здесь как похожая проблема, но я не могу найти решение. Может ли кто-нибудь взглянуть на содержимое и, если возможно, предоставить мне решение.

Ответы [ 2 ]

0 голосов
/ 01 октября 2019

Вы можете сделать что-то вроде этого: 

<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
  });
});

Проверить это Вилка :

Отключить Перетаскивание, так как это может вызвать проблемы

0 голосов
/ 01 октября 2019

Чтобы слайдер работал вертикально, вам нужно изменить скрипт скрипта. Если вы хотите, чтобы изображения были выровнены по вертикали, вы бы добавили этот CSS: 

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