My Bootstrap Carousel Flickers when it Moves

Question

http://www.pizzatv.com/shows/

It flickers. I can't figure out why. Please be nice and thanks.

edit: what i have is 9 panels. i would like to show 6 at a time, while rotating one at a time like so {123456} {234567} {345678} {456789} {567891} etc. i hope that helps.

score 0 · Accepted Answer · answered Sep 15 '16 at 07:58

This is ONE ITEM in your carousel:

<div class="item">
    <div class="col-md-2 col-sm-4 col-xs-12">
        <a href="http://www.pizzatv.com/shows/pizza-stories/">
            <img src="http://www.pizzatv.com/wp-content/uploads/2016/08/pizza-stories2.png" onmouseover="this.src='http://www.pizzatv.com/wp-content/uploads/2016/08/Stories_hvr.png';" onmouseout="this.src='http://www.pizzatv.com/wp-content/uploads/2016/08/pizza-stories2.png';" class="img-responsive">
        </a>
        <img src="http://www.pizzatv.com/wp-content/uploads/2016/08/Stories_hvr.png" style="display:none;">
    </div>
    <div class="col-md-2 col-sm-4 col-xs-12">
        <a href="http://www.pizzatv.com/shows/pizza-kitchen/">
            <img src="http://www.pizzatv.com/wp-content/uploads/2016/08/the-pizza-kitchen.png" onmouseover="this.src='http://www.pizzatv.com/wp-content/uploads/2016/08/Kitchen_hvr.png';" onmouseout="this.src='http://www.pizzatv.com/wp-content/uploads/2016/08/the-pizza-kitchen.png';" class="img-responsive">
        </a>
        <img src="http://www.pizzatv.com/wp-content/uploads/2016/08/Kitchen_hvr.png" style="display:none;">
    </div>
    <div class="col-md-2 col-sm-4 col-xs-12">
        <a href="http://www.pizzatv.com/shows/us-pizza-team/">
            <img src="http://www.pizzatv.com/wp-content/uploads/2016/09/USPT.png" onmouseover="this.src='http://www.pizzatv.com/wp-content/uploads/2016/09/USPT_hvr.png';" onmouseout="this.src='http://www.pizzatv.com/wp-content/uploads/2016/09/USPT.png';" class="img-responsive">
        </a>
        <img src="http://www.pizzatv.com/wp-content/uploads/2016/09/USPT_hvr.png" style="display:none;">
    </div>
    <div class="col-md-2 col-sm-4 col-xs-12">
        <a href="http://www.pizzatv.com/shows/go-for-the-dough/">
            <img src="http://www.pizzatv.com/wp-content/uploads/2016/08/go-for-the-dough.png" onmouseover="this.src='http://www.pizzatv.com/wp-content/uploads/2016/08/Dough_hvr.png';" onmouseout="this.src='http://www.pizzatv.com/wp-content/uploads/2016/08/go-for-the-dough.png';" class="img-responsive">
        </a>
        <img src="http://www.pizzatv.com/wp-content/uploads/2016/08/Dough_hvr.png" style="display:none;">
    </div>
    <div class="col-md-2 col-sm-4 col-xs-12">
        <a href="http://www.pizzatv.com/shows/pizza-hall-of-fame/">
            <img src="http://www.pizzatv.com/wp-content/uploads/2016/08/hall-of-fame.png" onmouseover="this.src='http://www.pizzatv.com/wp-content/uploads/2016/08/HallOfFame_hvr.png';" onmouseout="this.src='http://www.pizzatv.com/wp-content/uploads/2016/08/hall-of-fame.png';" class="img-responsive">
        </a>
        <img src="http://www.pizzatv.com/wp-content/uploads/2016/08/HallOfFame_hvr.png" style="display:none;">
    </div>
    <div class="col-md-2 col-sm-4 col-xs-12">
        <a href="http://www.pizzatv.com/shows/pizzatv-picks/">
            <img src="http://www.pizzatv.com/wp-content/uploads/2016/08/2pizzatv-picks-684x1024.png" onmouseover="this.src='http://www.pizzatv.com/wp-content/uploads/2016/08/Picks_hvr.png';" onmouseout="this.src='http://www.pizzatv.com/wp-content/uploads/2016/08/2pizzatv-picks-684x1024.png';" class="img-responsive">
        </a>
        <img src="http://www.pizzatv.com/wp-content/uploads/2016/08/Picks_hvr.png" style="display:none;">
    </div>
</div>

It seems that you have all the content you would like to see as separate items under every single carousel item. Try clearing out the carousel items, and see if it flickers then.

But please see: although you may have this carousel on a Wordpress site, this is not a "Wordpress question". This is more general than that.

Oh, and pizza TV is great idea! :D

thanks! what i have is 9 panels. i would like to show 6 at a time, while rotating one at a time like so {123456} {234567} {345678} {456789} {567891} etc. i hope that helps. — Mark Aaron, Sep 15 '16 at 14:39
I cleared out the extra item-content in my inspector, and the flickering seemed to stop. — muka.gergely, Sep 15 '16 at 15:34
I think you should look for another carousel - getting Bootstrap carousel do what you want is a lot of work - actually you'd have to rewrite some basic functions to get it. Other carousels are better prepared for that (jCarousel or FlexSlider2, just to name two) - or just write your own JS carousel for this case. This was a similar question: http://stackoverflow.com/questions/20007610/bootstrap-3-carousel-multiple-frames-at-once — muka.gergely, Sep 15 '16 at 15:35
okay, yeah i cleared out all the item tags except the opening and closing and it stuck all of them on the same page. i will look at other carousels. it already does exactly what i want it to do minus the flickering though. — Mark Aaron, Sep 15 '16 at 15:43
The "flickering" is not a bug. They are the images in your moving carousel items. The bootply.com link on the other question I referenced (http://www.bootply.com/94444) does what you want. — muka.gergely, Sep 15 '16 at 15:47
thanks. i was just looking at that one. now i just need to figure out what's different between their code and mine. i noticed they used each panel as an item like i did. — Mark Aaron, Sep 15 '16 at 15:51
First, I would copy-paste the solution (only change the images), and see if it works on my template. If it does, then the case is solved :) — muka.gergely, Sep 15 '16 at 15:59

My Bootstrap Carousel Flickers when it Moves

1 Answers1