1

我正在尝试制作这种幻灯片效果，就像在：dropbox link slider中一样。只需向下滚动，直到您看到一个在右侧slider和内部都有的监视器。captions我尝试了很多，但效果不一样。我不明白这种转换是如何在ul元素上完成的。
非常感谢任何帮助！

这是我到目前为止所尝试的：

.carousel-inner>.item {
  display: inline-block;
  position: relative;
  /*width: 33.33333%;*/
  bottom: 15px;
  opacity: 0;
  opacity: 0;
  height: 0;
  float: left;
  overflow: hidden;
  -webkit-transition: bottom 600ms cubic-bezier(0.23, 1, 0.32, 1), opacity 450ms cubic-bezier(0.23, 1, 0.32, 1), visibility 450ms cubic-bezier(0.23, 1, 0.32, 1);
  transition: bottom 600ms cubic-bezier(0.23, 1, 0.32, 1), opacity 450ms cubic-bezier(0.23, 1, 0.32, 1), height 600ms cubic-bezier(0.23, 1, 0.32, 1);
  -webkit-transition: bottom 600ms cubic-bezier(0.23, 1, 0.32, 1) 200ms, opacity 450ms cubic-bezier(0.23, 1, 0.32, 1) 200ms;
  transition: bottom 600ms cubic-bezier(0.23, 1, 0.32, 1) 200ms, opacity 450ms cubic-bezier(0.23, 1, 0.32, 1) 200ms;
  transform: none !important;
}
.carousel-inner>.item.active{
  bottom: 0;
  opacity: 1;
  height: inherit;
  -webkit-transition: bottom 600ms cubic-bezier(0.23, 1, 0.32, 1), opacity 450ms cubic-bezier(0.23, 1, 0.32, 1);
  transition: bottom 600ms cubic-bezier(0.23, 1, 0.32, 1), opacity 450ms cubic-bezier(0.23, 1, 0.32, 1);
  -webkit-transition: bottom 600ms cubic-bezier(0.23, 1, 0.32, 1) 150ms, opacity 450ms cubic-bezier(0.23, 1, 0.32, 1) 150ms;
  transition: bottom 600ms cubic-bezier(0.23, 1, 0.32, 1) 150ms, opacity 450ms cubic-bezier(0.23, 1, 0.32, 1) 150ms;
  transform: none !important;
}
<link href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>

<div class="container">
    <div class="row-fluid">
        <div class="span6 offset3">
            <div id="myCarousel" class="carousel slide vertical">
                <!-- Carousel items -->
                <ul class="carousel-inner">
                    <li class="active item">
                        <img src="http://placehold.it/600x400&amp;text=First+Slide">
                    </li>
                    <li class="item">
                        <img src="http://placehold.it/600x400&amp;text=Second+Slide">
                    </li>
                    <li class="item">
                        <img src="http://placehold.it/600x400&amp;text=Third+Slide">
                    </li>
                </ul>
                <!-- Carousel nav -->
                <a class="carousel-control left" href="#myCarousel" data-slide="prev">‹&lt;/a>
                <a class="carousel-control right" href="#myCarousel" data-slide="next">›&lt;/a>
            </div>
        </div>
    </div>
</div>

4

2 回答 2

0

动画在 上<li>，而不是在<ul>

使用引导程序的轮播，您应该创建一个处理动画的新类，然后触发事件“slide.bs.carousel”以从当前幻灯片中删除该类（这将“反转”过渡），然后触发事件“slide.bs.carousel” " 将动画类添加到新的当前幻灯片。

见http://getbootstrap.com/javascript/#carousel-events

于 2016-09-14T15:05:15.620 回答
0

因此，如果我理解正确，您基本上需要一个动画框架（例如 Dropbox 上的监视器）。您可以将您的 div 包装carousel在另一个 div 中并给它一个边框（或使用背景图像，如果您需要该监视器）。

试试这个：https ://jsfiddle.net/631bjrwL/42/

于 2016-09-14T15:13:47.437 回答