rotatif Effet CoverFlow

Question

HTML:

- for (x in dict) 
    div.test 
    div.ContentFlow 
     div.loadIndicator 
     div.indicator 
     div.flow 
     - for (var i in dict[x]) 
      img(class='item', src='/images/' + dict[x][i] + '.jpg') 

mon CSS:

.test { 
    display:block; 
} 
.ContentFlow { 
    margin-top: 10%; 
} 

côté client JS:

var count = 0 
var items; 
var amount = 0; 
$(window).load(function(){ 
    items = $("#test .ContentFlow"); 
    amount = items.length; 

    items.hide(); 
    items.eq(count).show(); 
} 
$(window).load(setInterval(function(){ 

    // tried this as well 
    //var items = $("#test .ContentFlow"); 
    //var amount = items.length; 

    items.eq(count).hide(); 
    count >= amount-1 ? count = 0 : count++; 
    items.eq(count).show(); 

}, 1000)); 

ConentFlow css/js: http://www.jacksasylum.eu/ContentFlow/docu.php

Je suis essayer de ro tate le div .ContentFlow toutes les 5 secondes. Cependant, cela ne fonctionne pas. Après avoir défini l'affichage: aucun pour la classe ContentFlow, rien ne s'affiche au moment du chargement et par la suite. Si je ne définis pas display: none pour les divs ContentFlow dans mon css, tous les divs apparaissent au moment du chargement

Quelles propriétés dois-je utiliser pour que cela fonctionne. S'il vous plaît laissez-moi savoir si la question n'est pas claire.

Answer 1

Déplacer

items = $(".ContentFlow"); 
var amount = items.length; 

à l'intérieur des fonctions afin qu'il soit exécuté après le chargement de la fenêtre.

---

refactorisé:

var count = 0; 

$(window).load(function(){ 

    // Hide at first 
    $("#test .ContentFlow").hide(); 

    // Start repeating toggle 
    setInterval(function(){ 

     var items = $("#test .ContentFlow"); 
     var amount = items.length; 

     items.eq(count).hide(); 
     (count >= amount-1) ? count = 0 : count++; 
     items.eq(count).show(); 

    }, 1000); 
}; 

Au lieu de faire la cachette initiale à l'aide $("#test .ContentFlow").hide();, vous pouvez simplement définir un style .ContentFlow{display:none;} pour éviter le scintillement lorsque la page est toujours en chargement.

Answer 2

Je vous recommande d'utiliser la dernière version de ContentFlow v1.0.2 qui permet à plusieurs ContentFlows d'être sur la même page Web, chacun avec un gestionnaire JavaScript unique.

Ensuite, vous pouvez utiliser le ContentFlow Slideshow Plugin que vous gérer ensuite toutes les exigences de synchronisation dont vous avez besoin. La bonne chose à propos du plugin Slideshow est que chaque ContentFlow peut être réglé à une vitesse de synchronisation différente.