ブートストラップに左右の矢印ボタンが付いた画像スライダーを作成するには

Question

矢印ボタンで左右に移動するには画像作成スライダーが必要です。私は一度にページ内の4枚の画像を表示し、新しいイメージとのいずれかによって左右1を移動する必要が必要

<div class="col-md-3 animated fadeInUp" > 
      <div class="tourbox"> 
      <div style="background-image:url(); width:100%; height:100%;" class="zoom" > 
      </div> 
      </div> 
       <div class="col-md-12 text-center tourboxInner1"><img src="img/icons/info.png" width="30px"></div> 
       <div class="col-md-12 text-center tourboxInner">CLASSICAL TOUR</div> 

      </div> 


      <div class="col-md-3 animated fadeInUp"> 
      <div class="tourbox"> 
      <div style="background-image:url(); width:100%; height:100%;" class="zoom" > 
      </div> 
      </div> 
       <div class="col-md-12 text-center tourboxInner1"><img src="img/icons/info.png" width="30px"></div> 
       <div class="col-md-12 text-center tourboxInner">TEA COUNTRY TOUR</div> 
       </div> 

my image slider example link here

にここに私の既存の画像を参照してください。私はここでブートストラップを使用しています。どうすればこのことができますか？

Answer 1

こんにちはちょっと弟は私の答えは、あなたが完全にここにはカスタムCSSやJS

<div id="carouselExampleControls" class="carousel slide" data-ride="carousel"> 
<div class="carousel-inner" role="listbox"> 
<div class="carousel-item active"> 
    <img class="d-block img-fluid" src="http://www.planwallpaper.com/static/images/desktop-year-of-the-tiger-images-wallpaper.jpg" alt="First slide"> 
</div> 
<div class="carousel-item"> 
    <img class="d-block img-fluid" src="http://www.gettyimages.com/gi-resources/images/Embed/new/embed2.jpg" alt="Second slide"> 
</div> 
<div class="carousel-item"> 
    <img class="d-block img-fluid" src="https://www.w3schools.com/w3css/img_fjords.jpg" alt="Third slide"> 
</div> 
</div> 
<a class="carousel-control-prev" href="#carouselExampleControls" role="button" data-slide="prev"> 
<span class="carousel-control-prev-icon" aria-hidden="true"></span> 
<span class="sr-only">Previous</span> 
</a> 
<a class="carousel-control-next" href="#carouselExampleControls" role="button" data-slide="next"> 
<span class="carousel-control-next-icon" aria-hidden="true"></span> 
<span class="sr-only">Next</span> 
</a> 
</div> 

が、あなたは上の4枚の画像を表示するスライダーを探している私の理解によるとfiddle

Answer 2

を作業していないブートストラップ使用して助けすることができます各スライド。チュートリアルでは、carousel