2016-07-02 5 views
1

位置の問題は: https://codepen.io/crashy/pen/JoKMgG完全なビューポートカルーセル - 私はここからフルスクリーンカルーセルコードをつかんできた

私は何をしたいことは、ユーザーは、ページのロードのビューポート全体を取る必要がありますが、ページを下にスクロールできます。 CSSで

私はそれが固定されて見ることができます:

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

私は絶対、画像、もはや負荷に変更があれば。私は何を変更する必要がありますか?ここで

はフル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%; 
} 

答えて

1

多分私は十分に自分自身を説明していない

body{ 
overflow:hidden; 
} 

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

は申し訳ありませんが、これはあなたのコードに変更してください。私はまだページを下にスクロールできるようにしたいのですが、カルーセルが永久にビューポートに置かれるのではなく、ページの上部に貼り付けるだけです。 – Lee

+0

@Leeすべてのプロパティがコンテナに割り当てられます。それはうまくいくはずです。 – frnt

関連する問題