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

您可以使用 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);
}

Answer 2

在 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>

BxSlider Carousel vertical-arrow vertical 以及

BxSlider Carousel vertical-arrow vertical as well

html

css

jquery

bxslider