title: Bootstrap 4 alpha5 carousel fade
body: <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>