Deseo modificar los botones de control de carrusel en el componente de carrusel que ya incluí en una página index.html. En lugar de dos botones, quiero usar un solo botón que indicará si el carrusel está actualmente ciclando o en pausa. Además, podría usar el botón para alternar el comportamiento del ciclo del carrusel. El botón esta :
<button class="btn btn-danger btn-sm" id="carousel-button">
<span id="carousel-button-icon" class="fa fa-pause"></span>
</button>
El script esta :
<script>
$(document).ready(function(){
$('#mycarousel').carousel({interval:2000});
$("#carousel-button").(click(){
if($("#carousel-button").children("span").hasClass('fa-pause')){
$("#carousel-button").carousel('pause');
$("#carousel-button").children("span").removeClass('fa-pause');
$("#carousel-button").children("span").addClass('fa-play');
}else if($("#carousel-button").children("span").hasClass('fa-play')){
$("#carousel-button").carousel('cycle');
$("#carousel-button").children("span").removeClass('fa-play');
$("#carousel-button").children("span").addClass('fa-pause');
}
});
});
</script>
Sin embargo el botón, cuando hago clic en él, nunca cambia.
Ya tuve problemas con javascript. En particular, parecía que cuando cambiaba el espacio de trabajo, el botón de pausa no tenía ningún efecto. El desplazamiento y la detención del texto es tan extraña como siempre. Siento que los botones no controlan nada. Por otro lado, cuando vuelo sobre el botón, pausa el desplazamiento
El código está en Bitbucket.