ciclo jQuery: 1 ciclo, múltiples buscapersonas

Question

Lector de mucho tiempo, póster por primera vez. :)

Estoy usando el complemento de ciclo jQuery, que se puede descargar aquí: http://jquery.malsup.com/cycle/

Lo hice funcionar bien para la parte posterior, pero ha llegado una solicitud para tener controles de buscapersonas por encima y por debajo del objeto que se rinde en bicicleta.

Parece que el segundo buscapersonas no se recoge, ni al resaltar el enlace de buscapersonas de paneles activos y hacer clic en los controles del segundo buscapersonas solo agrega el "#" a la URL en la barra de direcciones.

Vi esta publicación: stackoverflow.com/questions/1663974/using-multiple-pagers-in-jquery-cycle-plugin

Qué tipo de tiene sentido, pero no estoy seguro de por qué sería diferente del mío, el resultado final del mío se puede ver aquí: http://dev02.web.lumens.demandware.net/on/demandware.store/sites-lumens-site/default/search-show?cgid=brands Si se desplaza hasta el fondo.

El HTML se parece a esto:

    <ul class="pager"></ul>
      <div id="list-screens" class="list-screens">
         <div class="list-view-row"><!-- content goes here-></div>
    </div>
    <ul class="pager"></ul>

Para el JavaScript:

    jQuery(document).ready(function() {
        var markupBegin = '<li><a href="#">';
        var markupEnd = "</a></li>";
        var i = 0;
        var pagerArray = ["A - E","F - J", "K - O","P - T","U - Z", "#"];
        var detailPagerArray = ["A","B","C","D","E","F","G","H","I","J","K","L","M","N","O","P","Q","R","S","T","U","V","W","X","Y","Z","${'#'}"];
        jQuery("${'#'}list-screens").children().each(function(index, element) {
        jQuery(".list-view .pager").append(markupBegin + pagerArray[i] + markupEnd);
        //if(i <jQuery("${'#'}list-screens").children().length - 1 ) {
        jQuery(".list-view .pager").append("<li class='divider'></li>");
        //}
        i++;
        });
        jQuery(".list-view .pager").append("<li><a href=\"#\">See All Brands</a>");
        jQuery(".list-view .pager").append("<li class='clear'></li>");
        // browse listview

        jQuery("#list-screens").cycle({
            fx:     'scrollLeft', 
            easing: 'linear', 
            timeout:  0,
            speed: 750,
            width:935,
            height:500,
            pager: ".list-view .pager",
            pagerAnchorBuilder: function(idx, slide) {
            // console.log(idx);
            //for every amount its over 1 we have to add an extra to account for the divider li

            if(idx == 0) { // shouldn't have to do anything
            } else {
                idx = idx + (idx);
            }
            return ".list-view .pager li:eq("+ idx +") a";
        },
        updateActivePagerLink : function(pager, currSlideIndex) {
            if(currSlideIndex != 0) {
                currSlideIndex = currSlideIndex + currSlideIndex;
            }
            jQuery(pager).find("li").removeClass("activeSlide").filter('li:eq('+currSlideIndex+')').addClass("activeSlide");
        }
    });

Probablemente podría tratar de capturar los clics y engancharme a los eventos del ciclo y forzarlo de esa manera, pero parece un poco extraño que esto no funcione. Noté que existe la única opción para permitir que los clics del enlace burbujeen. No estaba realmente seguro de si eso era lo que necesitaba. Gracias por toda tu ayuda.

Answer 1

Siempre puedes recurrir a la creación manual del buscapersonas y hacer clic en el manejo

Se puede encontrar un ejemplo aquí:

http://jquery.malsup.com/cycle/goto2.html

Esto crea 1 buscapersonas, pero puedes crear muchos como este en un segundo botón

var bc = $('#buttonContainer'); 

var $container = $('#container').cycle({ 
    fx:     'scrollHorz', 
    speed:   300, 
    timeout: 0 
}); 

$container.children().each(function(i) { 
    // create input 
    $('<input type="button" value="'+(i+1)+'" />') 
        // append it to button container 
        .appendTo(bc) 
        // bind click handler 
        .click(function() { 
            // cycle to the corresponding slide 
            $container.cycle(i); 
            return false; 
        }); 
});