Question

我想让我的引导旋转木马滑块保持固定在顶部，所以当我向下滚动时，我希望下面的内容覆盖旋转木马滑块而不是旋转木马与其他内容一起向上移动。它是一个正常的Bootstrap Carousel滑块。

    <div class="carousel slide" data-ride="carousel" id="carousel-ex">
<ol class="carousel-indicators">
<li data-target="#carousel-ex" data-slide-to="0" class="active"></li>
<li data-target="#carousel-ex" data-slide-to="1"></li>
<li data-target="#carousel-ex" data-slide-to="2"></li>
</ol>

    <div class="carousel-inner">
    <div class="item active">
    <img src="pics/cheese_and_biscuits.jpg" alt="image">
    <div class="carousel-caption">
    <h2>Djathi Shajshet!</h2>
    <p>Djathi paragraf</p>
    </div>
    </div>

    <div class="item">
    <img src="pics/cheese.jpg" alt="image">
    <div class="carousel-caption">
    <h2>Djathi Shajshet!</h2>
    <p>Djathi paragraf</p>
    </div>
    </div>

    <div class="item">
    <img src="pics/cheeseboard.jpg" alt="image">
    <div class="carousel-caption">
    <h2>Djathi Shajshet!</h2>
    <p>Djathi paragraf</p>
    </div>
    </div>
    <a href="#carousel-ex" class="left carousel-control" data-slide="prev"> <span class="glyphicon glyphicon-chevron-left"></span> </a> <a href="#carousel-ex" class="right carousel-control" data-slide="next"> <span class="glyphicon glyphicon-chevron-right"></span> </a></div> </div>

CSS

.carousel {
  position: relative;
}
.carousel-inner {
  position: relative;
  overflow: hidden;
  width: 100%;
}
.carousel-inner > .item {
  display: none;
  position: relative;
  -webkit-transition: 0.6s ease-in-out left;
  -o-transition: 0.6s ease-in-out left;
  transition: 0.6s ease-in-out left;
}

Answer 1

尝试以下代码，希望它符合您的要求。

CSS代码

<style type="text/css">
    body { 
     min-height: 1500px;
    }

    .carousel{
      position: fixed;
    }

   #myContents { 
       position: relative; 
       padding: 550px; /* your carousel image size + 30px */ 
       z-index: -1;
   }
</style>

HTML CODE：

<div id="myCarousel" class="carousel slide" data-ride="carousel" data-interval="3000">
    ........
     <!-- put carousel remaining code here -->
    ........
</div> <!-- #myCarousel ends -->

<div id="myContents" class="row">
    ....
    <!-- put all remaining contents here -->
    ....
</div> <!-- #myContents ends -->

注意：如果您希望内容滚动轮播，请将 z-index为正。

Bootstrap轮播固定位置

1 个答案: