Wollen Bootstrap 3 Karussell zeigen Teil der vorherigen und nächsten Bilder zu füllen Breite 100%

Question

Versuchen, einen Weg zu finden, ein Bootstrap 3 Karussell begrenzen das Hauptbild zeigt es auf die natürliche Breite der Bilder und zeigen Teile der vorherigen und nächsten Bilder, um den Rest des Bildschirms auf 100% Breite unter den nächsten/vorherigen Pfeilen zu füllen. Nicht ganz sicher, wie Vorschaubilder der nächsten und vorherigen Bilder angezeigt werden.

Verwendung von Standard-Bootstrap Karussell Code:

<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

Der folgende Code funktioniert, wenn alle Bilder die gleiche Breite bekam, sonst können Sie das gleiche tun, aber dann müssen Sie komplexere Berechnung pro Folie.

Zuerst gibt jede div.item drei Bilder (vorherige, aktuelle, nächsten):

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

dann den folgenden Weniger Code verwenden:

@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 der oben genannten @image-width auf die Breite des Schiebers Bilder. Der vorhergehende Weniger Code kompiliert in den folgenden CSS-Code:

.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

Um dies zu tun mit Bootstrap sollte .carousel-inner größer sein als .carousel, auch sollte es sein zentriert. Sie können folgende CSS-Codes verwenden, um diese Änderung zu implementieren:

Wenn Ihr Bootstrap 3.3.0 und höher dann

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

Für Bootstrap ist unter 3.3.0

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