Question

我是网络前端设计的初学者，使用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。

我尝试使用像设置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文件。

Bootstrap 3 Carousel全屏闪烁

1 个答案: