How to have data-slide effects inside Bootstrap modal?

Question

Is it possible to have data-slide effect inside bootstrap modal without using carousel

When i click a next button within the modal it need to slide to next div,and when back button clicked it need to data-slide previous page

is that possible??

               <!-- Modal -->
    <div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
      <div class="modal-dialog" role="document">
        <div class="modal-content">
          <div class="modal-header">
            <button type="button" class="close" data-dismiss="modal" aria-label="Close">
              <span aria-hidden="true">&times;</span>
            </button>
            <h4 class="modal-title" id="myModalLabel">Modal title</h4>
          </div>
           <div class="modal-body">
            This is Content 1
          </div>
          <div class="modal-footer">
            <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
            <button type="button" class="btn btn-primary">Move Next</button>
          </div>
          <div class="modal-body">
            This is Content 2
          </div>
          <div class="modal-footer">
            <button type="button" class="btn btn-primary" style="float:left;">Move Back</button>
            <button type="button" class="btn btn-primary">Move Next</button>
          </div>
        </div>
      </div>
    </div>  

<!-- jQuery first, then Bo

Example

Answer 1

You don't specify why you don't want to use carrousel. What i would do is thinking modals as simple slider. I would use a modal container larger than the window and push the modals dialogs to the left.

You can watch here the live example: https://jsfiddle.net/juanmamig/cfmepxpd/1/

$(".btn-next").click(function() {
  $('#modal-container').animate({
    'margin-left': '-=100%'
  }, 500);
});

$(".btn-back").click(function() {
  $('#modal-container').animate({
    'margin-left': '+=100%'
  }, 500);
});

#modal-container {
  width: 200%;
  /* One Modal --> 100%, Two modals --> 200%*/
  overflow: hidden
}

.modal-dialog {
  float: left;
  width: 50%;
  margin: 10px auto;
}

.modal-content {
  width: 600px;
  margin: 0 auto;
}

<div class="container">
  <div class="row">
    <div class="col-md-6">
      <button type="button" class="btn btn-primary btn-lg" data-toggle="modal" data-target="#myModal">
        Launch demo modal
      </button>
    </div>
  </div>
</div>

<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
  <div id="modal-container">
    <div class="modal-dialog" role="document">
      <div class="modal-content">
        <div class="modal-header">
          <button type="button" class="close" data-dismiss="modal" aria-label="Close">
            <span aria-hidden="true">&times;</span>
          </button>
          <h4 class="modal-title" id="myModalLabel">Modal title</h4>
        </div>
        <div class="modal-body">
          This is Content 1
        </div>
        <div class="modal-footer">
          <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
          <button type="next" class="btn btn-primary btn-next">Move Next</button>
        </div>
      </div>
    </div>

    <div class="modal-dialog" role="document">
      <div class="modal-content">
        <div class="modal-header">
          <button type="button" class="close" data-dismiss="modal" aria-label="Close">
            <span aria-hidden="true">&times;</span>
          </button>
          <h4 class="modal-title" id="myModalLabel">Modal title 2</h4>
        </div>
        <div class="modal-body">
          This is Content 2
        </div>
        <div class="modal-footer">
          <button type="back" class="btn btn-primary btn-back">Move Back</button>
          <button type="next" class="btn btn-primary btn-next">Move Next</button>
        </div>
      </div>
    </div>
  </div>
</div>