carouFredSel: Mostra articoli parziali?

Sto usando carouFredSel per creare un carosello verticale. Tutto funziona alla grande, tranne che preferirei se gli oggetti parziali fossero mostrati in basso, ritagliati, piuttosto che nascosti. In questo modo indicherebbe agli utenti che ci sono elementi aggiuntivi che possono essere scrollati.carouFredSel: Mostra articoli parziali?

Ho letto il documentation, ma finora non posso dire se ciò che sono dopo è possibile.

Check out the JSFiddle to see what I mean. Guarda la parte più in basso nella pagina.

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" 
    } 
});

fonte

2012-03-02 colindunn

Sembra che questo sconfigga l'intero scopo di questo tipo di carosello. Altri plugin richiedono che tutte le diapositive abbiano la stessa dimensione; quindi puoi modificare la dimensione della finestra per ottenere una vista parziale della diapositiva successiva. Con il tuo, sembra essere dinamico ("intelligente") abbastanza da evitarlo intenzionalmente. E non vedo alcuna opzione configurabile che ti permetta di fare ciò che vuoi. Prova jCarousel o jCarousel Lite se vuoi che le opzioni rivelino parzialmente la diapositiva successiva. Nota, il primo ha un bug circolare. – Sparky

Questo è un buon punto. E in alcuni casi, sarebbe auspicabile. In questo caso, penso che sia indesiderabile. E io userei un altro plugin, ma questo plugin gestisce molte altre cose molto bene che altre no. – colindunn

Sto guardando ancora le opzioni ... Non penso sia possibile con questo plugin. E sarà sicuramente molto difficile se tutte le diapositive hanno dimensioni diverse ... questo significa che la dimensione del viewport dovrebbe cambiare costantemente. Fred cambia dinamicamente il viewport ma gli altri plugin no. Penso che la soluzione migliore sarebbe quella di rendere tutte le diapositive della stessa dimensione, in quanto il tuo obiettivo è leggermente più raggiungibile con quel punto di partenza. – Sparky

Questo è un po 'di un hack, ma funziona. Impostare l'altezza dello scroller (in questo caso, ul) su 150% e l'elemento padre (in questo caso, body) su overflow: hidden. Ora l'elemento più in basso è fuori dallo schermo.

JavaScript

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

CSS

body { 
    overflow: hidden; 
    }

fonte

2012-03-02 16:57:07 colindunn

Intelligente. Ma con diapositive di dimensioni diverse, non otterrai risultati incoerenti? – Sparky

Le altezze non variano molto, e posso sempre aumentare l'altezza di 'ul' al 200% se necessario. – colindunn

hmm, in questo modo, il carosello potrebbe non iniziare perché penserà che ci sia spazio sufficiente per le sue immagini quando non c'è in realtà .. Almeno questo accade nel mio caso. Puoi "ripararlo" con l'opzione minima. Ma non è l'ideale se hai solo poche immagini. Sto ancora cercando come risolvere questo. – clime

L'elemento non visibile successivo della giostra verticale è spinto verso il basso dal margine. Attualmente sto scavalcarlo mettendo la seguente funzione:

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'));

Il rovescio della medaglia è che si dovrà chiamare questa funzione sul carosello init e su e giù per gli eventi. Ma funziona;)

fonte

2013-05-20 10:19:44 vitkon

Ha, caroufredsel lo supporta, non ha bisogno di hack :))! Puoi ottenerlo con la seguente opzione:

items: { 
    visible: '+1' 
}

MODIFICA: Questo tuttavia presenta un problema. Se il numero di interi elementi visibili + 1 == numero di tutti gli articoli, allora il carousel non può essere scostato anche se un'immagine è visibile solo parzialmente. Puoi superare questo problema impostando per es. minimum: 1 ma non è sempre un modo per andare (ad es. Se il numero di immagini è dinamico e non vuoi che i gestori di scorrimento appaiano quando c'è solo una o due immagini).

fonte

2013-10-12 23:14:23 clime

Sono abbastanza sicuro che questa opzione non fosse disponibile quando questa domanda è stata pubblicata all'inizio del 2012. – Sparky

carouFredSel: Mostra articoli parziali?

risposta

Problemi correlati