Bootstrap Karussell mit weißem Hintergrund beim Übergang von einer Folie zum anderen

Question

Ich habe ein Problem mit meinem Bootstrap Karussell. Das Problem ist das Layout zwischen einer Folie und einer anderen, während der Transformation mit CSS. Für eine Sekunde und nur für einen kleinen Teil des Hintergrunds wird der ursprüngliche CSS-Stil sowohl auf den Text als auch auf den Hintergrund angewendet.

@import url('https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css'); 
 

 
/*carousel*/ 
 
.absolute { 
 
    margin-bottom: -46px; 
 
    text-align: center; 
 
    top: 250px; 
 
    position: relative; 
 
    z-index: 100; 
 
    color: white; 
 
    text-transform: uppercase; 
 
    font-size: 3em; 
 
} 
 
.index .item.active { 
 
    height: 450px; 
 
    background-image: url(images/first-back.jpg); 
 
    background-position: 0 5%; 
 
    background-repeat: no-repeat; 
 
    background-size: cover; 
 
    background-color: rgba(51, 51, 51, 0.34); 
 
    background-blend-mode: multiply; 
 
} 
 
.carousel-inner .item:nth-child(2) { 
 
    background: url(images/ac-bottom.jpg); 
 
    height: 450px; 
 
    background-size: cover; 
 
    background-repeat: no-repeat; 
 
    background-position: 0 52%; 
 
    background-color: rgba(51, 51, 51, 0.34); 
 
    background-blend-mode: multiply; 
 
} 
 
.carousel-inner .item:nth-child(3) { 
 
    background: url(images/grills-slider.jpg); 
 
    height: 450px; 
 
    background-size: cover; 
 
    background-repeat: no-repeat; 
 
    background-position: 0 52%; 
 
    background-color: rgba(51, 51, 51, 0.34); 
 
    background-blend-mode: multiply; 
 
} 
 
.carousel-inner .item:nth-child(4) { 
 
    background: url(images/store.jpg); 
 
    height: 450px; 
 
    background-size: cover; 
 
    background-repeat: no-repeat; 
 
    background-position: 0 52%; 
 
    background-color: rgba(51, 51, 51, 0.34); 
 
    background-blend-mode: multiply; 
 
} 
 
.index .item:nth-child(4) h1 { 
 
    text-decoration: underline; 
 
} 
 
.item.active h1 { 
 
    font-size: 2em; 
 
    color: white; 
 
    text-align: center; 
 
    position: relative; 
 
    top: 66%; 
 
    text-transform: uppercase; 
 
}

<div id="myCarousel" class="carousel slide" data-ride="carousel"> 
 
    <div class="carousel-inner" role="listbox"> 
 
    <div class="item active"> 
 
     <h1>Is relaxing</h1> 
 
    </div> 
 
    <div class="item"> 
 
     <h1>IS PEACE OF MIND</h1> 
 
    </div> 
 
    <div class="item"> 
 
     <h1>IS CONFIDENCE</h1> 
 
    </div> 
 
    <div class="item"> 
 
     <h1>STARTS HERE</h1> 
 
    </div> 
 
    </div> 
 
</div> 
 

 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script> 
 
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>

Wie Sie feststellen können, ich ein Hintergrundbild anstelle eines normalen Tag in den HTML-Code bin mit. Das Letzte, was ich bin mit einem h1 außerhalb des Karussells

<h1 class="absolute">COMFORT</h1> 

die fest bleiben, für Layout Zwecke.

Vielen Dank im Voraus

Answer 1

UPD. Vermeiden Sie die Verwendung der .active Klasse für die Dekoration. Diese Klasse bietet einen Übergang zwischen den Folien. Sie können sehen, wie .carousel-inner > .item.active und .carousel-inner > .active in der bootstrap.css definiert sind.

Bitte überprüfen Sie den neuen Code. Wollen Sie das erreichen?

@import url('https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css'); 
 

 
.carousel-inner { 
 
    margin-top: 2%; 
 
} 
 

 
.carousel-inner .item { 
 
    height: 450px; 
 
    background-image: url(//placehold.it/600x200/69c/def/?text=first); 
 
    background-size: cover; 
 
    background-repeat: no-repeat; 
 
    background-position: 0% 52%; 
 
    background-color: rgba(51, 51, 51, 0.34); 
 
    background-blend-mode: multiply; 
 
} 
 
.carousel-inner .item:nth-child(2) { 
 
    background-image: url(//placehold.it/600x200/9c6/efd/?text=second); 
 
} 
 
.carousel-inner .item:nth-child(3) { 
 
    background-image: url(//placehold.it/600x200/c69/fde/?text=third); 
 
} 
 
.carousel-inner .item:nth-child(4) { 
 
    background-image: url(//placehold.it/600x200/96c/edf/?text=fourth); 
 
} 
 

 
.carousel-inner .item h1 { 
 
    color: white; 
 
    font-size: 2em; 
 
    text-align: center; 
 
    text-transform: uppercase; 
 
    
 
    position: absolute; 
 
    top: 60%; 
 
    left: 0; 
 
    right: 0; 
 
} 
 
.carousel-inner .item:nth-child(4) h1 { 
 
    text-decoration: underline; 
 
}

<div id="myCarousel" class="carousel slide" data-ride="carousel"> 
 
    <div class="carousel-inner" role="listbox"> 
 
    <div class="item active"> 
 
     <h1>Is relaxing</h1> 
 
    </div> 
 
    <div class="item"> 
 
     <h1>Is peace of mind</h1> 
 
    </div> 
 
    <div class="item"> 
 
     <h1>Is confidence</h1> 
 
    </div> 
 
    <div class="item"> 
 
     <h1>Starts here</h1> 
 
    </div> 
 
    </div> 
 
</div> 
 

 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script> 
 
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>

Answer 2

der Tat war es, weil ich einige andere Zeilen Code (CSS-Stil) hinzugefügt, ein Modul in meinem Code, um Stil (ein JavaScript-Modul). Genau dieser Stil enthält zwei Klassen (rechts und links) .right und .left, die in meinen Stil eingreifen (das Bootstrap-Karussell fügt jeder Folie des Karussells die Klasse rechts und links hinzu). Problem gelöst!

Answer 3

Wenn während des Übergangs Leerraum zwischen den Folien angezeigt wird, sollten Sie versuchen, den Twitter-Bootstrap-Code zu ändern .carousel-inner {overflow: hidden; } to .carousel-inner {Überlauf: sichtbar; }.

Answer 4

ändern müssen von versteckt zu sichtbar

.carousel-inner { 
    overflow: visible; 
} 

Dann

nicht,

overflow-x: hidden;