2013-11-15 11 views
5

Sto costruendo un caroufredsel per un sito Web reattivo (con solo 3 stati: 960px, 720px e 320px). Funziona alla grande quando si carica la pagina in uno di questi stati. Mostra il numero corretto di elementi (3, 2 e 1 rispettivamente). Tuttavia, quando ridimensionate la finestra, il numero di elementi visibili non cambia. Stavo pensando a una chiamata $(window).resize(), ma non riesco a trovare come è possibile regolare le impostazioni Caroufredsel dopo l'inizializzazione.Articoli visibili responsivi Caroufredsel

$('#caroufredsel').carouFredSel({ 
    infinite: true, 
    auto: false, 
    pagination: false, 
    prev: { 
     button: '#prev', 
     key: 'left' 
    }, 
    swipe: { 
     onTouch: true, 
     onMouse: true 
    }, 
    next: { 
     button: '#next', 
     key: 'right' 
    }, 
    items: { 
     visible: 'variable' 
    } 
}); 

risposta

4

Quello che dovete fare nella vostra ridimensionamento-callback è la seguente:

var $carouselContainer = $('#caroufredsel'); 
var resizeCallback = function() { 
    var showThatManyItems = 3; // determine the number of items to be shown depending on viewport size 
    $carouselContainer.trigger('configuration', [ 
     'items', { 
      visible : showThatManyItems 
     } 
    ], true); 
} 
1

Se non sbaglio, non è necessario "reattivo: vero" come uno dei parametri?