wake-up-neo.net

Twitter Bootstrap Karussell vertikales Schieben

Kann man vertikales Karussell mit Twitter Bootstrap verschieben? In bootstrap.js finde ich das

  , 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

Ich habe versucht, die Richtung von "Auf" und "Ab" zu ändern, aber das Gleiten funktioniert nicht.

21
Qwadrat

Ja.

Im Folgenden finden Sie eine harte Vorgehensweise, die alles durch einfaches Überschreiben des CSS bewirkt.

Wenn Sie Ihrem Karussell eine Klasse vertical hinzufügen, überschreibt das Hinzufügen der folgenden CSS zur Seite das Schieben, um vertikal zu sein:

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

Dies beinhaltet im Wesentlichen alles in carousel.less und ändert left in top.

JSFiddle


Dies zeigt zumindest an, was Sie tun müssen, um es vertikal verschieben zu können. In der Praxis sollte man jedoch _up und down Klassen zu carousel.less hinzufügen und bootstrap-carousel.js eine neue Option hinzufügen, um zwischen ihnen zu wechseln.

42
merv

Die in den vorherigen Antworten enthaltenen Lösungen funktionieren bei einigen gängigen Browsern (wie Google Chrome) nicht richtig, wenn sie mit der neuesten (aktuellen) Version von Bootstrap (v3.3.4) verwendet werden.

Falls jemand eine aktualisierte Lösung benötigt, die mit Bootstrap v3.3.4 funktioniert, haben Sie hier -

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

Hinweis: Fügen Sie die vertical-Klasse zu Ihrem carousel-inner hinzu, oder bearbeiten Sie das CSS wie gewünscht.

25
Hello Kitty
0
Shivam Pandya