Bootstrap Carousel next slide adds below the previous slide

Question

I have added the bootstrap carousel in which the div item is created in the for loop shown below. I have 9 small image in each item div which is dynamically getting populated. Now on carousel play i see the div item changes with change of active class but what i see is first div item content is also visible when the second item div is active similarly when 3rd item div gets active 1st and 2nd div items are visible too. Also the data-pause="hover" is not working.

<div class="col-md-4 col-md-offset-4">
<div id="custCarousel" class="carousel slide" data-ride="carousel" data-pause="hover">
    <!-- Indicators -->
    <ol class="carousel-indicators">
      <li data-target="#custCarousel" data-slide-to="0" class="active"></li>
      <li data-target="#custCarousel" data-slide-to="1"></li>
      <li data-target="#custCarousel" data-slide-to="2"></li>
    </ol>

    <!-- Wrapper for slides -->
    <div class="carousel-inner">
      <?php 
        $counttoken = 9;
        $loop = round($arrloop/9);
        $k=0;

        for($j=0;$j<$loop;$j++)
        {       
            if($k==0){$act='active';}else{$act ='';}
            echo '<div class="item '.$act.'">'; 
                for($i=0; $i<$counttoken;$i++)
                {   
                    $img = $data[$rand_keys[$i]];
                    echo "<a href=".$img[1]."><img src=".$img[2]." alt=".$img[0]." width='100' /></a>";
                }
                $counttoken = $counttoken + 9;
                                $k++;
                echo '</div>';
        }

        ?>
    </div>

    <!-- Left and right controls -->
    <a class="left carousel-control" href="#custCarousel" data-slide="prev">
      <span class="glyphicon glyphicon-chevron-left"></span>
      <span class="sr-only">Previous</span>
    </a>
    <a class="right carousel-control" href="#custCarousel" data-slide="next">
      <span class="glyphicon glyphicon-chevron-right"></span>
      <span class="sr-only">Next</span>
    </a>
  </div>
</div>

gintech gintech · Accepted Answer · 2017-05-01T06:26:18

Sorry, it was my bad i made an error in my php code to update the for loop. Here below is the updated code and it's working perfect now.

<?php 
        $counttoken = 9;
        $loop = round($arrloop/9);
        $k=0;
        $l=0
        for($j=0;$j<$loop;$j++)
        {       
            if($k==0){$act='active';}else{$act ='';}
            echo '<div class="item '.$act.'">'; 
                for($i=$l; $i<$counttoken;$i++)
                {   
                    $img = $data[$rand_keys[$i]];
                    echo "<a href=".$img[1]."><img src=".$img[2]." alt=".$img[0]." width='100' /></a>";
                }
                $l = $l+9;
                $counttoken = $counttoken + 9;
                                $k++;
                echo '</div>';
        }

        ?>

Bootstrap Carousel next slide adds below the previous slide

1 Answers