J'essaie de créer un curseur d'images (précédent / Suivant) afin que les images se glissent vers la gauche lorsque je clique sur "Précédent" et à droite lorsque je clique sur "Suivant" avec 0,5 de lenteur, donc il faut donc une animation. Et quand j'atteigne la dernière image et cliquez sur "Suivant", je veux des images sur "Exécuter à l'envers" à la première, la même lorsque je suis dans la première, puis cliquez sur "Précédent", donc "à l'avenir" Dernier.
Je veux le même comportement ce jsfiddle montre. (Mais je n'ai pas besoin de la minuterie pour déplacer automatiquement les images et n'avez pas besoin des boutons "déclencheurs", juste "Précédent" et "Suivant").
Le problème ici est que mes images ne sont pas t avoir une taille fixe. Je définis une largeur en pourcentage et je ne peux pas définir une hauteur car j'ai une conception réactive, l'image redimensionne lorsque je redimensionniste la fenêtre du navigateur.
La jQuery aux actions précédentes / suivantes est assez facile, mais je viens de Impossible de trouver un moyen d'ajouter cette animation lorsque je supprimai / ajoutez la classe "active" à mes images (elles deviennent donc visibles ou non).
J'ai déjà essayé de mettre toutes les images côte à côte et affichant seulement le premier (la largeur de conteneur de réglage est égale à la largeur de l'image), donc lorsque je clique sur "Suivant", je viens de "déplacer" le conteneur vers la gauche afin qu'il commence à afficher l'image suivante, mais cela ne fonctionne pas car Impossible de définir la hauteur des images, ils apparaîtront sous l'autre, non côte à côte.
html jQuery
6 Réponses :
Peut-être pas la situation idéale mais au moins cela vous donnera une idée. Vous pouvez utiliser la fonction d'animation de JQuery et j'ai également changé votre code un peu. Voir démo ici
Dans votre HTML, je dirais ceci: P>
$('.images-wrapper img:gt(0)').hide();
$('.next').click(function() {
$('.images-wrapper img:first-child').animate({width:'toggle'},350).next().fadeIn().end().appendTo('.images-wrapper');
});
$('.previous').click(function() {
$('.images-wrapper img:first-child').animate({width:'toggle'},350);
$('.images-wrapper img:last-child').prependTo('.images-wrapper').fadeOut();
$('.images-wrapper img:first-child').fadeIn();
});
Merci, mais cela ne me convient pas, une fois qu'il n'y a pas d'animation "coulissante" d'un côté à l'autre.
J'ai mis en œuvre avec des animations CSS3. Cependant, cela nécessitera une manipulation de valeurs d'animation dans CSS chaque fois qu'une diapositive est ajoutée ou enlevée.
@keyframes slideAnim {
0% {
transform: translateX(0)
}
12.5% {
transform: translateX(0%);
}
25% {
transform: translateX(-25%);
}
37.5% {
transform: translateX(-25%)
}
50% {
transform: translateX(-50%)
}
62.5% {
transform: translateX(-50%)
}
75% {
transform: translateX(00%);
}
89.5% {
transform: translateX(00%)
}
100% {
transform: translateX(00%)
}
}
Eh bien, le problème est la hauteur de glissement.
Tout d'abord, vous devez avoir un élément qui est le "cadre d'image" qui contient toutes les autres images. C'est important. Pour une meilleure imagination une image:
Vous avez maintenant plusieurs techniques pour montrer et masquer des images. On pourrait être de mettre l'opacité. Lorsque vous utilisez la transition Pour l'effet de diaporama est donné à la position de l'image visible à sa largeur à gauche et l'image précédemment purement neuve à sa large à droite puis à 0. Ainsi, déplace l'image actuelle à gauche du cadre. dehors et le nouveau sort dans.
Et voici la difficulté si la hauteur n'est pas la même. Si l'image actuelle 300px haut et le nouveau 400px, le cadre d'image ici ajusterait ici immédiatement sa hauteur une fois que la nouvelle image commence à être visible.
Le contenu ci-dessous commencerait à sauter avec chaque diapositive.
est-ce que vous le souhaitez si désiré ???
Si oui, je peux vous faire exemple comment cela fonctionne. : opacité .15s Facilité d'entrée; La seule image se décompose et le suivant s'effondre.
Vous pouvez réellement faire cela dans pure CSS!
vous Utilisez une carte d'identité et une étiquette (avec un c'est fondamentalement. Tout ce que vous avez laissé, c'est de la styler! (Forcé de Pen Joshua Hibbert S) p> p> pour code> attribut = pour l'identifiant ciblé) p>
<div class="slider">
<input type="radio" name="slide" id="slide1" checked="true" />
<input type="radio" name="slide" id="slide2" />
<input type="radio" name="slide" id="slide3" />
<input type="radio" name="slide" id="slide4" />
<div class="buttons">
<!-- Slide 1 -->
<label for="slide4" class="slide1 previous"><</label>
<label for="slide2" class="slide1 next">></label>
<!-- Slide 2 -->
<label for="slide1" class="slide2 previous"><</label>
<label for="slide3" class="slide2 next">></label>
<!-- Slide 3 -->
<label for="slide2" class="slide3 previous"><</label>
<label for="slide4" class="slide3 next">></label>
<!-- Slide 4 -->
<label for="slide3" class="slide4 previous"><</label>
<label for="slide1" class="slide4 next">></label>
</div>
<div class="slide">
<img src="http://dribbble.s3.amazonaws.com/users/322/screenshots/872485/coldchase.jpg">
<img src="http://dribbble.s3.amazonaws.com/users/322/screenshots/980517/icehut_sm.jpg">
<img src="http://dribbble.s3.amazonaws.com/users/322/screenshots/943660/hq_sm.jpg">
<img src="http://dribbble.s3.amazonaws.com/users/322/screenshots/599584/home.jpg">
</div>
</div>
La solution la plus simple (je pense) est de forcer les éléments à avoir de la même taille, en les plaçant dans un L'élément CSS pourrait regarder Comme: et dans chaque élément dans le code HTML: div . Vous pouvez même avoir la div montrez l'image sans l'utilisation d'une balise IMG , à l'aide de la fonction arrière-fond-image CSS (voir http://www.w3schools.com/css/css3_backgrounds.asp Pour plus de détails).
Je suis enfin arrivé là-bas.
ici est le violon avec la solution que j'ai développée.
Le problème principal de la mise en oeuvre de ce curseur d'image était que les images, de toutes les mêmes formes, ont une largeur dynamique (définie dans La solution a été fondamentalement mettre une image "fausse" (avec l'opacité dans la jQuery, je "déplace" le "titulaire des images div" toujours par Si vous commencez à faire glisser les images vers la gauche et à droite, puis redimensionnez la fenêtre, vous verrez qu'il continue de fonctionner parfaitement. % sur CSS) et une hauteur dynamique (non définie sur CSS). .
: 0 ) à l'intérieur de mon conteneur afin que le conteneur obtienne la taille réelle des images que je utiliserai dans le curseur; Mettez une DIV en "Tenir" les images réelles avec Position: absolu et donnez-lui une largeur calculée par Nombre d'images * 100% ; Et pour la dernière fois, donnez à chaque image dans mon curseur une largeur de x% , en fonction du nombre d'images.
%% , jamais par des valeurs statiques, une fois que la largeur de tout peut changer si je redimensionniste la fenêtre.
Si vous voulez un effet coulissant, pourquoi ne devriez-vous pas compenser toutes les images à gauche puis utiliser la transition CSS3 dans
img.acactive pour obtenir chaque image active sur leà gauche: 0PX; J'ai limité CSS3 - Compétences d'animation mais est le concept que je vois des personnes à utiliser.