bootstrap modal with carousel, how to open modal with different slide?

Question

i am leveraging the standard bootstrap method of initiating the modal and showing a carousel within the modal.

So depending on which button they use to trigger the modal, i want the carousel slide to be different.

below is the code thus far, but i am unable to use the data-slide-to to select the slide in the modal.

button on page:

<button type="button" data-toggle="modal" data-target="#tile-modal" data-tile="0" data-slide-to="0" data-position="0" class="btn btn-xs btn-default">Slide 1</button>

<button type="button" data-toggle="modal" data-target="#tile-modal" data-tile="1" data-slide-to="1" data-position="1" class="btn btn-xs btn-default">Slide 2</button>

modal:

<div class="modal fade fill-in" id="tile-modal" tabindex="-1" role="dialog" aria-labelledby="modalFillInLabel" style="display: none;" aria-hidden="true">
  <button type="button" class="close" data-dismiss="modal" aria-hidden="true">
    <i class="far fa-times"></i>
  </button>
  <div class="modal-dialog ">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="text-left p-b-5">Available <span class="semi-bold">Tiles</span></h5>
      </div>
      <div class="modal-body">
        <div class="row">
          <div class="col-12">
            <div id="carouselExampleControls" class="carousel slide" data-interval="false" data-ride="carousel">
              <div class="carousel-inner" role="listbox">
                <div class="carousel-item">
                  <div class="col-12 padding-5">
                    <div class="tile-block red text-white b-a b-grey">
                      <div class="card-header d-flex align-items-center p-t-5 p-l-15 p-r-15">
                        <div class="card-title col-6">Delivery Summary</div>
                        <div class="clearfix"></div>
                      </div>
                    </div>
                  </div>
                </div>
                <div class="carousel-item active">
                  <div class="col-12 padding-5">
                    <div class="tile-block blue text-white b-a b-grey b-dashed">
                      <div class="card-header d-flex align-items-center p-t-5 p-l-15 p-r-15">
                        <div class="card-title col-6">Delivery Status</div>
                        <div class="clearfix"></div>
                      </div>
                    </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>
        </div>
      </div>
    </div>
    <!-- /.modal-content -->
  </div>
  <!-- /.modal-dialog -->
</div>