BOOTSTRAP WP CAROUSEL FADE

              <!-- CAROUSEL FADE-->
    <div id="carouselIndicators" class="carousel carousel-fade" data-ride="carousel">
    <div class="container">
        <div class="box-green-1">
            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi.</p>
        </div>
        <div class="box-green-2">
            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi.</p>
        </div>
    </div>
    <ol class="carousel-indicators">
        <?php $number = 0;
global $post; $indicator = get_posts(array('post_type' => 'slider', 'posts_per_page' => 7)); ?>
        <?php foreach($indicator as $slide): ?>
        <li data-target="#carouselIndicators" data-slide-to="<?php echo $number; ?>" class="<?php echo ($number == 0) ? 'active' : ''; ?>"></li>
        <?php $number++; ?>
        <?php endforeach; ?>
    </ol>
    <!-- Wrapper for slides -->
    <div class="carousel-inner" role="listbox">
        <?php $slider = get_posts(array('post_type' => 'slider', 'posts_per_page' => 7)); ?>
        <?php $count = 0; ?>
        <?php foreach($slider as $slide): ?>
        <div class="carousel-item <?php echo ($count == 0) ? 'active' : ''; ?>" style="background-image: url('<?php echo wp_get_attachment_url( get_post_thumbnail_id($slide->ID)) ?>'">
            <div class="carousel-caption">
                <h2>
                    <?php echo $slide->post_title; ?>
                </h2>
                <p>
                    <?php echo $slide->post_content; ?> </p>
            </div>
        </div>
        <?php $count++; ?>
        <?php endforeach; ?>
    </div>
    <a class="left carousel-control" href="#carouselIndicators" role="button" data-slide="prev">
        <span class="carousel-control-prev-icon myicon_prev" aria-hidden="true"></span>
        <span class="sr-only">Previous</span>
    </a>
    <a class="right carousel-control" href="#carouselIndicators" role="button" data-slide="next">
        <span class="carousel-control-next-icon myicon_next" aria-hidden="true"></span>
        <span class="sr-only">Next</span>
    </a>
</div>

----------------SASS----------------
    /*Carousel*/

// Carousel fade transition
.carousel {
  position: absolute;
  top: 0;
  left: 0;
}

.carousel-fade {
    .carousel-item {
        display: block;
        position: absolute;
        opacity: 0;
          height: 100vh;
    background: no-repeat top center scroll;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
    -webkit-transition: opacity 1s ease-in-out;
    -moz-transition: opacity 1s ease-in-out;
    -ms-transition: opacity 1s ease-in-out;
    -o-transition: opacity 1s ease-in-out;
    transition: opacity 1s ease-in-out;
        &.active {
            opacity: 1;
        }
    }
}


 // Custom styles for this pen
.carousel,
.carousel-inner,
.carousel-item {
  width: 100%;
  height: 100%;
}

---------------JS
   jQuery(function ($) {
    $('.carousel').carousel({
        interval: 5000,
        pause: "false"
    });
});