Question

是否可以在bootstrap模式 中使用数据幻灯片效果而不使用轮播

当我点击模态中的下一个按钮时，它需要滑动到下一个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

您没有说明您不想使用转盘的原因。我会做的是将模态视为简单的滑块。我会使用比窗口大的模态容器，并将模态对话框推到左边。

您可以在此处观看实时示例： https://jsfiddle.net/juanmamig/cfmepxpd/1/

＆＃13;

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

＆＃13;

#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;
}

＆＃13;

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

＆＃13;

如何在Bootstrap模式中使用数据幻灯片效果？

1 个答案: