1

I have product Owl Carousel slider in my website. This is a simple link for the product page. I want the slider to be vertical Product Page I've tried a few suggestions which were listed as a similar problem in here but I am not able to find a solution. Could someone please have a look at the content and if possible provide me with a solution.

Serco33
  • 23
  • 1
  • 4

2 Answers2

0

To make the slider function vertically you need to modify the actual slider script. If you want to have the images align vertically you would add this CSS:

@media (min-width: 992px) {
.product.media .parent__gallery-thumbnail .owl-carousel .owl-item {
    float: left;
    clear: both;
}}
MistaPrime
  • 1,591
  • 1
  • 10
  • 20
0

You could do something like this:

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

Check out this Fork:

Disable Drag as it may cause prblems

Salman Malik
  • 923
  • 6
  • 24
  • I saw this solution online but I am not sure why I am not able to get it working on my slider. It rotates the slider but the images appear two next to each other. :/ – Serco33 Oct 01 '19 at 16:54
  • The problem, most probably is due to inline CSS you used on your `HTML`. Try avoiding Inline Styling as It has higher level of precedence and the browser rejects any external styling, that ends up creating unwanted results. – Salman Malik Oct 01 '19 at 21:19