Карусель Twitter Bootstrap с вертикальным скольжением

Можно ли реализовать вертикальную карусель, скользящую по ширине Twitter Bootstrap? В bootstrap.js я нахожу это

  , slide: function (type, next) {
  var $active = this.$element.find('.active')
    , $next = next || $active[type]()
    , isCycling = this.interval
    , direction = type == 'next' ? 'left' : 'right'
    , fallback  = type == 'next' ? 'first' : 'last'
    , that = this

Я пытался изменить направление на «вверх» и «вниз», но скольжение не работало.


carousel jquery twitter-bootstrap sliding
person Qwadrat    schedule 21.07.2012    source источник
comment
Не думайте, что это возможно хотя бы без изменения кода.   -  person Rohan    schedule 21.07.2012
comment
Теперь в Bootstrap 4 это проще: stackoverflow.com/questions/42910076/   -  person Zim    schedule 20.03.2017

Ответы (4)


arrow_upward
44
arrow_downward

да.

Ниже приведен хакерский способ сделать это, который делает все, просто переопределяя CSS.

Если вы добавите класс vertical в свою карусель, то добавление на страницу следующего CSS переопределит вертикальное скольжение:

.vertical .carousel-inner {
  height: 100%;
}

.carousel.vertical .item {
  -webkit-transition: 0.6s ease-in-out top;
     -moz-transition: 0.6s ease-in-out top;
      -ms-transition: 0.6s ease-in-out top;
       -o-transition: 0.6s ease-in-out top;
          transition: 0.6s ease-in-out top;
}

.carousel.vertical .active {
  top: 0;
}

.carousel.vertical .next {
  top: 100%;
}

.carousel.vertical .prev {
  top: -100%;
}

.carousel.vertical .next.left,
.carousel.vertical .prev.right {
  top: 0;
}

.carousel.vertical .active.left {
  top: -100%;
}

.carousel.vertical .active.right {
  top: 100%;
}

.carousel.vertical .item {
    left: 0;
}​

Это в основном берет все в carousel.less и меняет left на top.

JSFiddle

Это, по крайней мере, указывает, что вам нужно сделать, чтобы заставить его скользить вертикально. Однако на практике действительно следует добавлять классы up и down в carousel.less и добавьте новую опцию в bootstrap-carousel.js для переключения между ними.

person merv    schedule 22.07.2012
comment
Спасибо за хорошее решение! Но когда мы используем стандартное поведение справа налево — мы видим, что и предыдущее, и следующее изображения движутся влево. И когда я попытался использовать ваше решение - только следующее изображение перемещается поверх предыдущего. Я пытался изменить различные параметры в CSS, но не могу добиться этого эффекта. - person Qwadrat; 23.07.2012
comment
@Qwadrat, в каком браузере вы тестируете? У меня это работало, но я тестировал только в Chrome. - person merv; 23.07.2012
comment
В Хроме все ок. В Firefox следующий кадр перемещается поверх предыдущего. В Опере следующее изображение перемещается вместе с предыдущим, но застревает на втором кадре :) - person Qwadrat; 24.07.2012
comment
@Qwadrat, похоже, Firefox не нравятся процентные значения для стиля top. Если вы используете изображения одинаковой высоты, вы можете обойти это явным определением. См. обновленный JSFiddle. В Опере не проверял. - person merv; 27.07.2012
comment
В том, что я видел, Firefox не нравится высота, потому что ни один из контейнеров не имеет фиксированной высоты. Если бы у .carousel.vertical была фиксированная высота, она бы отлично работала с процентами. - person Jay Harris; 21.01.2013

arrow_upward
28
arrow_downward

Решения, представленные в предыдущих ответах, не работают должным образом в некоторых популярных браузерах (например, Google Chrome) при использовании с последней (текущей) версией Bootstrap (v3.3.4).

Если кому-то нужно обновленное решение, которое работает с Bootstrap v3.3.4, вот оно —

.carousel-inner.vertical {
  height: 100%;
}
.carousel-inner.vertical > .item {
  -webkit-transition: .6s ease-in-out top;
  -o-transition: .6s ease-in-out top;
  transition: .6s ease-in-out top;
}
@media all and (transform-3d),
(-webkit-transform-3d) {
  .carousel-inner.vertical > .item {
    -webkit-transition: -webkit-transform .6s ease-in-out;
    -o-transition: -o-transform .6s ease-in-out;
    transition: transform .6s ease-in-out;
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
    -webkit-perspective: 1000;
    perspective: 1000;
  }
  .carousel-inner.vertical > .item.next,
  .carousel-inner.vertical > .item.active.right {
    top: 0;
    -webkit-transform: translate3d(0, 100%, 0);
    transform: translate3d(0, 100%, 0);
  }
  .carousel-inner.vertical > .item.prev,
  .carousel-inner.vertical > .item.active.left {
    top: 0;
    -webkit-transform: translate3d(0, -100%, 0);
    transform: translate3d(0, -100%, 0);
  }
  .carousel-inner.vertical > .item.next.left,
  .carousel-inner.vertical > .item.prev.right,
  .carousel-inner.vertical > .item.active {
    top: 0;
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }
}
.carousel-inner.vertical > .active {
  top: 0;
}
.carousel-inner.vertical > .next,
.carousel-inner.vertical > .prev {
  top: 0;
  height: 100%;
  width: auto;
}
.carousel-inner.vertical > .next {
  left: 0;
  top: 100%;
}
.carousel-inner.vertical > .prev {
  left: 0;
  top: -100%
}
.carousel-inner.vertical > .next.left,
.carousel-inner.vertical > .prev.right {
  top: 0;
}
.carousel-inner.vertical > .active.left {
  left: 0;
  top: -100%;
}
.carousel-inner.vertical > .active.right {
  left: 0;
  top: 100%;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css" rel="stylesheet" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js"></script>
<div style="width:600px"> <!-- wrap @img width -->
  <div id="carousel-example-generic" class="carousel slide" data-ride="carousel" data-interval="3000">
    <!-- Indicators -->
    <ol class="carousel-indicators">
      <li data-target="#carousel-example-generic" data-slide-to="0" class="active"></li>
      <li data-target="#carousel-example-generic" data-slide-to="1"></li>
      <li data-target="#carousel-example-generic" data-slide-to="2"></li>
    </ol>

    <!-- Wrapper for slides -->
    <div class="carousel-inner vertical" role="listbox">
      <div class="item active">
        <img src="http://placehold.it/600x400&text=First+Slide" alt="First Slide">
        <div class="carousel-caption">
          First Slide
        </div>
      </div>
      <div class="item">
        <img src="http://placehold.it/600x400&text=Second+Slide" alt="Second Slide">
        <div class="carousel-caption">
          Second Slide
        </div>
      </div>
      <div class="item">
        <img src="http://placehold.it/600x400&text=Third+Slide" alt="Third Slide">
        <div class="carousel-caption">
          Third Slide
        </div>
      </div>
    </div>

    <!-- Controls -->
    <a class="left carousel-control" href="#carousel-example-generic" role="button" data-slide="prev">
      <span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span>
      <span class="sr-only">Previous</span>
    </a>
    <a class="right carousel-control" href="#carousel-example-generic" role="button" data-slide="next">
      <span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
      <span class="sr-only">Next</span>
    </a>
  </div>
</div>

Примечание: добавьте класс vertical в свой carousel-inner или отредактируйте CSS по своему усмотрению.

person Hello Kitty    schedule 19.05.2015
comment
Отличный ответ; отлично работал для новой версии и в Chrome; Спасибо! - person Catto; 05.11.2015
comment
Возникли проблемы с IE11. Новый слайд анимируется в OK, но старый слайд остается статичным, а не уходит, и, наконец, исчезает, как только новый слайд завершает путешествие. Есть идеи? Большое спасибо. - person Noobie3001; 02.05.2016
comment
Потрясающее решение. Любой способ отобразить более 1 элемента за раз? - person djack109; 02.10.2016

arrow_upward
0
arrow_downward

Попробуйте этот плагин https://github.com/tutorialdrive/Bootstrap-Vertical-Thumbnail-Carousel

И взгляните сюда.

Twitter Bootstrap Вертикальная карусель миниатюр

person Shivam Pandya    schedule 19.11.2013

arrow_upward
0
arrow_downward

попробуй этот код

Bootstrap 4 — вертикальный слайдер

https://www.codeply.com/p/JxZ8htyOFN

person teenage vampire    schedule 12.03.2021