Question

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

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

＆＃13;

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

＆＃13;

<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">‹</a>
                <a class="carousel-control right" href="#myCarousel" data-slide="next">›</a>
            </div>
        </div>
    </div>
</div>

＆＃13;

Answer 1

动画位于<li>，而不是<ul>

使用bootstrap的轮播你应该创建一个处理动画的新类，然后触发事件“slide.bs.carousel”从当前幻灯片中删除这个类（这将“反转”转换）然后触发事件“滑动”。 bs.carousel“将动画类添加到新的当前幻灯片。

请参阅http://getbootstrap.com/javascript/#carousel-events

Answer 2

所以，如果我理解正确，你基本上需要一个动画帧（就像Dropbox上的监视器一样）。您可以将carousel包裹在另一个div中并为其指定边框（如果需要该监视器，则使用背景图像）。

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

如何制作这个顶部底部幻灯片效果

2 个答案: