How to create carousel with multiple card/dividers with bootstrap 4.1?

Question

I am trying to use bootstrap 4.1 in a new web project. On the main page of my project, I want to show the users a carousel with multiple html dividers.

The end result should look like something like the following picture

When a user clicks the previous/next buttons, the carousel advances one HTML divider toward the corresponding direction.

I found slick-carousel plugin which seems to do exactly what I am looking for. But, I am hesitating into adding yet another library in my project. To avoid adding another library, I am hoping to be able to utilize Bootstrap 4.1 own Carousel to get a similar result.

The code snippet found in this link shows the slick-carousel plugin in action configured to how I wish the carousel behave on my site.

How can I configure twitter-bootstrap 4.1 owns carousel to do the same thing

I tried to configure Bootstrap's carousel as follow https://www.codeply.com/go/gF4VnWfIAW

<div class="jumbotron bg-primary">
    <div id="carouselExampleControls" class="carousel slide" data-ride="carousel">
      <div class="carousel-inner">
        <div class="carousel-item text-center active">

            <div class="card" style="width: 18rem;">
              <div class="card-body">
                <h5 class="card-title">First</h5>
                <p class="card-text">First Block</p>
              </div>
            </div>

        </div>
        <div class="carousel-item text-center">


            <div class="card" style="width: 18rem;">
              <div class="card-body">
                <h5 class="card-title">Second</h5>
                <p class="card-text">Second Block</p>
              </div>
            </div>

       </div>
        <div class="carousel-item text-center">


            <div class="card" style="width: 18rem;">
              <div class="card-body">
                <h5 class="card-title">Third</h5>
                <p class="card-text">Third Block</p>
              </div>
            </div>

        </div>
      </div>
      <a class="carousel-control-prev" href="#carouselExampleControls" role="button" data-slide="prev">
        <span class="carousel-control-prev-icon" aria-hidden="true"></span>
        <span class="sr-only">Previous</span>
      </a>
      <a class="carousel-control-next" href="#carouselExampleControls" role="button" data-slide="next">
        <span class="carousel-control-next-icon" aria-hidden="true"></span>
        <span class="sr-only">Next</span>
      </a>
    </div>
</div>

However, the above code has two issues

1. It only shows one block/card at a time. I want to show 3 blocks at the same time and every time shift one block at a time.
2. It auto play which is something I don't want. I want to move one block when the user clicks the previous/next button.

How can I configure the bootstrap's carousel to show 3 card and slide one card at a time on click?