CODEWITHSUNDEEP
twitter-bootstrap-3fullscreencarouselflicker
Roy Guanyu
Roy Guanyu

Reputation: 68

Bootstrap 3 Carousel full screen flicker

I'm a beginner for web front-end design, using bootstrap to make a project prototype. I want to do a product like this website

The features I want is * expand carousel to full screen when visiting the website and then can scroll down to another div element.

I found this similar solution, but unfortunately it uses Carousel as the whole background.

To get the effect I want, I check the javascript src code and edit it.

modify this line (Shown on JSFIDDLE line 13 ) 

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

into this line (Shown on JSFIDDLE line 13 ) 

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

Yep, finally get the effect I want!! However, when the photo transition, a unexpected flicker appear, seems the photo is not at right location at first, then go to its right place immediately. It's annoying when I see the content inside div below, like 1info or 2info. here is the jsfiddle demo example for the issue.

I tried to use the solution like set z-index, but fail... Can someone help me to solve this annoying problem? Thanks a lot!!

Upvotes: 0

Views: 2900

Answers (1)

jme11
jme11

Reputation: 17387

Here's a flicker-free version without any plugins: 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');  
}

No additional javascript required, just make sure that the jquery and bootstrap.js files are linked in your page.

Upvotes: 1

Related Questions