モバイルでブートストラップカルーセルを強制的に起動する

Question

ブートストラップカルーセルを使用して、レイアウトを強制的に中央に配置し、モバイルで垂直方向にスクロールする必要があります。カルーセルコントロール（矢印）が中央の上下に設定された状態で縦に積み重ねるように列を揃える方法が不明です。一度に4つのスライドの各セットが表示され、上矢印または下矢印をクリックすると、4つすべてが見えなくなり、前または後の4が表示されます。

HTML：：

<div class="col-md-12"> 
    <div class="contain"> 
    <div id="Carousel" class="carousel slide"> 

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

    <div class="item active"> 
    <div class="row"> 
     <div class="col-md-3"><a href="#"><img src="http://placehold.it/250x250" alt="Image" style="max-width:100%;"></a><p>Title text</p></div> 
     <div class="col-md-3"><a href="#"><img src="http://placehold.it/250x250" alt="Image" style="max-width:100%;"></a><p>Title text</p></div> 
     <div class="col-md-3"><a href="#"><img src="http://placehold.it/250x250" alt="Image" style="max-width:100%;"></a><p>Title text</p></div> 
     <div class="col-md-3"><a href="#"><img src="http://placehold.it/250x250" alt="Image" style="max-width:100%;"></a><p>Title text</p></div> 
    </div><!--.row--> 
    </div><!--.item--> 

    <div class="item"> 
    <div class="row"> 
     <div class="col-md-3"><a href="#"><img src="http://placehold.it/250x250" alt="Image" style="max-width:100%;"></a><p>Title text</p></div> 
     <div class="col-md-3"><a href="#"><img src="http://placehold.it/250x250" alt="Image" style="max-width:100%;"></a><p>Title text</p></div> 
     <div class="col-md-3"><a href="#"><img src="http://placehold.it/250x250" alt="Image" style="max-width:100%;"></a><p>Title text</p></div> 
     <div class="col-md-3"><a href="#"><img src="http://placehold.it/250x250" alt="Image" style="max-width:100%;"></a><p>Title text</p></div> 
    </div><!--.row--> 
    </div><!--.item--> 

    <div class="item"> 
    <div class="row"> 
     <div class="col-md-3"><a href="#"><img src="http://placehold.it/250x250" alt="Image" style="max-width:100%;"></a><p>Title text</p></div> 
     <div class="col-md-3"><a href="#"><img src="http://placehold.it/250x250" alt="Image" style="max-width:100%;"></a><p>Title text</p></div> 
     <div class="col-md-3"><a href="#"><img src="http://placehold.it/250x250" alt="Image" style="max-width:100%;"></a><p>Title text</p></div> 
     <div class="col-md-3"><a href="#"><img src="http://placehold.it/250x250" alt="Image" style="max-width:100%;"></a><p>Title text</p></div> 
    </div><!--.row--> 
    </div><!--.item--> 

    </div><!--.carousel-inner--> 
    <a data-slide="prev" href="#Carousel" class="left carousel-control">‹</a> 
    <a data-slide="next" href="#Carousel" class="right carousel-control">›</a> 
    </div><!--.Carousel--> 
</div> 
</div> 
</div><!--.container--> 

CSS：

現在の実装では、このような設定である：

は、これは、携帯電話で見てする必要がありますどのように

.carousel-control { left: 11%; height: 40px; width: 40px; background: none repeat scroll 0 0 #222222; border: 4px solid #FFFFFF; border-radius: 23px 23px 23px 23px; margin-top: 90px; } .carousel-control.right{ left: 90%!important; } .carousel-inner{ width: 70%; margin: 0 auto; } .carousel-control.right { left: 86%!important; } /* The indicators */ .carousel-indicators { display: none; } 

現在のフィドル：https://jsfiddle.net/snytpsyr/1/

Answer 1

ここに見られるようにこれは、カルーセルは、景観上、上下に可動に水平方向にスクロールすることができます：あなたの行クラスでhttps://jsfiddle.net/joav6tee/1/

.carousel-control { 
    left: 11%; 
     height: 40px; 
    width: 40px; 
     background: none repeat scroll 0 0 #222222; 
     border: 4px solid #FFFFFF; 
     border-radius: 23px 23px 23px 23px; 
     margin-top: 90px; 
    } 
    .carousel-control.right{ 
    left: 90%!important; 
    } 
    .carousel-inner{ 
    width: 70%; 
    margin: 0 auto; 
    } 
    .carousel-control.right { 
    left: 86%!important; 
    } 
    /* The indicators */ 
    .carousel-indicators { 
    display: none; 
    } 
    .carousel.vertical .carousel-inner { 
    height: 100%; 
} 
.carousel.vertical .item { 
    -webkit-transition: 0.6s ease-in-out top; 
    -moz-transition: 0.6s ease-in-out top; 
    -ms-transition:  0.6s ease-in-out top; 
    -o-transition:  0.6s ease-in-out top; 
    left:    0; 
} 
.carousel.vertical .active, 
.carousel.vertical .next.left, 
.carousel.vertical .prev.right { top:  0; } 
.carousel.vertical .next, 
.carousel.vertical .active.right { top: 100%; } 
.carousel.vertical .prev, 
.carousel.vertical .active.left { top: -100%; } 

@media screen and (min-width:993px) { 

.carousel.vertical .item { 
    -webkit-transition: 0.6s ease-in-out all; 
    -moz-transition: 0.6s ease-in-out all; 
    -ms-transition:  0.6s ease-in-out all; 
    -o-transition:  0.6s ease-in-out all; 
    right:    0; 
} 

    .carousel.vertical .active, 
.carousel.vertical .next.left, 
.carousel.vertical .prev.right { top:  0; right:0;} 
.carousel.vertical .next, 
.carousel.vertical .active.right { top:0;right: -100%; } 
.carousel.vertical .prev, 
.carousel.vertical .active.left { top:0;right: 100%; } 
}