Update
OP выражается необходимость отображения изображений различной высоты ... но хочет фиксированную высоту. Так что я собираю фиксированную высоту ползунка, которая способна отображать изображения с разной высотой в вертикальном потоке. Задача состоит в том, чтобы заставить стрелки управления оставаться в одном месте и иметь возможность настраиваться в соответствии с изменением размера.
Слишком много изменений в CSS, чтобы пройти по каждой из причин, по которым они используются, поэтому мы рассмотрим наиболее важные части и, если возникнут какие-либо дополнительные вопросы, которые могут быть рассмотрены на каждом конкретном случае.
.box { height: 100vh; overflow-y: scroll; }
.bx-view-port { height: 100vh; }
Поскольку большинство цифровых средств массовой информации в мире горизонтально ориентированные, не достаточно мысли была введена в хороший UX с помощью вертикального потока я предполагаю. Единственные свойства высоты в jquery.bxslider.css были для значков и загрузчика. Сгенерированная обертка bx-view-port является основной ссылкой для ширины и высоты, поэтому имейте это в виду, когда ваш bxSlider переходит на 0 высоту после обновления браузера. Добавление обертки для всего слайдера (.box) помогает стабилизировать вертикальные переходы, а также предоставить родительский элемент для следующего добавления, .bx-nav.
Наиболее раздражающие вещи, с которыми приходится иметь дело, - это элементы управления стрелками для предыдущих и следующих шагов. Я обычно переставлял их на верх, потому что это была единственная стабильная область ползунка, когда она находится в вертикальном режиме. В этой демонстрации, мы подгоняем кнопок со стрелками:
Добавить эти два варианта в bxSlider JS/JQ:
prevSelector: '.prev',
nextSelector: '.next',
В HTML добавить это под bxSlider элемент:
<nav class="bx-nav">
<div class="prev"></div>
<div class="next"></div>
</nav>
Эти шаги позволят установить новый набор элементов управления, которые легче настроить, и стиль. Теперь у вас должно быть 2 якоря: PREV и NEXT.
Добавьте следующие опции bxSlider:
prevText: "<i class='fa fa-nav fa-fw fa-chevron-circle-left'></i>",
nextText: "<i class='fa fa-nav fa-fw fa-chevron-circle-right'></i>",
Затем добавьте этот <link> к </head>:
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css">
Теперь эти хромые якоря должны выглядеть так исходные элементы управления. Мы сделали запись строки, которая генерирует <i> (например, метод jQuery, создающий элемент со всеми атрибутами и значениями) и присоединяется к соответствующему элементу - .prev и .next. Плавно выглядящие значки шрифтов являются комплиментами FontAwesome.
Plunker/README.md
Отрывок
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>35788901</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1, maximum-scale=1, user-scalable=0"/>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/bxslider/4.2.5/jquery.bxslider.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css">
<style>
.box { height: 100vh; overflow-y: scroll; }
.bx-view-port { height: 100vh; }
img { margin: 0 auto; }
.bx-nav { position: absolute; width: 356px; height: 48px; top: calc(50% - 24px); left: calc(50% - 178px); margin: 0 auto; }
.prev, .next { position: absolute; width: 48px; line-height: 48px; z-index: 9999; font-size: 48px; opacity: .4; color: #0FF !important; }
.prev:hover, .next:hover { opacity: 1; color: #00D !important; cursor: pointer;}
.prev { left: 0; }
.next { right: 0; }
</style>
</head>
<body>
<section class="box">
<ul class="bxslider">
<li> <img src="https://placehold.it/150x150/fff/e00" /> </li>
<li> <img src="https://placehold.it/300x300/040/fff" /> </li>
<li> <img src="https://placehold.it/450x150/000/0ff" /> </li>
<li> <img src="https://placehold.it/300x300/cfc/000" /> </li>
<li> <img src="https://placehold.it/600x150/040/fff" /> </li>
<li> <img src="https://placehold.it/300x300/000/fff" /> </li>
</ul>
<nav class="bx-nav">
<div class="prev"></div>
<div class="next"></div>
</nav>
</section>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.0/jquery.min.js"></script>
<script src="https://cdn.jsdelivr.net/bxslider/4.2.5/jquery.bxslider.min.js"></script>
<script>
$(function() {
var bx = $('.bxslider').bxSlider({
mode: 'vertical',
speed: 500,
slideMargin: 20,
infiniteLoop: true,
slideSelector: 'li',
pager: false,
prevSelector: '.prev',
nextSelector: '.next',
prevText: "<i class='fa fa-nav fa-fw fa-chevron-circle-left'></i>",
nextText: "<i class='fa fa-nav fa-fw fa-chevron-circle-right'></i>",
minSlides: 3,
moveSlides: 1
});
});
</script>
</body>
</html>
Старый
It looks as if a default height is overlooked when using a vertical mode. I have had problems with height under different circumstances but it looks like my case is not the only configuration having troubles controlling height. Here's the additional CSS I applied to tame bxSlider's height jumping. I also set the `min/maxSlides` to 3. It looks as if the carousel is vertical, it doesn't adjust it's slides according to height of viewport.
Fiddle
По умолчанию bxSlider будет принимать на высоте самых высоких слайда и установить его для каждого слайда в дальнейшем. Вам нужно предоставить живую демонстрацию того, что вы уже сделали. Так что если вы скажете, что у вас есть работа, но размер сдвига, то предоставите нам демо-версию – zer00ne
вот Демо-версия: http://jsfiddle.net/w16z3gt0/1/ – kalles