컴퓨터 디스플레이에서 두 장의 그림으로 된 회전식 캐 러셀을 모바일에서 한 장의 그림으로 만드는 방법은 무엇입니까?

Question

저는 컴퓨터 디스플레이에서 연속으로 두 장의 사진이있는 회전식 사진을 만들고 싶지만 모바일보기에서는 한 장의 사진 만 만듭니다. 이 사진은 내가 원하는 것을 컴퓨터보기에 있습니다 :

하지만 그림 2로 될 때

모바일

에 내가 하나를하고 다른 1 표시를 제거 할 것이 하나씩.

아래는 HTML 코드와 CSS입니다. 나는 또한 부트 스트랩을 사용하고있다.

<div class="row"> 
    <div class="col-md-2"></div> 
    <div class="col-md-8"> 
     <div id="Carousel" class="carousel slide"> 

      <ol class="carousel-indicators"> 
       <li data-target="#Carousel" data-slide-to="0" class="active"></li> 
       <li data-target="#Carousel" data-slide-to="1"></li> 
      </ol> 

      <!-- Carousel items --> 
      <div class="carousel-inner"> 

       <div class="item active"> 
        <div class="row"> 
         <div class="col-md-6"><a href="https://a2ua.com/picture/picture-002.jpg" target="_blank" class="thumbnail"><img src="https://a2ua.com/picture/picture-002.jpg" class="img-responsive" alt="Image" style="max-width:100%;"></a></div> 
         <div class="col-md-6"><a href="https://a2ua.com/picture/picture-002.jpg" target="_blank" class="thumbnail"><img src="https://a2ua.com/picture/picture-002.jpg" alt="Image" style="max-width:100%;"></a></div> 
        </div><!--.row--> 
       </div><!--.item--> 

       <div class="item"> 
        <div class="row"> 
         <div class="col-md-6"><a href="https://a2ua.com/picture/picture-002.jpg" target="_blank" class="thumbnail"><img src="https://a2ua.com/picture/picture-002.jpg" class="img-responsive" alt="Image" alt="Image" style="max-width:100%;"></a></div> 
         <div class="col-md-6"><a href="https://a2ua.com/picture/picture-002.jpg" target="_blank" class="thumbnail"><img src="https://a2ua.com/picture/picture-002.jpg" class="img-responsive" alt="Image" style="max-width:100%;"></a></div> 
        </div><!--.row--> 
       </div><!--.item--> 

      </div><!--.carousel-inner--> 

      <a data-slide="prev" href="#Carousel" class="left carousel-control black-link">‹</a> 
      <a data-slide="next" href="#Carousel" class="right carousel-control black-link">›</a> 

     </div><!--.Carousel--> 

    </div> <!--.col-md-8--> 
</div><!--.row--> 

CSS :

.carousel { 
    margin-bottom: 0; 
    padding: 0 40px 30px 40px; 
} 
/* The controlsy */ 
.carousel-control { 
    left: -30px; 
    height: 0px; 
    width: 0px; 
    font-size: 153px; 
    background: none repeat scroll 0 0 #000000; 
    border: none; 
    border-radius: 20px 20px 20px 20px; 
    margin-top: 0px; 
} 
.carousel-control.right { 
    right: -12px; 
} 
.carousel-control.left { 
    left: -62px; 
} 
/* The indicators */ 
.carousel-indicators { 
    right: 50%; 
    top: auto; 
    bottom: -10px; 
    margin-right: -19px; 
} 
/* The colour of the indicators */ 
.carousel-indicators li { 
    background: #ffffff; 
} 
.carousel-indicators .active { 
    background: #1b365d; 
} 

당신의 도움이 정말 감사드립니다.

Answer 1

이 문제를 해결할 수있는 방법은 여러 가지가 있습니다. 개인적으로 두 개의 완전히 다른 회전식 슬라이드를 사용하고 표준 부트 스트랩 클래스에서 사용하지 않는 것을 숨길 것입니다.

예를 들어

:이 방법으로 그것을 할 것

<div class='row'> 
    <!-- Large Carousel --> 
    <div class="hidden-xs"> 
      ... your carousel two picture version 
    </div> 
    <!-- Small Carousel --> 
    <div class="visible-xs"> 
      ... your carousel one picture 
    </div> 
</div> 

이유는 당신에게 어떻게 두 개의 서로 다른 회전 목마 디스플레이를 통해 대부분의 제어를 제공하는 것입니다. 두 가지 이미지 문제를 해결하고 다른 스타일 문제를 쉽게 조정할 수 있습니다. 그러나 더 많은 코드 라인을 이끌어 낼 것입니다.

동일한 클래스를 사용하여 단일 회전식 컨베이어 내에서 대신 수행 할 수 있습니다. 위의 예에서 :

<!-- Carousel items --> 
<div class="carousel-inner"> 

    <div class="item active"> 
     <div class="row"> 
      <div class="hidden-xs"> 
       <div class="col-md-6"><a href="https://a2ua.com/picture/picture-002.jpg" target="_blank" class="thumbnail"><img src="https://a2ua.com/picture/picture-002.jpg" class="img-responsive" alt="Image" alt="Image" style="max-width:100%;"></a></div> 
       <div class="col-md-6"><a href="https://a2ua.com/picture/picture-002.jpg" target="_blank" class="thumbnail"><img src="https://a2ua.com/picture/picture-002.jpg" class="img-responsive" alt="Image" style="max-width:100%;"></a> 
      </div> 

      <div class='visible-xs'> 
       <div class="col-xs-12"> 
        <a href="https://a2ua.com/picture/picture-002.jpg" target="_blank" class="thumbnail"><img src="https://a2ua.com/picture/picture-002.jpg" class="img-responsive" alt="Image" alt="Image" style="max-width:100%;"></a> 
       </div> 
      </div> 

     </div><!--.row--> 
    </div><!--.item--> 

</div><!--.carousel-inner-->