carouFredSel: ¿mostrar elementos parciales?

Estoy usando carouFredSel para crear un carrusel vertical. Todo funciona muy bien, excepto que preferiría que los elementos parciales se muestren en la parte inferior, recortados, en lugar de estar ocultos. De esta forma, indicaría a los usuarios que hay elementos adicionales que se pueden desplazar.carouFredSel: ¿mostrar elementos parciales?

He estado leyendo el documentation, pero hasta ahora no puedo decir si lo que busco es posible.

Check out the JSFiddle to see what I mean. Mire el elemento más inferior en la página.

Javascript

$("ul").carouFredSel({ 
    direction: "up", 
    align: "top", 
    width: 100, 
    height: "100%", 
    items: { 
     visible: "variable", 
     width: 100, 
     height: "variable" 
    }, 
    scroll: { 
     items: 1, 
     mousewheel: true, 
     easing: "swing", 
     duration: 500 
    }, 
    auto: false, 
    prev: { 
     button: ".prev", 
     key: "up" 
    }, 
    next: { 
     button: ".next", 
     key: "down" 
    } 
});

Fuente

2012-03-02 colindunn

Parece que eso frustra el propósito de este tipo de carrusel. Otros complementos requieren que todas las diapositivas sean del mismo tamaño; a continuación, puede modificar el tamaño de la ventana gráfica para obtener una vista parcial de la siguiente diapositiva. Con el suyo, parece ser lo suficientemente dinámico ("inteligente") como para evitarlo intencionalmente. Y no veo ninguna opción configurable que te permita hacer lo que quieras. Pruebe jCarousel o jCarousel Lite si desea que las opciones revelen parcialmente la siguiente diapositiva. Tenga en cuenta que el primero tiene un error circular. – Sparky

Ese es un buen punto. Y en algunos casos, eso sería deseable. En este caso, creo que es indeseable. Y usaría otro complemento, pero este plugin maneja muchas otras cosas realmente bien que otros no. – colindunn

Estoy buscando de nuevo las opciones ... No creo que sea posible con este complemento. Y definitivamente va a ser muy difícil si todas las diapositivas tienen diferentes tamaños ... esto significa que el tamaño de la ventana gráfica tendrá que cambiar constantemente. Fred cambia dinámicamente la ventana gráfica pero los demás complementos no. Creo que su mejor opción sería hacer que todas las diapositivas tengan el mismo tamaño, ya que su objetivo es un poco más alcanzable con ese punto de partida. – Sparky

Esto es un poco de un truco, pero funciona. Establezca la altura de la rueda de desplazamiento (en este caso, ul) en 150% y el elemento principal (en este caso, body) en overflow: hidden. Ahora el elemento más inferior está fuera de pantalla.

Javascript

$("ul").carouFredSel({ 
    height: "150%" 
});

CSS

body { 
    overflow: hidden; 
    }

Fuente

2012-03-02 16:57:07 colindunn

Inteligente. Pero con diapositivas de diferentes tamaños, ¿no obtendrás resultados inconsistentes? – Sparky

Las alturas no varían mucho, y siempre puedo aumentar la altura de 'ul' al 200% si es necesario. – colindunn

hmm, así, el carrusel no puede iniciarse porque pensará que hay espacio suficiente para sus imágenes cuando en realidad no existe. Al menos esto sucede en mi caso. Puedes "arreglarlo" con la opción mínima. Pero eso tampoco es ideal si tienes solo unas pocas imágenes. Todavía estoy buscando cómo resolver esto. – clime

El siguiente elemento no visible en el carrusel vertical es empujado hacia abajo por el margen. Actualmente estoy anulando por la siguiente función:

function cropCarousel() { 
    var visibleElements = this.triggerHandler("currentVisible"), // show all visible 
    $lastElement = $(visibleElements[visibleElements.length - 1]); // get the last one 

    $lastElement.css('margin-bottom', '30px'); // amend the margin 
}; 

cropCarousel.call($('#your_carousel_id'));

La desventaja de esto que va a tener que llamar a esta función init carrusel y en eventos y hacia abajo. Pero funciona;)

Fuente

2013-05-20 10:19:44 vitkon

Ha, caroufredsel lo admite, no se requieren hacks :))! Puede lograrlo con la siguiente opción:

items: { 
    visible: '+1' 
}

EDITAR: Esto a pesar de todo tiene un problema. Si el número de elementos visibles completos + 1 == número de todos los elementos, el carrusel no se puede desplazar, aunque una imagen sea visible solo parcialmente. Puede solucionar este problema configurando, p. Ej. minimum: 1 pero no siempre es un camino por recorrer (por ejemplo, si el número de imágenes es dinámico y no desea que aparezcan los manejadores de desplazamiento cuando solo hay una o dos imágenes).

Fuente

2013-10-12 23:14:23 clime

Estoy bastante seguro de que esta opción no estaba disponible cuando esta pregunta se publicó a principios de 2012. – Sparky

carouFredSel: ¿mostrar elementos parciales?

Respuesta

Cuestiones relacionadas