He agregado el carrusel de arranque en el que se crea el elemento div en el ciclo for que se muestra a continuación. Tengo 9 imágenes pequeñas en cada elemento div que se completa dinámicamente. Ahora, en el juego de carrusel, veo que el elemento div cambia con el cambio de clase activa, pero lo que veo es que el contenido del primer elemento div también es visible cuando el segundo elemento div está activo de manera similar cuando el tercer elemento div se activa, los elementos 1 y 2 div también están visibles. Además , data-pause="hover" no funciona.

 <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>