jquery - BxSlider Carousel vertical-arrow vertical 以及

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

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

注意:我不得不使用 important 因为代码片段，但是如果你将 custom.css 放在 bxslider.css 之后并使用正确的特异性，你将不需要 !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;
}

<link href="https://cdnjs.cloudflare.com/ajax/libs/bxslider/4.2.5/jquery.bxslider.min.css" rel="stylesheet" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/bxslider/4.2.5/jquery.bxslider.min.js"></script>
<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>