4 Divをモバイルデバイスのレスポンシブブートストラップカルーセルに変換する

Question

4つのboostratp divを小さなモバイルデバイスの応答性ブートストラップカルーセルスライダに表示する方法に関する質問が1つあります。私は非常に多くのWebサイトを通過しましたが、実際にこれらの4つのdiv要素を実際にどのように変換して、ブーストラーのカルーセルスライダーに1つずつ表示するのかは分かりません。私は以下のコードを表示します。私は、携帯機器用のカルーセルスライダーに変換する方法の助けが必要です。事前に感謝しています！ここで

は私のコードです： -

<div class="container"> 
     <h2 class="text-center"><span class="nom-pop">Popular</span><span class="bold-treat">Treatments</span></h2> 
     <div class="col-md-3 col-lg-3 col-sm-6 text-center"> 
      <div class="surgery-wrap clearfix"> 
       <div class="surgery-icon"> 
       <i class="ABCD123-icon ABCD123-cardiology"></i> 
       </div> 
       <div class="surgery-name"> 
        <p><strong>Cardiology</strong></p> 
       </div> 
       <div class="surgery-types"> 
        <ul> 
         <li>CABG Surgery</li> 
         <li>Heart Valve Replacement</li> 
         <li>Angioplasty</li> 
         <li>Balloon Angioplasty</li> 
        </ul> 
       </div> 
       <div class="view-more-surgery"> 
        <a href="#" class="vw-more-btn">View More <span class="glyphicon glyphicon-chevron-right"></span></a> 
       </div> 
      </div> 
     </div> 
     <div class="col-md-3 col-lg-3 col-sm-6 text-center"> 
      <div class="surgery-wrap clearfix"> 
       <div class="surgery-icon"> 
        <i class="ABCD123-icon ABCD123-orthopedic"></i> 
       </div> 
       <div class="surgery-name"> 
        <p><strong>Orthopedics</strong></p> 
       </div> 
       <div class="surgery-types"> 
        <ul> 
         <li>Knee Replacement</li> 
         <li>Hip Replacement</li> 
         <li>ACL Repair</li> 
         <li>Arthoscopy</li> 
        </ul> 
       </div> 
       <div class="view-more-surgery"> 
        <a href="#" class="vw-more-btn">View More <span class="glyphicon glyphicon-chevron-right"></span></a> 
       </div> 
      </div> 
     </div> 
     <div class="col-md-3 col-lg-3 col-sm-6 text-center"> 
      <div class="surgery-wrap clearfix"> 
       <div class="surgery-icon"> 
        <i class="ABCD123-icon ABCD123-cosmetic"></i> 
       </div> 
       <div class="surgery-name"> 
        <p><strong>Cosmetic</strong></p> 
       </div> 
       <div class="surgery-types"> 
        <ul> 
         <li>Face &amp; Neck Lift</li> 
         <li>Breast Augmentation</li> 
         <li>Mommy Makeover</li> 
         <li>Brazilian Butt Lift</li> 
        </ul> 
       </div> 
       <div class="view-more-surgery"> 
        <a href="#" class="vw-more-btn">View More <span class="glyphicon glyphicon-chevron-right"></span></a> 
       </div> 
      </div> 
     </div> 
     <div class="col-md-3 col-lg-3 col-sm-6 text-center"> 
      <div class="surgery-wrap clearfix"> 
       <div class="surgery-icon"> 
        <i class="ABCD123-icon ABCD123-neurology"></i> 
       </div> 
       <div class="surgery-name"> 
        <p><strong>Neurology</strong></p> 
       </div> 
       <div class="surgery-types"> 
        <ul> 
         <li>Brain Tumor</li> 
         <li>Deep Brain Simulation</li> 
         <li>Epilepsy</li> 
         <li>Craniotomy</li> 
        </ul> 
       </div> 
       <div class="view-more-surgery"> 
        <a href="#" class="vw-more-btn">View More <span class="glyphicon glyphicon-chevron-right"></span></a> 
       </div> 
      </div> 
     </div> 
     </div> 

Answer 1

は、モバイルデバイスを使用しているときにjQueryを使ってクラスを追加し、jQueryのを使用してスライドさせる簡単な前および次のボタンを作ります。

更新： owl carouselを使用して効果を得ることができます。