Support » Fixing WordPress » How to fix bootstrap empty slide in carousel

  • sonny12

    (@sonny12)


    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.

    Carousel slider sample

    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>
    • This topic was modified 7 years ago by sonny12.
    • This topic was modified 7 years ago by sonny12.
    • This topic was modified 7 years ago by sonny12. Reason: adding important details of the problem
  • The topic ‘How to fix bootstrap empty slide in carousel’ is closed to new replies.