How to fix bootstrap empty slide in carousel
-
I am facing problem with bootstrap carousel. When i return to the tab of the site it shows empty slides and slides next. I am working along with wordpress. I think the empty is the wrapper of the slide. but why does the slide go weird when return to the tab. The problem occur when you return to the tab/site but you have to give a minute slides will loop and then when you return. You will notice a blank container and then it will slide to the next image.
Can you guys please help. Below is my wordpress and bootstrap carousel. And i tried to use just the plain simple bootstrap carousel code in w3schools but still the problem exist. I this a bugs or something? Anyone share some fixes please. thanks,
W3schools – Bootstrap Carousel
<div id="myCarousel" class="carousel slide" data-ride="carousel"> <?php $rows = get_field('slidershow', 25); $row_count = count($rows); ?> <!-- Indicators --> <ol class="carousel-indicators"> <?php for($counter = 0; $counter < $row_count; $counter++): ?> <?php if($counter == 0): ?> <li data-target="#myCarousel" data-slide-to="0" class="active"></li> <?php else: ?> <li data-target="#myCarousel" data-slide-to="<?php echo $counter; ?>"></li> <?php endif; endfor; ?> </ol> <!-- Wrapper for slides --> <div class="carousel-inner" role="listbox"> <?php $images = get_field('slidershow', 25); $counter = 0; if( $images ): ?> <?php foreach( $images as $image ): ?> <?php if($counter == 0): ?> <div class="item active"> <img src="<?php echo $image['url']; ?>" alt="<?php echo $image['alt']; ?>" /> <div class="carousel-caption"> <h3><?php echo $image['alt']; ?></h3> <p><?php echo $image['description']; ?></p> </div> </div> <?php else: ?> <div class="item"> <img src="<?php echo $image['url']; ?>" alt="<?php echo $image['alt']; ?>" /> <div class="carousel-caption"> <h3><?php echo $image['alt']; ?></h3> <p><?php echo $image['description']; ?></p> </div> </div> <?php endif; $counter++; ?> <?php endforeach; ?> <?php endif; ?> </div> <!-- Left and right controls --> <a class="left carousel-control" href="#myCarousel" role="button" data-slide="prev"> <span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span> <span class="sr-only">Previous</span> </a> <a class="right carousel-control" href="#myCarousel" role="button" data-slide="next"> <span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span> <span class="sr-only">Next</span> </a> </div>
- The topic ‘How to fix bootstrap empty slide in carousel’ is closed to new replies.