javascript - 如何在 Bootstrap 模态中产生数据幻灯片效果？

Question

是否可以在 Bootstrap 模态不使用轮播的情况下实现data-slide效果

当我点击模式中的下一个按钮时，它需要滑动到下一个 div，当单击后退按钮时，它需要数据滑动到上一页

这可能吗？？

               <!-- 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

例子

Answer 1

您没有说明不想使用轮播的原因。我会做的是将模式视为简单的 slider 。我会使用比窗口大的模态容器并将模态对话框推到左侧。

您可以在这里观看现场示例: 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>