Vollansichtsfenster Karussell - Position Ausgabe

Question

ich den Vollbild-Karussell-Code von hier gepackt habe: https://codepen.io/crashy/pen/JoKMgG

Was ich möchte, ist zu tun hat es das gesamte Ansichtsfenster beim Laden der Seite nehmen, aber dann der Benutzer in der Lage sein, die Seite nach unten zu scrollen.

Im CSS kann ich sehen, es festgelegt ist:

.carousel .item { 
    position: fixed; 
    width: 100%; 
    height: 100%; 
} 

Allerdings, wenn ich das absolute ändern, werden die Bilder nicht mehr geladen. Was muss ich ändern?

Hier ist die vollständige CSS:

html { 
    position: relative; 
    min-height: 100%; 
} 

body { 
    background-color: #000; 
    background-image: url("../img/general/bg.jpg"); 
    background-repeat: repeat; 
} 

.carousel-fade .carousel-inner .item { 
    opacity: 0; 
    transition-property: opacity; 
} 
.carousel-fade .carousel-inner .active { 
    opacity: 1; 
} 
.carousel-fade .carousel-inner .active.left, 
.carousel-fade .carousel-inner .active.right { 
    left: 0; 
    opacity: 0; 
    z-index: 1; 
} 
.carousel-fade .carousel-inner .next.left, 
.carousel-fade .carousel-inner .prev.right { 
    opacity: 1; 
} 
.carousel-fade .carousel-control { 
    z-index: 2; 
} 
@media all and (transform-3d), 
(-webkit-transform-3d) { 
    .carousel-fade .carousel-inner > .item.next, 
    .carousel-fade .carousel-inner > .item.active.right { 
     opacity: 0; 
     -webkit-transform: translate3d(0, 0, 0); 
     transform: translate3d(0, 0, 0); 
    } 
    .carousel-fade .carousel-inner > .item.prev, 
    .carousel-fade .carousel-inner > .item.active.left { 
     opacity: 0; 
     -webkit-transform: translate3d(0, 0, 0); 
     transform: translate3d(0, 0, 0); 
    } 
    .carousel-fade .carousel-inner > .item.next.left, 
    .carousel-fade .carousel-inner > .item.prev.right, 
    .carousel-fade .carousel-inner > .item.active { 
     opacity: 1; 
     -webkit-transform: translate3d(0, 0, 0); 
     transform: translate3d(0, 0, 0); 
    } 
} 
.item:nth-child(1) { 
    background: url("../img/banner/banner1.jpg") no-repeat center center fixed; 
    -webkit-background-size: cover; 
    -moz-background-size: cover; 
    -o-background-size: cover; 
    background-size: cover; 
} 
.item:nth-child(2) { 
    background: url("../img/banner/banner2.jpg") no-repeat center center fixed; 
    -webkit-background-size: cover; 
    -moz-background-size: cover; 
    -o-background-size: cover; 
    background-size: cover; 
} 
.item:nth-child(3) { 
    background: url("../img/banner/banner3.jpg") no-repeat center center fixed; 
    -webkit-background-size: cover; 
    -moz-background-size: cover; 
    -o-background-size: cover; 
    background-size: cover; 
} 
.carousel { 
    z-index: -99; 
} 
.carousel .item { 
    position: fixed; 
    width: 100%; 
    height: 100%; 
} 

Answer 1

Machen Sie diese in Ihre Codes ändert,

body{ 
overflow:hidden; 
} 

.carousel .item { 
    position: fixed; 
    width: 100vw; 
    height: 100vh; 
}