BxSlider Carousel垂直箭头也垂直

Question

我正在使用bxSlider进行轮播。它提供了水平和垂直模式，很好。

唯一问题是在显示垂直时，箭头仍然保持在水平位置。

HTML代码：

<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 在线查看。我使用的是默认值：http://bxslider.com/

垂直： 箭头左右两侧，我想让它们移动到顶部和底部：

Answer 1

覆盖bxslider.css中custom.css的样式，如下所示。

注意：由于代码段我必须使用重要内容，但如果您将custom.css放在bxslider.css之后并正确使用特异性，则不需要{ {1}}

!important

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

/*Custom CSS that should put after BxSlider.css file*/

.bx-wrapper {
  margin-top: 50px !important
}
.bx-controls a {
  transform: rotate(90deg);
  left: 45% !important;
  top: 0 !important;
  bottom: 0!important;
  right: 0 !important;
}
.bx-controls .bx-prev {
  top: -30px !important;
}
.bx-controls .bx-next {
  top: 350px !important;
}

Answer 2

您可以使用CSS完成此操作。

这似乎对我有用：

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