부트 스트랩 4 캐 러셀에 여러 이미지를 쌓는 방법

Question

부트 스트랩 4로 무엇을해야할지 모르겠습니다. 한 슬라이드에 여러 개의 작은 이미지 (예 : 미리보기 이미지)를 표시하는 방법은 이미지의 너비를 채우는 것과 반대입니다. 회전 목마. 아래 코드로 몇 가지 시도를했지만 여전히 많은 이미지를 쌓을 수는 없습니다.

<div class="container"> 
    <h2 class="text-center">- Carousel -</h2><br> 

    <div id="carouselExampleControls" class="carousel slide" data-ride="carousel"> 
     <div class="carousel-inner"> 
      <div class="carousel-item active"> 
       <img src="http://via.placeholder.com/250x250" alt="First slide"> 
      </div> 
      <div class="carousel-item"> 
       <img src="http://via.placeholder.com/250x250" alt="Second slide"> 
      </div> 
      <div class="carousel-item"> 
       <img src="http://via.placeholder.com/250x250" alt="Third slide"> 
      </div> 
      <div class="carousel-item"> 
       <img src="http://via.placeholder.com/250x250" alt="Fourth slide"> 
      </div> 
      <div class="carousel-item"> 
       <img src="http://via.placeholder.com/250x250" alt="Fifth slide"> 
      </div> 
      <div class="carousel-item"> 
       <img src="http://via.placeholder.com/250x250" alt="Sixth 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> 
</div> 

예제를 보려면 https://www.rhtacademy.com/을 방문하고 하이라이트 섹션을 참조하십시오.

Answer 1

회전 장치 슬라이드에도 표준 부트 스트랩 Grid system 클래스를 사용할 수 있습니다. 따라서 아래 예제에서 마크 업을 사용하여 example에 표시된 동작을 얻을 수 있습니다.
이 예제는 하나의 슬라이드에 다섯 개의 이미지를 보여 주며 캐 러셀이 다음 항목으로 슬라이드하면 다섯 개의 이미지로 된 다음 블록을 보여줍니다.

<div id="gallery" class="carousel slide" data-ride="carousel"> 
 
    <div class="carousel-inner"> 
 
     <div class="carousel-item active"> 
 
      <div class="row"> 
 
       <div class="col"> 
 
        <img class="img-fluid" src="http://via.placeholder.com/800x450/caa8f5/ffffff?text=Image+1" alt="Image 1"/> 
 
       </div> 
 

 
       <div class="col"> 
 
        <img class="img-fluid" src="http://via.placeholder.com/800x450/9984d4/ffffff?text=Image+2" alt="Image 2"/> 
 
       </div> 
 

 
       <div class="col"> 
 
        <img class="img-fluid" src="http://via.placeholder.com/800x450/592e83/ffffff?text=Image+3" alt="Image 3"/> 
 
       </div> 
 

 
       <div class="col"> 
 
        <img class="img-fluid" src="http://via.placeholder.com/800x450/230c33/ffffff?text=Image+4" alt="Image 4"/> 
 
       </div> 
 

 
       <div class="col"> 
 
        <img class="img-fluid" src="http://via.placeholder.com/800x450/b27c66/ffffff?text=Image+5" alt="Image 5"/> 
 
       </div> 
 
      </div> 
 
     </div> 
 

 
     <div class="carousel-item"> 
 
      <div class="row"> 
 
       <div class="col"> 
 
        <img class="img-fluid" src="http://via.placeholder.com/800x450/f35b04/ffffff?text=Image+6" alt="Image 6"/> 
 
       </div> 
 

 
       <div class="col"> 
 
        <img class="img-fluid" src="http://via.placeholder.com/800x450/f18701/ffffff?text=Image+7" alt="Image 7"/> 
 
       </div> 
 

 
       <div class="col"> 
 
        <img class="img-fluid" src="http://via.placeholder.com/800x450/f7b801/ffffff?text=Image+8" alt="Image 8"/> 
 
       </div> 
 

 
       <div class="col"> 
 
        <img class="img-fluid" src="http://via.placeholder.com/800x450/7678ed/ffffff?text=Image+9" alt="Image 9"/> 
 
       </div> 
 

 
       <div class="col"> 
 
        <img class="img-fluid" src="http://via.placeholder.com/800x450/3d348b/ffffff?text=Image+10" alt="Image 10"/> 
 
       </div> 
 
      </div> 
 
     </div> 
 
    </div> 
 

 
    <a class="carousel-control-prev" href="#gallery" 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="#gallery" role="button" data-slide="next"> 
 
     <span class="carousel-control-next-icon" aria-hidden="true"></span> 
 
     <span class="sr-only">Next</span> 
 
    </a> 
 
</div> 
 

 

 
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/css/bootstrap.min.css" rel="stylesheet"/> 
 
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js"></script> 
 
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.3/umd/popper.min.js"></script> 
 
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/js/bootstrap.min.js"></script>

Answer 2

다음 버튼에서 클릭 이벤트를 발생 시키십시오. 이 같은 뭔가 :

var timer = setInterval(function(){ 
    $('#nextButton').trigger('click'); 
},2000) 

이전 버튼을 클릭하면 타이머를 초기화하는 것을 잊지 마십시오. 그렇지 않으면 어떤 결함이 생길 수 있습니다.