Problème animation d'un slideshow

Bonjour,

Alors déjà, pour le french kiss, faut éviter de mettre < directement mais plutôt mettre <

Je te conseille de faire soit tout en css (à ce moment tu dois timer les animations pour qu'elles se fassent au même moment) ou tout faire en js

Pour le js, tu as plein de librairies sur le web qui te permettront de le faire sans t'y connaitre en js, et si tu veux le recoder tu peux suivre la formation js faite par grafikart

Bonjour Alex, le french kiss c'est uniquement pour codepen.

Je prefererais éviter le JS, cepedant, s'il est possible de codé les fonctionalités que je désire via Js je suis preneur.
En aucun cas je vais m'amuser à tout recodé en Js ou utiliser quelque chose de déja tout prêt.

J'ai déja fait tout mon slider, il ne me manque que l'animation autoplay et les puces qui suivent selon l'image.
Il me faut des pistes, ou un exemple de ce qui pourrait fonctionner avec mon slideshow.

Cordialement.

J'ai pas trop compris pour la partie js

Sinon pour le faire en css tu dois faire une animation avec les keyframes, mais tu ne pourras pas gérer le survol de la souris

Tu aurais quelques piste a me fournir?
J'ai essayer des tas de keyframes, j'arrive a le rendre autoslide, mais les puces de navigations et mes fleches sur les cotes ne suivent pas du tout.

Tu peux mettre l'autoslide sur un codepen ? je te montrerai comment changer les puces

Re Alex j'ai modifier mon codepen avec le keyframes.

je te renvoi le lien

mon slideshow

merci pour ton aide.

Up du sujet

hello,
pure css ? -> target
avec un peu de js, ça dépend : avec jquery c plus facile mais plus lourd (en Ko), sans jquery c plus compliqué mais plus lourd (en réflexion ;))

Bonjour Saibe, je ne comprend pas..

L'animé pour qu'il défile c'est ok. Ce que je souhaite c'est que les flêches suivant/precedent et les puces de navigation suivent selon l'image visionnée.

re,
si tu n'es pas trop allergique au js : jssor est super bien...

ce que je te disais en css, la solution est dans les "target" en css3, mais je ne trouve plus le lien css-tricks avec la démo qui va bien....

Re, Dieu existe !

En ajoutant ceci:

<script>
$(document).ready(function() {
  setInterval(slider, 5000);
  var i = 1;

  function slider() {
   i = $('input[name=radio-set]:checked').attr('id');
      //Trying to get the Id of the Control

   i = (parseInt(i.slice(-1)) % 4)+1;
      //Getting number as a part of id then increment 1

   $('#bouton-' + i).prop('checked', true);
      //Checking as above
  }
});
</script>

Sa fonctionne et les puces suivent ! Il me reste plus qu'a ajouter mes figcaptions et essayé de trouver comment ajouter un effect Fade ou glissement.

Mais si vous avez une solution en CSS pour remplacer le JS je suis preneur !

Merci pour tes réponses Saibe !

Voila le codepen :

Slideshow

re,
g po trop aidé mais... merci pour le merci ;)
j'ai po trouvé ce que je cherchais mais voici un exemple pure css utilisant les target.
un autre slide qui a l'air po mal ici mais ça ne répond pas à ta question....
tu as un codepen pour tes dernières modifs ?
pour les effect en css il faut jouer avec transition, il suffit que tu modifies la class des éléments dont tu veux obtenir l'effect....

Je t'ai link le codepen juste au dessus, je viens d'ajouter un hover pour faire apparaitre les fleches quand on passe sur le slideshow.
Mais je cherche sur quel element je dois mettre ma transition pour les images.

Si tu veux aider j'aimerais un code JS pour stoppé le mouvement du slideshow au passage de la souris ahah

sorry, mais ton code n'est pas optimal.... il fonctionne mais..... tu es d'accord avec moi ?
franchement, après avoir galéré comme toi pour créer un code propre, multiplateforme, g opté pour jssor (c le "revolution slider" de wordpress, pour tout dire :) ), il est vraiment excellent : tu auras des rendus responsives de très bonne qualité et une bonne interaction web et mobile (tu peux slide ht/bas, drt/gch, stopper sur le hover...) et c gratos ! pourquoi s'en privé ;)
je ne veux pas te décourager sur le full css (je suis partie prenante) mais pour le moment il manque encore 2 3 règles ;) ça va venir avec le css5 :) il n'y aura plus rien à gérer niveau visuel :)
si tu optes pour jssor, je peux te donner un coup de main pour la mise en oeuvre....

J'aime pas trop prendre du tout fait en fait ^^, tu peux me dire en quoi mon code n'est pas optimal ?
Et tu entends quoi par il n'y auras plus rien a gerer niveau visuel ?

Je jette un oeil a Jssor, sa a l'air pas mal, si j'ai bien compris on peu carrément crée son slider en ligne.

;) tu envoies un interval, du coup malgré le click sur ton bouton le 'update' se lancera...
je peux donc cliquer sur un input et me voir rediriger direct sur le suivant... (pas cool...)
à la limite : écoute le click sur le input pour reset ton interval (voir le stoper...)

ensuite, je n'ai pas d'interaction : je ne peux pas slider...

enfin sur ta/ma dernière question :

il n'y auras plus rien a gerer niveau visuel

libérer le code de tous ces aspects visuels est mon voeux. html et css évoluent.
à quand la balise 'caroussel' ?

J'avoue lol, genre <nav> et boum un menu presque tout fait.

Tu pourrais me diriger sur quelque chose concernant le reset de l'interval s'il te plait ?
Je suis un vrai flan en Javascript :'(

sa dois se faire avec quelque chose comme:

$this.on('mouseenter', function () {
    timer && clearTimeout(timer);
  });

  $this.on('mouseleave', function () {
    next(curr);
  });
});

Mais je comprend presque rien :/

je crois que tout est là ;)

je te rassure, ton code veut rien dire ;)
soit il n'y a pas tout soit j'y connais rien.... c pas du pure js

Ok mdr, merci pour toutes tes réponses réactive en tout cas, c'est vraiment sympa de ta part !
Je vais jeter un oeil au interval que tu ma envoyé.

;) avec plaisir... tiens nous au courant...
fais une tite recherche sur les "gallery jquery" comme celle-là, je suis sur que tu vas trouver ton bonheur et plus encore...

Tu sais je suis têtu ahah.
J'aurais le mérite d'avoir trimé et l'avoir fait tout seul :p

vas-y fais le !!
je ne peux que t'encourager à le faire. c comme ça qu'on apprend...
en plus tu as un bon début de code (en jquery :)...)

full css ça risque d'etre chaud, mais c faisable...

Bin pour lautoplay j'ai pas de soucis avec un keyframes css, par contre les puces et les fleches c'est une autre histoire

je répète : target
le hic, c que tu vas devoir encapsuler des couches de dom pour parvenir à tes fins...

si tu n"es pas limité : js

Dis moi, tu saurais me guider sur quelque chose pour que jintegre un "onmouseover" sur mon slideshow, qui ferait un "clearinterval" ?
Histoire que quand je passe la souris l'animation s'arrête.

Ce serait cool :) un guide, tuto , ou on bout de code avec explication de ce que je devrais modifier pour qu'il colle au miens.
Merci !

;) pas de soucis,
tu veux du js ou du jquery ?
si c du js pure, il faut être famillier des listeners : la doc ici
donc, une fois ton element dom créé tu peux faire ça :

var element = document.querySelector('#id_de_element'); // <-- tu récupères ton élément dom, en jquery c $element = $('#id_de_element')
element.addEventListener('mouseover', faisuntruc); // <-- si mouseover sur element alors faisuntruc, jquery $element.hover(...

// et tu def faisuntruc
function faisuntruc(e){ // <-- function qui récupère un event
    console.log(e); // <-- juste pour un retour de l'event, par ex ton element est definit par e.target
}

je rentre pas dans le bind et la passation de param...
essaie déjà de mettre ça en place...

Ok merci c'est cool, je jette un oeil a sa :)
C'est quoi la différence entre Jquery et JS ?
Le Js que j'ai mis c'est du query non ?

A la place de faisuntruc, je dois ajouter clearinterval?
Je comprend vraiment rien au Js c'est desesperant ><

jquery est un library qui permet de faire du js compatible... en gros, avec jquery tu as des raccourcis pour certaines méthodes sans te soucier de la compatibilité avec les navigateurs. elle a beaucoup évolué, maintenant tu peux faire un peu n'impe avec ;) le revers de médaille c que tu sais plus faire des choses de base en js pure.... à méditer....
en résumé, jquery c une bibliothèque js, qui te permet d'être plus succint (ce qui ne veut pas dire plus efficace)
les nouveaux standards tendent à se rapprocher de jquery mais il reste encore du chemin....

cela dit, oui, ton code c du jquery (on l'utilise avec '$' par convention... mais c pas gagné ;))

et enfin, non ;) faisuntruc est une fonction, tu dois mettre le clearinterval à l'intérieur, cela dit, un clearinterval a besoin d'un id... à réfléchir ;)

Trés bien, bon au moins j'apprend des choses ! ahah
Je vais faire une pause pour aujourd'hui par ce que j'ai la tête gros comme sa ( O . O )
Merci pour toutes tes réponses, rendez vous demain ahah.
Je continuerais mes recherches.

ça roule...
peut être à demain. suis les formations jquery de grafikart, elles sont excellentes (comme toutes ses formations et tuto d'ailleurs :))

Si j'ai la chance de te revoir ici :) en tout cas merci pour tout tes conseils !