ブートストラップモードでデータスライド効果を持たせるには？

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>

を