0

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.

introducir la descripción de la imagen aquí

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.

4 respuestas 4

3

Estas llamando mal la funcion click, deberia ser de la siguiente manera

$("#carousel-button").on("click", function(){
   //codigo....
})
1
  • Perfecto, los botones cambian. Por otro lado, 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 7 dic. 2017 a las 17:17
1

Intenta con

$('#carousel-button').click(function(){
  $('#carousel-button-icon').toggleClass("fa-play", "fa-pause");
});
1
  • Perfecto, los botones cambian, pero no cuando hay una coma. Por otro lado, el desplazamiento del texto siempre es tan extraño como antes. Siento que los botones no controlan nada el 7 dic. 2017 a las 17:10
0

Estas escribiendo mal la funcion children: $("#carousel-button").childrn("span").addClass('fa-pause');

Por eso no cambia la clase, estas poniendo "childrn", reemplazalo por children

1
  • Disculpe, cometí un error al copiar, pero incluso con eso, no hay cambio el 7 dic. 2017 a las 17:07
0

Me parece que tu carrusel no funciona bien por que estas dandole efectos al boton $("#carousel-button").carousel('pause'); cuando deberias darselos al carrusel:

$('#mycarousel').carousel('pause')

$('#mycarousel').carousel('cycle')
1
  • Por favor no publiques varias respuestas a una misma pregunta. Si necesitas ajustar una respuesta, simplemente edítala. Por favor borra una de las dos. Gracias.
    – sstan
    el 7 dic. 2017 a las 19:25

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.