Vuoi il carosello Bootstrap 3 per mostrare parte delle immagini precedenti e successive per riempire la larghezza 100%

Question

Cercando di trovare un modo per avere un carosello Bootstrap 3 limitare l'immagine principale che sta visualizzando la larghezza naturale delle immagini e mostrare le parti della precedente e successiva immagini per riempire il resto dello schermo al 100% della larghezza sotto le frecce successiva/precedente. Non sei sicuro di come rivelare le anteprime delle immagini successive e precedenti.

Utilizzando il codice carosello standard di Bootstrap:

<ol class="carousel-indicators"> 
     <li data-target="#myCarousel" data-slide-to="0" class="active"></li> 
     <li data-target="#myCarousel" data-slide-to="1"></li> 
     <li data-target="#myCarousel" data-slide-to="2"></li> 
    </ol> 
    <div class="carousel-inner center-block" style="width:80%;max-width:960px;" > 
     <div class="item active"> <img src="/images/slide-fpo.png" style="width:100%" alt="First slide"> 
     <div class="container"> 
      <div class="carousel-caption"> 
      <h1>Slide 1</h1> 
      <!-- <p>Aenean a rutrum nulla. Vestibulum a arcu at nisi tristique pretium.</p> 
      <p><a class="btn btn-lg btn-primary" href="#" role="button">Sign up today</a></p> --> 
      </div> 
     </div> 
     </div> 
     <div class="item"> <img src="/images/slide-fpo.png" style="width:100%" data-src="" alt="Second slide"> 
     <div class="container"> 
      <div class="carousel-caption"> 
      <h1>Slide 2</h1> 
      <!-- <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed vitae egestas purus. </p> 
      <p><a class="btn btn-lg btn-primary" href="#" role="button">Learn more</a></p> --> 
      </div> 
     </div> 
     </div> 
     <div class="item"> <img src="/images/slide-fpo.png" style="width:100%" data-src="" alt="Third slide"> 
     <div class="container"> 
      <div class="carousel-caption"> 
      <h1>Slide 3</h1> 
      <!-- <p>Donec sit amet mi imperdiet mauris viverra accumsan ut at libero.</p> 
      <p><a class="btn btn-lg btn-primary" href="#" role="button">Browse gallery</a></p> --> 
      </div> 
     </div> 
     </div> 
    </div> 
    <a class="left carousel-control" href="#myCarousel" data-slide="prev"><span class="glyphicon glyphicon-chevron-left"></span></a> <a class="right carousel-control" href="#myCarousel" data-slide="next"><span class="glyphicon glyphicon-chevron-right"></span></a> </div> 

Answer 1

Il codice sotto funziona quando tutte le immagini hanno ottenuto la stessa larghezza, altrimenti si può fare lo stesso, ma allora avete bisogno di calcolo più complessi per diapositiva.

Prima dare ad ogni immagine div.item tre (precedente, corrente, successivo):

<div class="item active"> 
     <img src="http://dummyimage.com/600x400/000/fff" alt="" /> 
     <img src="http://dummyimage.com/600x400/ff0/fff" alt="" /> 
     <img src="http://dummyimage.com/600x400/00ff00/fff" alt="" /> 
    </div> 

quindi utilizzare il seguente codice Meno:

@import "bootstrap-3.3.2/less/variables"; 

@image-width: 600px; 
.item img { 
max-width:100%; 
&:first-child,&:last-child { 
display: none; 
} 
} 

/* Small devices (tablets, 768px and up) */ 
@media (min-width: @screen-sm-min) { 
@rest: ((@screen-sm - (2 * @grid-gutter-width)) - @image-width); 
.item img { 
float:left; 

&:first-child,&:last-child { 
display: block; 
} 
width: @image-width; 
} 
.item.active { 
overflow:hidden; 
margin: 0 ((@image-width - (@rest/2)) * -1); 
} 
} 

/* Medium devices (desktops, 992px and up) */ 
@media (min-width: @screen-md-min) { 
@rest: ((@screen-md - (2 * @grid-gutter-width)) - @image-width); 
.item img { 
width: @image-width; 
} 
.item.active { 
margin: 0 ((@image-width - (@rest/2)) * -1); 
} 
} 

/* Large devices (large desktops, 1200px and up) */ 
@media (min-width: @screen-lg-min) { 
@rest: ((@screen-lg - (2 * @grid-gutter-width)) - @image-width); 
.item img { 
width: @image-width; 
} 
.item.active { 
margin: 0 ((@image-width - (@rest/2)) * -1); 
} 

} 

In precedenza impostata @image-width alla larghezza del dispositivo di scorrimento immagini. Il codice Meno precedente compila nel seguente codice CSS:

.item img { 
    max-width: 100%; 
} 
.item img:first-child, 
.item img:last-child { 
    display: none; 
} 
/* Small devices (tablets, 768px and up) */ 
@media (min-width: 768px) { 
    .item img { 
    float: left; 
    width: 600px; 
    } 
    .item img:first-child, 
    .item img:last-child { 
    display: block; 
    } 
    .item.active { 
    overflow: hidden; 
    margin: 0 -546px; 
    } 
} 
/* Medium devices (desktops, 992px and up) */ 
@media (min-width: 992px) { 
    .item img { 
    width: 600px; 
    } 
    .item.active { 
    margin: 0 -434px; 
    } 
} 
/* Large devices (large desktops, 1200px and up) */ 
@media (min-width: 1200px) { 
    .item img { 
    width: 600px; 
    } 
    .item.active { 
    margin: 0 -330px; 
    } 
} 

Demo:

<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap.min.css" rel="stylesheet"/> 
 

 
<style> 
 
    .item img { 
 
    max-width: 100%; 
 
} 
 
.item img:first-child, 
 
.item img:last-child { 
 
    display: none; 
 
} 
 
/* Small devices (tablets, 768px and up) */ 
 
@media (min-width: 768px) { 
 
    .item img { 
 
    float: left; 
 
    width: 600px; 
 
    } 
 
    .item img:first-child, 
 
    .item img:last-child { 
 
    display: block; 
 
    } 
 
    .item.active { 
 
    overflow: hidden; 
 
    margin: 0 -546px; 
 
    } 
 
} 
 
/* Medium devices (desktops, 992px and up) */ 
 
@media (min-width: 992px) { 
 
    .item img { 
 
    width: 600px; 
 
    } 
 
    .item.active { 
 
    margin: 0 -434px; 
 
    } 
 
} 
 
/* Large devices (large desktops, 1200px and up) */ 
 
@media (min-width: 1200px) { 
 
    .item img { 
 
    width: 600px; 
 
    } 
 
    .item.active { 
 
    margin: 0 -330px; 
 
    } 
 
</style> 
 
<div class="container"> \t 
 

 
    <div id="carousel-example-generic" class="carousel slide" data-ride="carousel"> 
 
     <ol class="carousel-indicators"> 
 
     <li data-target="#carousel-example-generic" data-slide-to="0" class="active"></li> 
 
     <li class="" data-target="#carousel-example-generic" data-slide-to="1"></li> 
 
     <li class="" data-target="#carousel-example-generic" data-slide-to="2"></li> 
 
     </ol> 
 
     <div class="carousel-inner" role="listbox"> 
 
     <div class="item active"> 
 
\t \t \t <img src="http://dummyimage.com/600x400/000/fff" alt="" /> 
 
\t \t \t <img src="http://dummyimage.com/600x400/ff0/fff" alt="" /> 
 
\t \t \t <img src="http://dummyimage.com/600x400/00ff00/fff" alt="" /> 
 
     </div> 
 
     <div class="item"> \t \t 
 
\t \t \t <img src="http://dummyimage.com/600x400/ff0/fff" alt="" /> 
 
\t \t \t <img src="http://dummyimage.com/600x400/00ff00/fff" alt="" /> 
 
\t \t \t <img src="http://dummyimage.com/600x400/0000ff/fff" alt="" /> 
 
     </div> 
 
     <div class="item"> 
 
\t \t \t <img src="http://dummyimage.com/600x400/00ff00/fff" alt="" /> 
 
\t \t \t <img src="http://dummyimage.com/600x400/0000ff/fff" alt="" /> 
 
\t \t \t <img src="http://dummyimage.com/600x400/000/fff" alt="" /> 
 
\t \t \t </div> 
 
     <div class="item"> 
 
\t \t \t <img src="http://dummyimage.com/600x400/0000ff/fff" alt="" /> 
 
\t \t \t <img src="http://dummyimage.com/600x400/000/fff" alt="" /> 
 
\t \t \t <img src="http://dummyimage.com/600x400/ff0/fff" alt="" /> 
 
     </div> 
 
     </div> 
 
     <a class="left carousel-control" href="#carousel-example-generic" role="button" data-slide="prev"> 
 
     <span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span> 
 
     <span class="sr-only">Previous</span> 
 
     </a> 
 
     <a class="right carousel-control" href="#carousel-example-generic" role="button" data-slide="next"> 
 
     <span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span> 
 
     <span class="sr-only">Next</span> 
 
     </a> 
 
    </div> 
 
    
 
</div> 
 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.2/js/bootstrap.min.js"></script>

Answer 2

Per fare questo con bootstrap, .carousel-inner dovrebbe essere più grande di .carousel, Inoltre dovrebbe essere centrato. È possibile utilizzare seguente codice CSS per implementare questa modifica:

Se il bootstrap è 3.3.0 e al di sopra poi

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

Per bootstrap seguito 3.3.0

.carousel-inner .active.left { left: -33%; } 
.carousel-inner .next  { left: 33%; } 
.carousel-inner .prev  { left: -33%; }