0

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>
Rick
  • 555
  • 1
  • 12
  • 30
  • Do you still have this question? A quick hint the docs are not ideal in my opinion because they do not provide a full example. You have to attach events to the button click. Often this is done in a [execute function](https://stackoverflow.com/a/6274431/819887): `(function ($) { 'use strict' $(function () { // code to attach events belongs here }) }(jQuery))` – surfmuggle Aug 28 '17 at 22:16
  • I do. Yes I have done that, using the data-target for the carousel and using Jquery to initiate the modal. – Rick Aug 29 '17 at 04:58
  • If you add your javascript code and any potential error message from the browser console it will be easier to help you. – surfmuggle Aug 29 '17 at 05:13

0 Answers0