如何在Bootstrap模態中使用數據滑動效果？

Question

是否有可能有引導模式裏面數據幻燈片效果，而無需使用轉盤

當我點擊下一步按鈕中的情態也需要滑動到下一個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/

$(".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>