How to have data-slide effects inside Bootstrap modal?
<p>Is it possible to have <strong>data-slide</strong> effect inside bootstrap modal <strong><em>without using carousel</em></strong></p>

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

<p>is that possible??</p>

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

&lt;!-- jQuery first, then Bo
</code></pre>

<p>Example</p>

<p><a href="https://i.stack.imgur.com/ZyChH.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/ZyChH.png" alt="enter image description here"></a></p>