Script personalizado de miniaturas de Royalslider

Estoy usando Royalslider, estoy tratando de configurar una lista de miniaturas externa que cuando haces clic en uno de los pulgares o presionas el siguiente botón/usas la tecla de flecha/deslizas esa miniatura cambia de clase para convertirse en la miniatura "resaltada". Funciona bien cuando haces clic en la miniatura, pero no puedo hacer que funcione con las flechas deslizar/teclado/o siguiente/anterior.

He estado tratando de pasar por Métodos públicos para encontrar un script para esto, pero estoy teniendo dificultades: mySliderInstance.numSlides // Número de diapositivas mySliderInstance.currentSlideId // ID de diapositiva actual mySliderInstance.lastSlideId // Último (anterior) identificación de diapositiva
mySliderInstance.sliderWidth // Ancho del control deslizante mySliderInstance.sliderHeight // Altura del control deslizante

y viendo este ejemplo

<script>
//Example, replacing arrows with arrow symbols and adding "1 / 5" naigation
var mySliderInstance = $('#sliderId').royalSlider({
    slideTransitionSpeed:400,
    beforeLoadStart:function() {                    
        $("p.navId").text((this.currentSlideId+1) + "/"  +   (this.numSlides) );
        this.arrowLeft.html("&larr;");
        this.arrowRight.html("&rarr;");
    },
    beforeSlideChange:function() {
        $("p.navId").text((this.currentSlideId+1) + "/"  +   (this.numSlides) );
    }       
}).data("royalSlider");
</script>

inventar algo. yo suelo

$("#makingof_goto").click(function() {
    sliderInstance.goTo(0);
});

¿Hay alguna manera de modificar la secuencia de comandos usando mySliderInstance.currentSlideId de una manera que pueda hacer coincidir los números de diapositiva con la miniatura? Como cuando en la diapositiva 3 cambia la clase de #this_thumb a .current_class y luego todos los otros pulgares en la lista li a .unselected haciendo algo como esto:

$(function() {
$(".hd ul li").click(function(){
$(this).addClass("current").siblings().removeClass("current");
$("#space_goto").click(function() {
    sliderInstance.goTo(1);
    });
})
});

Esto es lo último que debo hacer antes de enviar mi cartera y he estado luchando contra esto durante un par de días sin suerte, cualquier ayuda en esto sería muy apreciada.

preguntado el 27 de julio de 12 a las 15:07

qué versión de royalslider estás usando... solo para saber a qué opciones de API tienes acceso. -

1 Respuestas

Puede usar este

slider.ev.on('rsAfterSlideChange', function(event) {
// triggers after slide change
 // Add class to the current thumbnail
 $(".thumb:eq("+slider.currSlideId+")").addClass("current");
});

respondido 14 mar '13, 15:03

No es la respuesta que estás buscando? Examinar otras preguntas etiquetadas or haz tu propia pregunta.