carouFredSel - imposta la quantità visibile sulla quantità effettiva di immagini - e continua a scorrere?

Question

Sto lavorando con questo scroller

http://coolcarousels.frebsite.nl/c/2/

Ho questa messa a punto sotto.

Il mio problema è che ho impostato su visible: 4 e ho 4 immagini, quindi non scorre. Se lo metto a visible: 3 allora funziona come previsto. Ma voglio mostrare tutte e 4 le immagini in un'unica schermata quando apri il browser a tutta larghezza su una risoluzione di 1920px. Quindi il problema sembra essere. Se imposto visibilità sulla quantità di immagini che ho, smette di funzionare.

C'è un modo per avere tutte e 4 le immagini sullo schermo in una sola volta, quindi scorrere ancora attraverso di esse?

$(function() { 
    $('#carousel').carouFredSel({ 

     width: '100%', 
     align: 'left', 

     items: { 
      visible: 4, 
      start: 0, 


     }, 
     scroll: { 
      items: 1, 
      queue   : true, 
      fx: "scroll", 
      easing: "swing", 
      duration: 1000, 
      timeoutDuration: 3000 
     }, 

     prev: '.prev', 
     next: '.next', 


     auto: { 
      easing: "quadratic", 
      button: '.play', 

      pauseOnEvent: 'resume', 
       pauseOnHover: true 
     } 

    }).find(".slide .plusNav").hover(
       function() { $(this).find("div").slideDown(); }, 
       function() { $(this).find("div").slideUp(); } 
    ); 
}); 

Answer 1

sono stato in grado di fare questo modificando la fonte:/

Se di commentare queste righe 554 & 556 in jquery.carouFredSel-6.2.0.js come questo ...

// not enough items 
var minimum = (is_number(opts.items.minimum)) ? opts.items.minimum : opts.items.visible + 1; 
if (minimum > itms.total) 
{ 
    // e.stopImmediatePropagation(); 
    // return debug(conf, 'Not enough items ('+itms.total+' total, '+minimum+' needed): Not scrolling.'); 
} 

... ha funzionato per me.

Answer 2

provare questo

items: { 
    minimum: 0, 
}, 

Answer 3

accesso l'involucro e impostare la sua altezza (assumendo che tutti i bambini hanno la stessa altezza):

var carousel = [your_carousel], 
    carousel_wrapper = carousel.parent(); 

carousel_wrapper.height(function(){ 
    return (carousel.children('[child_selector]').length) * [child_height]; 
}); 

La cosa qui è, ci sarà un comportamento strano quando il carosello si anima. Questo perché l'altezza massima è stata effettuata ((n-1) * child_height) intenzionalmente come maschera, con un overflow : nascosto.

Un'altra opzione sarebbe quella di duplicare uno dei bambini, ma non è semantico.

Answer 4

ho risolto questo problema impostando minimum a 0.

items: { 
    minimum: 0, 

In realtà, impostando l'attributo minimum a zero forza la barra di scorrimento da visualizzare sempre a prescindere dal numero di elementi attualmente visualizzati.

Ciò è stato necessario per me perché, abilitazione automatica delle barre di scorrimento non funzionava su alcuni resolutions- schermo ho dovuto aggiungere altri 2 elementi per rendere la barra di scorrimento visibile che non era il comportamento previsto.

Come soluzione, ho impostato minimum: 0 - ha risolto il problema.