je poste rarement de billets sur CSS / JQuery / Bootstrap …

Je cherchais à faire un slider bootstrap qui soit à la fois « full page » (en « cover ») ET qui slide verticalement.

Voici donc la manipulation :

Ajouter « vertical » dans la div « carroussel-inner » et utiliser un css inline pour l’image (fill)

<!-- Vertical Full Page Image Background Carousel Header -->

 <header id="Concours" class="carousel slide">
 <!-- Wrapper for Slides -->
 <div class="carousel-inner vertical">
 
 
 <div class="item active">
 <div class="fill" style="background-image:url('/img/concours/AA.jpg');"></div>
 <div class="carousel-caption">
 <h2><span>Batiment</span></h2>
 </div>
 </div>
 

 <div class="item">
 <div class="fill" style="background-image:url('/img/concours/Archi.jpg');"></div>
 <div class="carousel-caption">
 <h2>Archi</h2>
 </div>
 </div>
 
  
 
 
 </div>
 <!-- Controls -->
 <a class="left carousel-control" href="#Concours" data-slide="prev">
 <span class="icon-prev"></span>
 </a>
 <a class="right carousel-control" href="#Concours" data-slide="next">
 <span class="icon-next"></span>
 </a>
 </header>

Et la feuille de style qui va avec :

.carousel,
.item,
.active {
 height: 100%;
 
}

.carousel-inner {
 height: 100%;
}

/* Background images are set within the HTML using inline CSS, not here */
.fill {
 width: 100%;
 height: 100%;
 background-position: center;
 -webkit-background-size: cover;
 -moz-background-size: cover;
 background-size: cover;
 -o-background-size: cover;
 margin-bottom: 50px;
}

.carousel-inner.vertical {
 height: 100%;
}
.carousel-inner.vertical > .item {
 -webkit-transition: .6s ease-in-out top;
 -o-transition: .6s ease-in-out top;
 transition: .6s ease-in-out top;
}
@media all and (transform-3d),
(-webkit-transform-3d) {
 .carousel-inner.vertical > .item {
 -webkit-transition: -webkit-transform .6s ease-in-out;
 -o-transition: -o-transform .6s ease-in-out;
 transition: transform .6s ease-in-out;
 -webkit-backface-visibility: hidden;
 backface-visibility: hidden;
 -webkit-perspective: 1000;
 perspective: 1000;
 }
 .carousel-inner.vertical > .item.next,
 .carousel-inner.vertical > .item.active.right {
 top: 0;
 -webkit-transform: translate3d(0, 100%, 0);
 transform: translate3d(0, 100%, 0);
 }
 .carousel-inner.vertical > .item.prev,
 .carousel-inner.vertical > .item.active.left {
 top: 0;
 -webkit-transform: translate3d(0, -100%, 0);
 transform: translate3d(0, -100%, 0);
 }
 .carousel-inner.vertical > .item.next.left,
 .carousel-inner.vertical > .item.prev.right,
 .carousel-inner.vertical > .item.active {
 top: 0;
 -webkit-transform: translate3d(0, 0, 0);
 transform: translate3d(0, 0, 0);
 }
}
.carousel-inner.vertical > .active {
 top: 0;
}
.carousel-inner.vertical > .next,
.carousel-inner.vertical > .prev {
 top: 0;
 height: 100%;
 width: 100%;
}
.carousel-inner.vertical > .next {
 left: 0;
 top: 100%;
}
.carousel-inner.vertical > .prev {
 left: 0;
 top: -100%
}
.carousel-inner.vertical > .next.left,
.carousel-inner.vertical > .prev.right {
 top: 0;
}
.carousel-inner.vertical > .active.left {
 left: 0;
 top: -100%;
}
.carousel-inner.vertical > .active.right {
 left: 0;
 top: 100%;
}

Le résultat est visible sur www.ericpoivey.com