Bootstrap 4 alpha5 carousel fade

Question

Good Day, Trying to get carousel fade transition to work. Any help will be appreciated. Here is code that I have so far.

Boot version: 4, alpha 5

Boot includes between header tags:

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

Custom css between header and after above boot includes. I know (Important) is likely not necessary, but i am running out of options.

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

Now this is my not working 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>

Now my boot includes before end of body tag:

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

If all fails, please recommend a simple java slider. I just want plain and simple image transition with fade effect. No need for any controls or sub titles.

Answer 1

See the below example.

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

Answer 2

I just wasted hours of my life using Bootstrap 4.0.0-alpha.5 & adjusting some of the snippets above. The class names have changed & the display method on some elements is flexbox so the image would not resize perspective (responsive) to window width. Do yourself a favour & wait for the official release. If you enjoy a challenge I can at least save you some time. This works (fading carousel slides) in Chrome. Have not tested other browsers.

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

I also grabbed the classes from the BS JS file:

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

UPDATE EDIT 4.0.0-beta.2 5th December 2017:

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

You may be able to trim some of the fat out this further? Working in FF, Chrome & Safari (IE/Edge untested).