文章/答案/技术大牛

发布

社区首页 >问答首页 >整页背景幻灯片(宽度和高度)与猫头鹰旋转木马？

问整页背景幻灯片(宽度和高度)与猫头鹰旋转木马？
EN

Stack Overflow用户

提问于 2016-01-20 13:49:43

回答 1查看 1.9K关注 0票数 1

我试图做一些像这样，但使用猫头鹰旋转木马。

<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;
    }
}

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

这根本不管用，我只是在页面的顶部得到了一条薄薄的条条。我可以让幻灯片<div的每个元素都达到100%的高度，但这肯定不是明智的做法。

jquery

html

css

owl-carousel

回答 1

Stack Overflow用户

回答已采纳

发布于 2016-01-20 14:07:26

你不想整页幻灯片，你想要背景幻灯片。您希望为旋转木马设置一个区段或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>

票数 2

页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持

原文链接：

https://stackoverflow.com/questions/34901864

复制

相似问题

问整页背景幻灯片(宽度和高度)与猫头鹰旋转木马？
EN

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问整页背景幻灯片(宽度和高度)与猫头鹰旋转木马？EN

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问整页背景幻灯片(宽度和高度)与猫头鹰旋转木马？
EN