1

I am currently building a website, which contains a carousel, that should slide vertically through its items. Currently it works just fine and as it should when using Firefox, but when I test it with Chrome or Internet Explorer the transition does not work as it should. I tested out different solutions that I could find here and on other sites, but none of these worked for me.

      <div id="brick-slider" class="carousel vertical slide first-item" data-ride="carousel">
<ol class="carousel-indicators">
  {% for item in items %}
    {% if loop.index0 == 0 %}
      <li class="indicator" data-target="#brick-slider" data-slide-to="{{ loop.index0 }}" class="active"></li>
    {% else %}
      <li class="indicator" data-target="#brick-slider" data-slide-to="{{ loop.index0 }}"></li>
    {% endif %}
  {% endfor %}
</ol>
<div class="carousel-inner vertical" role="listbox">
  {% for item in items %}
    {% if loop.index0 == 0 %}
      <div class="item active">
        {{ item.content }}
      </div>
    {% else %}
      <div class="item">
        {{ item.content }}
      </div>
    {% endif %}
  {% endfor %}
</div>
    <a class="up carousel-control" href="#brick-slider" role="button" data-slide="prev">
      <span class="glyphicon glyphicon-arrow-up" aria-hidden="true"></span>
      <span class="sr-only">Previous</span>
    </a>
    <a class="down carousel-control" href="#brick-slider" role="button" data-slide="next">
      <span class="glyphicon glyphicon-arrow-down" aria-hidden="true"></span>
      <span class="sr-only">Next</span>
    </a>

This is my markup. Following are two variants of the css i used to transit vertically.

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

This was the first variant I used. In Firefox it worked just fine, but in Chrome and Edge the active element was not sliding out, it just disappeared and then the next element eased in. I want the active element to ease out so that you can see the transition just like the standard horizontal carousel in bootstrap.

.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: 100%;
}

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

With this second variant, that I found here its just the same for Firefox, it works just fine and does exactly what it should. As for Edge and Chrome now it eases the next element in above the active Element and then the active element disappears. Sometimes it even eases in behind the active element and sometimes it eases in from the sides instead of top or bottom. There is something I'm missing, but I just can't get behind it. I'm working on this for quite some time now, so I would really appreciate some help with this.

Community
  • 1
  • 1
M. Kohn
  • 11
  • 3

1 Answers1

0

I have had the same problem, in the moment tried bootstrap v3.02 and it worked fine. Found the difference, Bootstrap 3.6 uses transform 3d, and that is working just fine with normal horisontal carousel, but it just doesn't with vertical one, so just overwrite that piece of code in your CSS, before vertical slider css rules, put this:

@media all and (transform-3d), (-webkit-transform-3d) {
  .carousel-inner > .item {
    -webkit-transition: none;
         -o-transition: none;
            transition: none;
  }
  .carousel-inner > .item.next,
  .carousel-inner > .item.active.right {
    left: 0;
    -webkit-transform: none;
            transform: none;
  }
  .carousel-inner > .item.prev,
  .carousel-inner > .item.active.left {
    left: 0;
    -webkit-transform: none;
            transform: none;
  }
  .carousel-inner > .item.next.left,
  .carousel-inner > .item.prev.right,
  .carousel-inner > .item.active {
    left: 0;
    -webkit-transform: none;
            transform: none;
  }
}

After that goes portion of css for styling vertical carousel. This worked for me.

sofmax
  • 36
  • 4