Bootstrap 4 alpha5 carousel fade - css

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

Answer 3

Try this, its work on my 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>

Answer 4

Try this, it's working in my test build:
.carousel-fade .carousel-item {
position: absolute;
display: block;
transition: opacity .9s ease-in-out;
opacity: 0;
}
.carousel-fade .carousel-item.active {
opacity: 1;
}
I also find that .carousel-fade {background-color: #000000;} makes the transition look smoother if your items have background images.
In v4-alpha, the carousel system was largely rewritten, so the class and transition targeting in previous answers only works with Bootstrap 3. Here's a snippet from the v4.0.0-alpha.6 build that demonstrates how the Bootstrap team rewrote classes:
// 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);
}

Answer 5

I've come up with a rather easy solution for Bootstrap 4.0.0-beta:
Stack carousel items using position: absolute
Display carousel items, set opacity to 0
Set opacity to 1 on the active carousel item
.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>
The carousel wrapper element does not inherit the height of its children since the carousel items are absolute positioned. This mean we have to set a fixed height for a pure-CSS solution, though we can easily solve this with some 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);
})();
Happy coding.

Answer 6

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