Search code examples
jquerycsshtmlbxslider

BxSlider Carousel vertical-arrow vertical as well

I am using bxSlider for carousel. It provides horizontal and vertical mode which fine.

Only issue is when displaying vertical, arrows still remain on horizontal position.

HTML Code:

<div class="sliderLocation">
  <div class="slide"><img src="http://placehold.it/300x150&text=FooBar6"></div>
  <div class="slide"><img src="http://placehold.it/300x150&text=FooBar7"></div>
  <div class="slide"><img src="http://placehold.it/300x150&text=FooBar8"></div>
  <div class="slide"><img src="http://placehold.it/300x150&text=FooBar9"></div>
  <div class="slide"><img src="http://placehold.it/300x150&text=FooBar10"></div>
</div>

JS

$('.sliderLocation').bxSlider({
  slideWidth: 200,
  minSlides: 3,
  maxSlides: 3,
  moveSlides: 1,
  slideMargin: 10,
  pager: false,
  mode: 'vertical'
});

CSS See online. I am using default one: http://bxslider.com/

enter image description here

And vertical: Arrows coming in left and right side, I want those to move to top and bottom:

enter image description here

Solution

  • You can accomplish this using CSS.

    This is what seemed to work for me:

    .bx-wrapper .bx-prev {
  left: calc(50% - 16px) !important;
  top: -2em !important;
  -webkit-transform: rotate(90deg);
  transform: rotate(90deg);
}

.bx-wrapper .bx-next {
  right: calc(50% - 16px) !important;
  top: calc(100% + 2em) !important;
  -webkit-transform: rotate(90deg);
  transform: rotate(90deg);
}