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%;
}
は申し訳ありませんが、これはあなたのコードに変更してください。私はまだページを下にスクロールできるようにしたいのですが、カルーセルが永久にビューポートに置かれるのではなく、ページの上部に貼り付けるだけです。 – Lee
@Leeすべてのプロパティがコンテナに割り当てられます。それはうまくいくはずです。 – frnt