HTML

<div class="bs-carousel" data-behavior-is="carousel-cmp">
    <ul class="bs-carousel__slide-list">
        <li class="bs-carousel__slide">
            <div class="bs-carousel__image">
                <img src="https://placeimg.com/1000/450/nature" alt="" />
            </div>
            <div class="bs-carousel__content">
                <h3>This is a Carousel Slide 1</h3>
                <p>Lorem ipsum dolor sit amet consectetur adipisicing elit.</p>
                <a href="#">Goto page</a>
            </div>
        </li>
        <li class="bs-carousel__slide">
            <div class="bs-carousel__image">
                <img src="https://placeimg.com/1000/450/nature" alt="" />
            </div>
            <div class="bs-carousel__content">
                <h3>This is a Carousel Slide 2</h3>
                <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p>
                <a href="#">Goto page</a>
            </div>
        </li>
    </ul>
    <div class="bs-carousel__control">
        <button type="button" data-role="none" class="prev" aria-label="Previous" role="button">
            <i class="icon icofont-rounded-left"></i> Previous
        </button>
        <button type="button" data-role="none" class="next" aria-label="Next" role="button">
            Next <i class="icon icofont-rounded-right"></i>
        </button>
    </div>
</div>