Comment afficher précédent et suivant des images avec un Bootstrap carrousel

L'effet, je suis à la recherche de peut être vu dans l'image suivante, c'est un carrousel avec 3 images.

Comment puis-je faire le bootstrap carrousel à montrer les images gauche et droite avec une opacité de 0,7?

Comment afficher précédent et suivant des images avec un Bootstrap carrousel

Ce qui suit est mon carrousel modèle.

<div class="col-md-10 center-block">
<img id="logo" src="./img/yoox_group.png" alt="yoog group" />
<div id="carousel-example-generic" class="carousel slide" data-ride="carousel">
<!-- Indicators -->
<ol class="carousel-indicators">
<li data-target="#carousel-example-generic" data-slide-to="0" class="active"></li>
<li data-target="#carousel-example-generic" data-slide-to="1"></li>
<li data-target="#carousel-example-generic" data-slide-to="2"></li>
</ol>
<!-- Wrapper for slides -->
<div class="carousel-inner" role="listbox">
<div class="item active">
<img src="./img/carousel/carousel-001.jpg" alt="..." />
<div class="carousel-caption">
</div>
</div>
<div class="item">
<img src="./img/carousel/carousel-002.jpg" alt="..." />
<div class="carousel-caption">
</div>
</div>
<div class="item">
<img src="./img/carousel/carousel-003.jpg" alt="..." />
<div class="carousel-caption">
</div>
</div>
</div>
<!-- Controls -->
<a class="left carousel-control" href="#carousel-example-generic" role="button" data-slide="prev">
<img id="arrowleft" src="./img/arrow_left.png" />
<span class="sr-only">Previous</span>
</a>
<a class="right carousel-control" href="#carousel-example-generic" role="button" data-slide="next">
<img id="arrowright" src="./img/arrow_right.png" />
<span class="sr-only">Next</span>
</a>
</div>
</div>
#arrowleft {
background-color: #FFF;
padding: 10px 8px;
position: absolute;
margin-left: -95px;
top: 45%;
z-index: 5;
display: inline-block;
}
#arrowright {
background-color: #FFF;
padding: 10px 8px;
position: absolute;
margin-left: 67px;
top: 45%;
z-index: 5;
display: inline-block;
}

OriginalL'auteur xRobot | 2015-07-22

  1. 10

    Expansion sur cette réponse à une autre question, si vous ajoutez le code css suivant dans votre code, il fournira à l'effet que vous recherchez.

    Nous avons essentiellement à développer .carousel-inner être plus grande que .carousel, le centre et masquer le dépassement de .carousel.

    Pour obtenir l'opacité effet, nous augmentons la taille de la précédente et de la suivante flèche conteneurs, puis définissez un blanc translucide arrière-plan.

    Bootstrap >= 3.3.0

    Dans le Bootstrap, version 3.3.0 il y avait un changement dans le CSS qui a invalidé la méthode précédente. C'est donc la méthode actuelle.

    (Démo)

    .carousel {
overflow: hidden;
}
.carousel-inner {
width: 150%;
left: -25%;
}
.carousel-inner > .item.next, 
.carousel-inner > .item.active.right {
-webkit-transform: translate3d(33%, 0, 0);
transform: translate3d(33%, 0, 0);
}
.carousel-inner > .item.prev, 
.carousel-inner > .item.active.left {
-webkit-transform: translate3d(-33%, 0, 0);
transform: translate3d(-33%, 0, 0);
}
.carousel-control.left, 
.carousel-control.right {
background: rgba(255, 255, 255, 0.3);
width: 25%;
}

    Bootstrap < 3.3.0

    (Démo) 

    .carousel {
overflow: hidden;
}
.carousel-inner {
width: 150%;
left: -25%;
}
.carousel-inner .active.left {
left: -33%;
}
.carousel-inner .next {
left: 33%;
}
.carousel-inner .prev {
left: -33%;
}
.carousel-control.left, .carousel-control.right {
background: rgba(255, 255, 255, 0.3);
width: 25%;
}
    cool merci :))
    Désolé, j'ai juste essayé sur firefox et ça ne fonctionne pas 🙁
    Je suis occupé à travailler, je vais prendre un meilleur regard sur elle quand je reçois quelques temps plus tard.
    Sont les Démos de travail? Ils sont de chargement foreeeever.
    vieille réponse, permettra de vérifier et de mettre à jour ce soir

    OriginalL'auteur Tiny Giant