Bootstrap 4 alpha5旋转木马褪色

时间：2016-11-25 17:06:31

标签： css twitter-bootstrap carousel

美好的一天，尝试让旋转木马过渡到工作。任何帮助将不胜感激。这是我到目前为止的代码。

启动版本：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;
}

现在这是我不工作的carusel。 

<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 for slideshow 

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

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

6 个答案:

答案 0 :(得分：4)

请参阅以下示例。 

$('.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>

答案 1 :(得分：4)

我只是浪费了几个小时的生命，使用Bootstrap 4.0.0-alpha.5＆amp;调整上面的一些片段。班级名称已更改＆amp;某些元素的显示方法是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);
}

Bootstrap 4.0.0-alpha.5 fade transition我还抓住了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＆amp; Safari（IE / Edge未经测试）。

答案 2 :(得分：2)

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

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

答案 3 :(得分：1)

我为 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>

轮播包装元素不会继承其子元素的高度，因为轮播项目是绝对定位的。这意味着我们必须为纯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);
})();

快乐的编码。

答案 4 :(得分：0)

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
})

答案 5 :(得分：0)

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

.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版本的一个片段，演示了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);
  }
相关问题
最新问题