Bootstrap 3 Carousel Fade

Question

Hi I have carousel being used as a background image for a landing page. I want the carousel to fade not slide. Have researched a bit and can't seem to find an answer that has fixed my problem. The transition I've implemented is abrupt and annoying. Any suggestions would be appreciated.

Here is the code HTML

    <!-- Carousel -->
    <div class="fill">

    <div id="myCarousel" class="carousel slide carousel-fade">

    <ol class="carousel-indicators">
            <li data-target="#myCarousel" data-slide-to="0" class="active"></li>
            <li data-target="#myCarousel" data-slide-to="1"></li>
            <li data-target="#myCarousel" data-slide-to="2"></li>
            <li data-target="#myCarousel" data-slide-to="3"></li>
            <li data-target="#myCarousel" data-slide-to="4"></li>
            <li data-target="#myCarousel" data-slide-to="5"></li>
            <li data-target="#myCarousel" data-slide-to="6"></li>
            <li data-target="#myCarousel" data-slide-to="7"></li>
            <li data-target="#myCarousel" data-slide-to="8"></li>
        </ol>


      <div class="carousel-inner">
       <div class="active item">
         <div class="fill" style="background-image:url('images/1.jpg');">
        <div class="container">


          </div>
        </div>
       </div>
      <div class="item">
      <div class="fill" style="background-image:url('images/2.jpg');">
        <div class="container">


        </div>
      </div>
    </div>

    <div class="item">
      <div class="fill" style="background-image:url('images/3.jpg');">
        <div class="container">


        </div>
      </div>
    </div>

    <div class="item">
      <div class="fill" style="background-image:url('images/4.jpg');">
        <div class="container">


        </div>
      </div>
    </div>

    <div class="item">
      <div class="fill" style="background-image:url('images/5.jpg');">
        <div class="container">


        </div>
      </div>
    </div>

    <div class="item">
      <div class="fill" style="background-image:url('images/7.jpg');">
        <div class="container">


        </div>
      </div>
    </div>

    <div class="item">
      <div class="fill" style="background-image:url('images/8.jpg');">
        <div class="container">


        </div>
      </div>
    </div>

    <div class="item">
      <div class="fill" style="background-image:url('images/9.jpg');">
        <div class="container">


        </div>
      </div>
    </div>

    <div class="item">
      <div class="fill" style="background-image:url('images/10.jpg');">
        <div class="container">


        </div>
      </div>
    </div>

      </div>
    </div>
    </div>

AND THE CSS

/* CAROUSEL */
html,body {
    height:100%;
}
.carousel.carousel-fade .item {
    left: 0!important;
    opacity: 0;
}

.carousel.carousel-fade .active.item {
    height:100%;
    width: 100%;
    -webkit-transition: opacity .4s ease-in-out;
    -moz-transition: opacity .4s ease-in-out;
    -ms-transition: opacity .4s ease-in-out;
    -o-transition: opacity .4s ease-in-out;
    transition: opacity .4s ease-in-out;
    opacity:1;
}

.carousel,
.item, 
.active {
    height:100%;
    width: 100%;

}

.carousel-inner {
    height:100%;
    width: 100%;

}
.fill {
    width:100vw;
    height:100%;
    background-position:center;
    background-size:cover;
}

AND SOME JS

<script>
         $(document).ready(function(){
            $('.carousel').carousel({
                pause: "false",
                interval: 6000
            });
        });
        </script>

Please let me know if you can suggest or help at all.

Thanks