Bootstrap 4 alpha5 轮播渐变答案

【问题标题】：Bootstrap 4 alpha5 carousel fadeBootstrap 4 alpha5 轮播渐变
【发布时间】：2017-04-10 03:13:20
【问题描述】：

美好的一天，试图让轮播淡入淡出过渡到工作。任何帮助将不胜感激。这是我到目前为止的代码。

引导版本：4，alpha 5

引导包含在标题标签之间：

<link rel="stylesheet" href="boot/css/bootstrap.min.css">
<link rel="stylesheet" href="boot/css/bootstrap-flex.min.css">
<link rel="stylesheet" href="boot/css/bootstrap-grid.min.css">
<link rel="stylesheet" href="boot/css/bootstrap-reboot.min.css">

标题之间和上述启动后的自定义 css 包括。我知道（重要）可能没有必要，但我已经没有选择了。

.carousel-fade .carousel-inner .item {
  -webkit-transition-property: opacity !important;
  transition-property: opacity !important;
}
.carousel-fade .carousel-inner .item,
.carousel-fade .carousel-inner .active.left,
.carousel-fade .carousel-inner .active.right {
  opacity: 0 !important;
}
.carousel-fade .carousel-inner .active,
.carousel-fade .carousel-inner .next.left,
.carousel-fade .carousel-inner .prev.right {
  opacity: 1 !important;
}
.carousel-fade .carousel-inner .next,
.carousel-fade .carousel-inner .prev,
.carousel-fade .carousel-inner .active.left,
.carousel-fade .carousel-inner .active.right {
  left: 0 !important;
  -webkit-transform: translate3d(0, 0, 0) !important;
          transform: translate3d(0, 0, 0) !important;
}

现在这是我不工作的旋转木马。

<div id="carousel-example-generic" class="carousel carousel-fade" data-ride="carousel">
      <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>
      </ol>
      <div class="carousel-inner" role="listbox">
        <div class="carousel-item active">
          <img src="images/img1.png" alt="First slide">
        </div>
        <div class="carousel-item">
          <img src="images/img2.png" alt="Second slide">
        </div>
      </div>
    </div>

现在我的引导包括在正文标签结束之前：

<!-- Boot Includes -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.0.0/jquery.min.js" integrity="sha384-THPy051/pYDQGanwU6poAc/hOdQxjnOEXzbT+OuUAFqNqFjL+4IGLBgCJC3ZOShY" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/tether/1.2.0/js/tether.min.js" integrity="sha384-Plbmg8JY28KFelvJVai01l8WyZzrYWG825m+cZ0eDDS1f7d/js6ikvy1+X+guPIB" crossorigin="anonymous"></script>
<script src="boot/js/bootstrap.min.js"></script>

幻灯片的JS

$('.carousel').carousel({
  interval: 9000,
  pause: false
})

如果都失败了，请推荐一个简单的java滑块。我只想要带有淡入淡出效果的简单明了的图像过渡。不需要任何控件或子标题。

【问题讨论】：

标签： css twitter-bootstrap carousel

【解决方案1】：

请参见下面的示例。

$('.carousel').carousel({
  interval: 3000,
  pause: false
});

.carousel-fade .carousel-inner .carousel-item {
	-webkit-transition-property: opacity;
	-moz-transition-property: opacity;
	-o-transition-property: opacity;
	-ms-transition-property: opacity;
	transition-property: opacity;
}
.carousel-fade .carousel-inner .carousel-item,
.carousel-fade .carousel-inner .active.left,
.carousel-fade .carousel-inner .active.right {
	opacity: 0;
}
.carousel-fade .carousel-inner .active,
.carousel-fade .carousel-inner .next.left,
.carousel-fade .carousel-inner .prev.right {
	opacity: 1;
}
.carousel-fade .carousel-inner .next,
.carousel-fade .carousel-inner .prev,
.carousel-fade .carousel-inner .active.left,
.carousel-fade .carousel-inner .active.right {
	left: 0;
	-webkit-transform: translate3d(0, 0, 0);
	-moz-transform: translate3d(0, 0, 0);
	-o-transform: translate3d(0, 0, 0);
	-ms-transform: translate3d(0, 0, 0);
	transform: translate3d(0, 0, 0);
}

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.5/css/bootstrap.min.css" integrity="sha384-AysaV+vQoT3kOAXZkl02PThvDr8HYKPZhNT5h/CXfBThSRXQ6jW5DO2ekP5ViFdi" crossorigin="anonymous">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js" integrity="sha384-3ceskX3iaEnIogmQchP8opvBy3Mi7Ce34nWjpBIwVTHfGYWQS9jwHDVRnpKKHJg7" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/tether/1.3.7/js/tether.min.js" integrity="sha384-XTs3FgkjiBgo8qjEjBk0tGmf3wPrWtA6coPfQDfFEY8AnYJwjalXCiosYRBIBZX8" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.5/js/bootstrap.min.js" integrity="sha384-BLiI7JTZm+JWlgKa0M0kGRpJbF2J8q+qreVrKBC47e3K6BW78kGLrCkeRX6I9RoK" crossorigin="anonymous"></script>
<div class="carousel slide carousel-fade" id="carousel">
  <div class="carousel-inner">
    <div class="carousel-item active" style="width:100%;height:400px;background:red;"></div>
    <div class="carousel-item" style="width:100%;height:400px;background:blue;"></div>
    <div class="carousel-item" style="width:100%;height:400px;background:green;"></div>
    <div class="carousel-item" style="width:100%;height:400px;background:yellow;"></div>
  </div>
  <a class="left carousel-control" href="#carousel" role="button" data-slide="prev">
    <span class="icon-prev" aria-hidden="true"></span>
    <span class="sr-only">Previous</span>
  </a>
  <a class="right carousel-control" href="#carousel" role="button" data-slide="next">
    <span class="icon-next" aria-hidden="true"></span>
    <span class="sr-only">Next</span>
  </a>
</div>

【讨论】：

【解决方案2】：

我只是在使用 Bootstrap 4.0.0-alpha.5 和调整上面的一些 sn-ps 时浪费了我的生命。类名已更改，某些元素的显示方法是 flexbox，因此图像不会将透视（响应）调整为窗口宽度。帮自己一个忙，等待正式发布。如果您喜欢挑战，我至少可以为您节省一些时间。这在 Chrome 中有效（褪色轮播幻灯片）。没有测试过其他浏览器。

.carousel-item.active,
.carousel-item-next,
.carousel-item-prev
{
    /*SET IN BS AS FLEXBOX. SO PERSPECTIVE SCALE DID NOT WORK*/
    display:block;
}


.carousel-inner>.carousel-item>a>img,
.carousel-inner>.carousel-item>img,
.img-responsive
{
    display: block;
    max-width: 100%;
    height: auto;
}

.carousel-fade .carousel-inner .carousel-item {
    -webkit-transition-property: opacity;
    -moz-transition-property: opacity;
    -o-transition-property: opacity;
    -ms-transition-property: opacity;
    transition-property: opacity;
}

.carousel-inner .carousel-item,
.carousel-inner .active.carousel-item-left,
.carousel-inner .active.carousel-item-right
{
    opacity:0;
}

.carousel-inner .active,
.carousel-inner .carousel-item-next.carousel-item-left,
.carousel-inner .carousel-item-previous.carousel-item-right
{
    opacity: 1;
}

.carousel-item.active,
.active.carousel-item-left,
.active.carousel-item-prev,
.carousel-item-next.carousel-item-left,
.carousel-item-prev.carousel-item-right
{
    left: 0;
    -webkit-transform: translate3d(0, 0, 0);
    -moz-transform: translate3d(0, 0, 0);
    -o-transform: translate3d(0, 0, 0);
    -ms-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
}

我也从BS JS文件中抓取了类：

var ClassName = {
    CAROUSEL: 'carousel',
    ACTIVE: 'active',
    SLIDE: 'slide',
    RIGHT: 'carousel-item-right',
    LEFT: 'carousel-item-left',
    NEXT: 'carousel-item-next',
    PREV: 'carousel-item-prev',
    ITEM: 'carousel-item'
  };

更新编辑 4.0.0-beta.2 2017 年 12 月 5 日：

.carousel-item {
    opacity: 0;
    transition: opacity 0.6s ease !important; 
}

.carousel-item-next,
.carousel-item-prev {
    left: 0 !important;
}

.carousel-item-next.carousel-item-left,
.carousel-item-prev.carousel-item-right {
    -webkit-transform: none;
            transform: none;
}

@supports ((-webkit-transform-style: preserve-3d) or (transform-style: preserve-3d)) {
    .carousel-item-next.carousel-item-left,
    .carousel-item-prev.carousel-item-right {
    -webkit-transform: none;
            transform: none;
    }
}

.carousel-item-next,
.active.carousel-item-right {
    -webkit-transform: none;
            transform: none;
}

@supports ((-webkit-transform-style: preserve-3d) or (transform-style: preserve-3d)) {
    .carousel-item-next,
    .active.carousel-item-right {
    -webkit-transform: none;
            transform: none;
    }
}

.carousel-item-prev,
.active.carousel-item-left {
    -webkit-transform: none;
            transform: none;
}

@supports ((-webkit-transform-style: preserve-3d) or (transform-style: preserve-3d)) {
    .carousel-item-prev,
    .active.carousel-item-left {
    -webkit-transform: none;
            transform: none;
    }
}

// THE FIX
.carousel-inner .carousel-item,
.carousel-inner .active.carousel-item-left,
.carousel-inner .active.carousel-item-right
{
    opacity:0;
}

.carousel-inner .active,
.carousel-inner .carousel-item-next.carousel-item-left,
.carousel-inner .carousel-item-prev.carousel-item-right
{
    opacity: 1;
}

您可以进一步减少一些脂肪吗？在 FF、Chrome 和 Safari 中工作（IE/Edge 未经测试）。

【讨论】：

干得好，Kerry7777。这个 CSS 似乎仍在 Alpha 6 中工作。
仅供参考，这似乎不适用于 Bootstrap 4.0.0-beta
我最近在使用最新的 BS 版本时也遇到了麻烦。他们可能再次更改了类名或重新设计了样式规则？那么上面的答案可能不再有效？

【解决方案3】：

试试这个，它在我的 bootstrap 4 beta carousel 上工作

.carousel-fade .carousel-item {
    opacity: 0;
    -webkit-transition-duration: .6s;
    transition-duration: .6s;
    -webkit-transition-property: opacity;
    transition-property: opacity; 
}

.carousel-fade .carousel-item.active,
.carousel-fade .carousel-item-next.carousel-item-left,
.carousel-fade .carousel-item-prev.carousel-item-right {
    opacity: 1; 
}

.carousel-fade .active.carousel-item-left,
.carousel-fade .active.carousel-item-right {
    opacity: 0; 
}

.carousel-fade .carousel-item-next,
.carousel-fade .carousel-item-prev,
.carousel-fade .carousel-item.active,
.carousel-fade .active.carousel-item-left,
.carousel-fade .active.carousel-item-prev {
    -webkit-transform: translateX(0);
    -ms-transform: translateX(0);
    transform: translateX(0); 
}

@supports (transform-style: preserve-3d) {
    .carousel-fade .carousel-item-next,
    .carousel-fade .carousel-item-prev,
    .carousel-fade .carousel-item.active,
    .carousel-fade .active.carousel-item-left,
    .carousel-fade .active.carousel-item-prev {
        -webkit-transform: translate3d(0, 0, 0);
        transform: translate3d(0, 0, 0); 
    } 
}

<!doctype html>
<html lang="en">
    <head>
        <!-- Required meta tags -->
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

        <!-- Bootstrap CSS -->
        <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">

        <title>Hello, world!</title>
    </head>
    <body>
        <div id="carouselExampleIndicators" class="carousel slide carousel-fade" data-ride="carousel">
            <div class="carousel-inner">
                <div class="carousel-item active">
                    <img class="d-block w-100" src="https://c1.staticflickr.com/7/6107/6381966401_032df5fe1e_b.jpg" alt="First slide">
                </div>
                <div class="carousel-item">
                    <img class="d-block w-100" src="http://saxony-blue.com/data/out/86/5918348-image.jpg" alt="Second slide">
                </div>
                <div class="carousel-item">
                    <img class="d-block w-100" src="https://www.gettyimages.ca/gi-resources/images/Homepage/Hero/UK/CMS_Creative_164657191_Kingfisher.jpg" alt="Third slide">
                </div>
            </div>
            <a class="carousel-control-prev" href="#carouselExampleIndicators" role="button" data-slide="prev">
                <span class="carousel-control-prev-icon" aria-hidden="true"></span>
                <span class="sr-only">Previous</span>
            </a>
            <a class="carousel-control-next" href="#carouselExampleIndicators" role="button" data-slide="next">
                <span class="carousel-control-next-icon" aria-hidden="true"></span>
                <span class="sr-only">Next</span>
            </a>
        </div>

        <!-- Optional JavaScript -->
        <!-- jQuery first, then Popper.js, then Bootstrap JS -->
        <script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
        <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
        <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>
    </body>
</html>

【讨论】：

【解决方案4】：

我为 Bootstrap 4.0.0-beta 提出了一个相当简单的解决方案：

使用position: absolute 堆叠轮播项目
显示轮播项目，将不透明度设置为 0
将活动轮播项目的不透明度设置为 1

.carousel-fade .carousel-item {
  display: block;
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  opacity: 0;
  transition: opacity 500ms ease;
}
.carousel-fade .carousel-item.active {
  opacity: 1;
}

/* Fixed height, can be dynamic using JS */
.carousel-fade .carousel-inner,
.carousel-fade .carousel-item {
  height: 300px;
}

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/css/bootstrap.min.css" integrity="sha384-/Y6pD6FV/Vv2HJnA6t+vslU6fwYXjCFtcEpHbNJ0lyAFsXTsjBbfaDjzALeQsN6M" crossorigin="anonymous">

<div class="carousel carousel-fade" data-ride="carousel" data-interval="2000">
    <div class="carousel-inner" role="listbox">

        <div class="carousel-item active" style="background: red">
            <div class="container">
                <h1>Item 1</h1>
            </div>
        </div>

        <div class="carousel-item" style="background: blue">
            <div class="container">
                <h1>Item 2</h1>
            </div>
        </div>

        <div class="carousel-item" style="background: green">
            <div class="container">
                <h1>Item 3</h1>
            </div>
        </div>
        
    </div>
</div>
  
<!-- jQuery !-->
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js"
  integrity="sha256-k2WSCIexGzOj3Euiig+TlR8gA0EmPjuc79OEeY5L45g="
  crossorigin="anonymous"></script>
  
<!-- Popper !-->
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.11.0/umd/popper.min.js" integrity="sha384-b/U6ypiBEHpOf/4+1nzFpr53nxSS+GLCkfwBdFNTxtclqqenISfwAzpKaMNFNmj4" crossorigin="anonymous"></script>

<!-- Bootstrap !-->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/js/bootstrap.min.js"
  integrity="sha384-h0AbiXch4ZDo7tp9hKZ4TsHbi047NrKGLO3SEJAg45jXxnGIfYzk4Si90RDIqNm1"
  crossorigin="anonymous"></script>

carousel 包装元素不会继承其子元素的高度，因为 carousel 项目是绝对定位的。这意味着我们必须为纯 CSS 解决方案设置一个固定的高度，尽管我们可以使用一些 JavaScript 轻松解决这个问题：

// Set min-height property based on the tallest carousel item.
(function () {
    var $inner = $('.carousel-inner'),
        $items = $('.carousel-item');

    var maxHeight = Math.max.apply(null,
        $items.map(function() {
            return $(this).outerHeight();
        })
    );

    $inner
        .add($items)
        .css('min-height', maxHeight);
})();

编码愉快。

【讨论】：

【解决方案5】：

HTML：

<div id="carousel-example-generic" class="carousel carousel-fade" data-ride="carousel">
----
---
</div>

CSS：

.carousel-fade .carousel-inner .item {
  -webkit-transition-property: opacity;
  transition-property: opacity;
}
.carousel-fade .carousel-inner .item,
.carousel-fade .carousel-inner .active.left,
.carousel-fade .carousel-inner .active.right {
  opacity: 0;
}
.carousel-fade .carousel-inner .active,
.carousel-fade .carousel-inner .next.left,
.carousel-fade .carousel-inner .prev.right {
  opacity: 1;
}
.carousel-fade .carousel-inner .next,
.carousel-fade .carousel-inner .prev,
.carousel-fade .carousel-inner .active.left,
.carousel-fade .carousel-inner .active.right {
  left: 0;
  -webkit-transform: translate3d(0, 0, 0);
          transform: translate3d(0, 0, 0);
}

JS：

$('.carousel').carousel({
  interval: 9000,
  pause: false
})

【讨论】：

感谢您的 sn-p。但是淡入淡出效果仍然不起作用。图像现在只是在瞬间相互替换。以上是 bootstrap 4 alpha5 版本的 sn-p 吗？
可以使用js放慢速度。上面编辑过的代码。
我上面已经合并了JS，图片现在变化比较慢，但是没有淡入淡出效果。罪魁祸首在别处。
我刚刚更新了上面的脚本以反映现在的一切。

【解决方案6】：

试试这个，它在我的测试版本中工作：

.carousel-fade .carousel-item {
  position: absolute;  
  display: block;
  transition: opacity .9s ease-in-out;
  opacity: 0;
}
.carousel-fade .carousel-item.active {
  opacity: 1;
}

我还发现.carousel-fade {background-color: #000000;} 如果您的项目有背景图片，则使过渡看起来更平滑。

在 v4-alpha 中，轮播系统在很大程度上被重写，因此先前答案中的类和转换目标仅适用于 Bootstrap 3。这是来自 v4.0.0-alpha.6 构建的一个 sn-p，它演示了 Bootstrap 如何团队重写了课程：

// CSS3 transforms when supported by the browser
@include if-supports-3d-transforms() {
  .carousel-item-next.carousel-item-left,
  .carousel-item-prev.carousel-item-right {
    transform: translate3d(0, 0, 0);
  }

【讨论】：

我认为要让它工作，您需要为这些元素设置宽度和高度：.carousel-fade, .carousel-inner, .carousel-item { width: 100%; height: 100%; } 你能确认一下吗？这可能并不适合所有需求。