Erzwingen Bootstrap Karussell vertikal auf Handy

Question

Mit dem Bootstrap-Karussell, muss ich das Layout zentriert und vertikal auf mobilen scrollen. Nicht sicher, wie die Spalten so ausgerichtet werden, dass sie vertikal gestapelt werden, wobei die Karussellsteuerelemente (Pfeile) oben und unten zentriert sind. Jeder Satz von 4 Dias sollte auf einmal erscheinen, und beim Klicken auf die Auf- oder Abwärtspfeile sollten alle 4 aus dem Blickfeld gleiten, wodurch die vorherigen oder folgenden 4 angezeigt werden können.

Dies ist, wie es auf Handy aussehen muss:

Die aktuelle Implementierung Setup ist wie folgt:

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; 
    } 

Aktuelle Geige: https://jsfiddle.net/snytpsyr/1/

Answer 1

Dies ist das Karussell auf Landschaft zu scrollen horizontal ermöglicht und vertikal auf Handy, wie hier zu sehen: 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%; } 
}