带有猫头鹰轮播的整页背景幻灯片(宽度和高度)

我正在尝试完成这样的事情，但使用猫头鹰旋转木马。

.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>

南海

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%的高度，但这肯定不是明智的做法。

你不希望整个页面滑动，你希望背景滑动。您想为轮播设置一个部分或div，并将其 z 索引为 -10 或 z 索引您的主要内容为 10 并在第一个分区中创建轮播。你不希望你的导航滑开！

此外，通过选择大图像，您可以将其设置为 width：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>

相关内容

最新更新

热门标签：