Question

我正在尝试使用猫头鹰旋转木马来完成like this。

HTML

<body>
    <div class="home-slider">
        <div class="slide-0">
            Slider 0
        </div><!-- .slide-0 -->
        <div class="slide-1">
            Slider 1
        </div><!-- .slide-1 -->
        <div class="slide-2">
            Slider 2
        </div><!-- .slide-2 -->
    </div><!-- .home-slider -->
</body>

SCSS

html, body {
    height: 100%;
}

.home-slider {
    .slide-0 {
        background: url('../img/Man-1920x1000.jpg') no-repeat 0px 0px transparent;
    }
}

JS

$(document).ready(function() {
  $('.home-slider').owlCarousel({
    items: 1,
    autoHeight: true
  });
});

这根本不起作用，我只是在页面顶部画了一条细条。我可以将每个元素导向幻灯片<div高度为100%，但这肯定不是明智之举。

Answer 1

您不希望整个页面滑动，您希望背景滑动。你想为carousel和z-index设置一个section或div来-10或z将你的主要内容索引为10并在第一个div中创建轮播。就像只有背景幻灯片而不是整个页面。你不希望你的导航滑落！

此外，通过选择大图像，您可以将其设置为宽度：100％，以便根据窗口大小调整大小。将高度定义为100％以及宽度会使图像变形。

并在页面的正底部将旋转木马按钮z指数设为100。

<body>

<div style="z-index:10">
    //your page content goes here including Nav
</div>
<div style="z-index:0 margin-top:0; TOP:0; POSITION:FIXED">
   //carousel code
</div>
//put button here OR
<div style="z-index:100" >
   // buttons
</div>

</body>

整页背景幻灯片（宽度和高度）与猫头鹰旋转木马？

1 个答案: