Bootstrap 4 alpha5 carousel fade
<p>Good Day, Trying to get carousel fade transition to work. Any help will be appreciated. Here is code that I have so far. </p>

<p>Boot version: 4, alpha 5</p>

<p>Boot includes between header tags:</p>

<pre><code>&lt;link rel="stylesheet" href="boot/css/bootstrap.min.css"&gt;
&lt;link rel="stylesheet" href="boot/css/bootstrap-flex.min.css"&gt;
&lt;link rel="stylesheet" href="boot/css/bootstrap-grid.min.css"&gt;
&lt;link rel="stylesheet" href="boot/css/bootstrap-reboot.min.css"&gt;
</code></pre>

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

<pre><code>.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;
}
</code></pre>

<p>Now this is my not working carusel. </p>

<pre><code>&lt;div id="carousel-example-generic" class="carousel carousel-fade" data-ride="carousel"&gt;
      &lt;ol class="carousel-indicators"&gt;
        &lt;li data-target="#carousel-example-generic" data-slide-to="0" class="active"&gt;&lt;/li&gt;
        &lt;li data-target="#carousel-example-generic" data-slide-to="1"&gt;&lt;/li&gt;
      &lt;/ol&gt;
      &lt;div class="carousel-inner" role="listbox"&gt;
        &lt;div class="carousel-item active"&gt;
          &lt;img src="images/img1.png" alt="First slide"&gt;
        &lt;/div&gt;
        &lt;div class="carousel-item"&gt;
          &lt;img src="images/img2.png" alt="Second slide"&gt;
        &lt;/div&gt;
      &lt;/div&gt;
    &lt;/div&gt;
</code></pre>

<p>Now my boot includes before end of body tag:</p>

<pre><code>&lt;!-- Boot Includes --&gt;
&lt;script src="https://ajax.googleapis.com/ajax/libs/jquery/3.0.0/jquery.min.js" integrity="sha384-THPy051/pYDQGanwU6poAc/hOdQxjnOEXzbT+OuUAFqNqFjL+4IGLBgCJC3ZOShY" crossorigin="anonymous"&gt;&lt;/script&gt;
&lt;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"&gt;&lt;/script&gt;
&lt;script src="boot/js/bootstrap.min.js"&gt;&lt;/script&gt;
</code></pre>

<p>JS for slideshow</p>

<pre><code>$('.carousel').carousel({
  interval: 9000,
  pause: false
})
</code></pre>

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