2013-08-07 5 views
-2

J'essaie de trouver un carrousel comme dans: http://whiteshoe.ferragamo.com mais plus simple. Tout ce dont j'ai besoin, c'est d'un carrousel pleine page réactif avec des éléments qui ont une description et un lien sur le mode "actif", et les autres sont juste titre et comme ils sont inactifs, ils sont plus sombres ou grisâtres.Vous cherchez responsive js carrousel

J'ai essayé celui-ci http://caroufredsel.dev7studios.com mais je ne sais pas comment ajouter les états inactifs/actifs, et le responsive: true ne redimensionne pas mes images. Merci :)

+1

_ "J'essaie de construire un carrousel" _ - Essaies-tu réellement de construire un carrousel, ou demandes-tu une recommandation pour une bibliothèque existante qui le fait pour toi? – nnnnnn

+0

Je ne suis pas un programmeur (je ressemble plus à un css geek), donc ... Id comme une bibliothèque qui peut le rendre plus facile ... Je pourrais faire quelques modifications mais pas tellement, heh. : 3 merci! –

+0

Ok, j'ai édité ma question parce que je n'ai pas remarqué ma stupidité quand je l'ai posté. Maintenant, c'est clair, je cherche une bibliothèque de carrousel. –

Répondre

0

Ok, donc ...

Je trouve que les js ont juste ajouté propriétés iLine css, donc j'ai ajouté quelques css pour le rendre réactif (sans redimensionner mes images, qui travaille maintenant pour mon Besoins). CaroFredSel ajoute des classes au code que vous écrivez donc tout ce que j'avais besoin d'ajouter était la largeur: 100%! Propriété importante pour le faire fonctionner.

Pour la partie js, je devais ajouter un point fort au courant alors j'ai ajouté ce code et il fonctionne:

function highlight(items) { 
    items.filter(":eq(1)").css({ 
     opacity : 1 
    }); 
    return items; 
} 
function unhighlight(items) { 
    items.css({ 
     opacity : .3 
    }); 
    return items; 
} 

Et puis, après les propriétés par défaut de la taille et des choses générales:

scroll: { 
items:1, 
onBefore: function(data) { 
     unhighlight(data.items.old); 
    }, 
    onAfter : function(data) { 
     highlight(data.items.visible); 
    }, 
}, 

auto: false, 
prev: { 
    button: "#prev", 
    key: "left", 
    onBefore: function(data) { 
      unhighlight(data.items.old); 
     }, 
     onAfter : function(data) { 
      highlight(data.items.visible); 
     } 
}, 
next: { 
    button: "#next", 
    key: "right", 
    onBefore: function(data) { 
      unhighlight(data.items.old); 
     }, 
     onAfter : function(data) { 
      highlight(data.items.visible); 
     } 
}, 

Et à la fin:

highlight(unhighlight($j("#f-carousel > *"))); 

});

Je vais ajouter plus de choses en surbrillance, et des textes sur le 'onafter' mais je pense que cela couvre tout. Merci et j'espère que cela aidera quelqu'un.

0

C'est marrant, mais il semble que la réactivité de ce caroussel réactif ne fonctionne pas dans mon navigateur (sur la page de démonstration) ... Il y a beaucoup de jquery caroussel réactif de toute façon, vous aurez trouver un sur google ...

+0

ouais .. mais je commence à remarquer que la réactivité est js mais ça remplace juste le css, donc je suis en train de peaufiner et d'accomplir une partie de mon objectif ... je veux toujours ajouter des états changeants tu .. –

+1

Alors bonne chance avec caroufredsel. Si c'est un peu dur, postez votre code, nous pouvons vous aider peut-être. Si c'est vraiment dur, pensez à utiliser un autre carrousel ... – Pierre