Carousel with full control

carousel-contorl.html

<div id="showcase">
    <div id="myCarousel" class="carousel slide" data-ride="carousel">
      <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>
      </ol>
      <div class="carousel-inner">
        <div class="carousel-item carousel-img-1 active">
          <div class="container">
            <div class="carousel-caption d-none d-sm-block text-right mb-5">
              <h1 class="display-3">Heading one</h1>
              <p class="lead">Lorem ipsum dolor sit amet consectetur, adipisicing elit. Unde commodi, non amet saepe,
                ipsa nostrum soluta, labore minima deserunt incidunt eos laborum.</p>
              <a href="#" class="btn btn-danger btn-lg">Signup Now</a>
            </div>
          </div>
        </div>
        <div class="carousel-item carousel-img-2">
          <div class="container">
            <div class="carousel-caption d-none d-sm-block mb-5">
              <h1 class="display-3">Heading two</h1>
              <p class="lead">Lorem ipsum dolor sit amet consectetur, adipisicing elit. Unde commodi, non amet saepe,
                ipsa nostrum soluta, labore minima deserunt incidunt eos laborum.</p>
              <a href="#" class="btn btn-primary btn-lg">Learn More</a>
            </div>
          </div>
        </div>
        <div class="carousel-item carousel-img-3">
          <div class="container">
            <div class="carousel-caption d-none d-sm-block text-right mb-5">
              <h1 class="display-3">Heading three</h1>
              <p class="lead">Lorem ipsum dolor sit amet consectetur, adipisicing elit. Unde commodi, non amet saepe,
                ipsa nostrum soluta, labore minima deserunt incidunt eos laborum.</p>
              <a href="#" class="btn btn-danger btn-lg">Signup Now</a>
            </div>
          </div>
        </div>
      </div>
      <a href="#myCarousel" data-slide="prev" class="carousel-control-prev"><span class="carousel-control-prev-icon"></span></a>
      <a href="#myCarousel" data-slide="next" class="carousel-control-next"><span class="carousel-control-next-icon"></span></a>
    </div>
  </div>