Bootstrap 3轮播全屏闪烁

Question

我是 web 前端设计的初学者，使用 bootstrap 制作项目原型。 我想做一个像this website这样的产品

我想要的功能是 * 访问网站时将轮播扩展到全屏，然后可以向下滚动到另一个 div 元素。

我找到了这个类似的解决方案，但不幸的是它使用 Carousel 作为整个背景。

为了得到我想要的效果，我检查了javascript src代码并编辑它。

修改这一行（显示在 JSFIDDLE 第 13 行）

$('.carousel .item').css({'position': 'fixed', 'width': '100%', 'height': '100%'});

进入这一行（显示在 JSFIDDLE 第 13 行）

$('.carousel .item').css({'position': 'relative', 'width': $(window).outerWidth(), 'height': $(window).outerHeight()});

是的，终于得到我想要的效果了！！但是，当照片过渡时，出现了意想不到的闪烁，起初似乎照片不在正确的位置，然后立即转到正确的位置。 当我看到下面的 div 里面的内容时，就像 1info 或 2info 一样，这很烦人。 这是该问题的jsfiddle demo example。

我尝试使用 set z-index 之类的解决方案，但失败了... 有人可以帮我解决这个烦人的问题吗？非常感谢！！

Answer 1

这是一个没有任何插件的无闪烁版本： HTML：

<div id="myCarousel" class="carousel slide" data-ride="carousel">
    <div class="carousel-inner">

        <div class="item active">
            <div id="slide1" class="fill">
                <div class=" carousel-caption">
                  <h1>1</h1>
                </div>
            </div>
        </div>


        <div class="item">
            <div id="slide2" class="fill">
                <div class=" carousel-caption" >
                     <h1>2</h1>
                </div>
            </div>
        </div>

        <div class="item">
            <div id="slide3" class="fill">
                <div class=" carousel-caption" >
                     <h1>3</h1>
                </div>
            </div>
        </div>

    </div>
</div>

CSS：

html, body {
   height: 100%;
}

.carousel, .item, .active {
    height: 100%;
}

.carousel-inner {
    height: 100%;
}

.fill {
    width: 100%;
    height: 100%;
    background-position: center;
    background-size: cover;
}

#slide1 {
    background-image: url('http://stylonica.com/wp-content/uploads/2014/03/Cute-Dog-Wallpaper.jpg');  
}
#slide2 {
    background-image: url('http://hdwallimg.com/wp-content/uploads/2014/02/White-Dog-Running-Wallpaper-HD.jpg');  
}
#slide3 {
    background-image: url('http://www.petfinder.com/wp-content/uploads/2012/11/122163343-conditioning-dog-loud-noises-632x475.jpg');  
}

不需要额外的 javascript，只需确保 jquery 和 bootstrap.js 文件在您的页面中链接。