[Marie] Le contenu de la PA défilant avec des flêches

Bonjour N.U. !

En ce moment, la mode sur les PA, c'est d'avoir un beau graphisme et une seule case au milieu, avec des flèches (ou autres images) à gauche et à droite permettant de faire défiler le contenu (un onglet avec le contexte, un pr le staff, etc.).

Je ne sais pas s'il s'agit d'un système d'onglet ou d'un slide (dans les deux cas je quête désespéramment en vain un truc simple qui fonctionne... J'ai essayé des tas de choses ça ne ressemble jamais à ce que je recherche).

Pour résumer: une PA que je ferais moi même en terme de graphisme évidemment, dans laquelle on trouve une case dont le contenu change avec l'action des flèches de droite à gauche.

Quelqu'un peut m'aider ?
Merci beaucoup et joyeuses fêtes !

Up :)

Up...

up

Salut!

C'est toujours d'actualité ici? Merci de donner des nouvelles d'ici 10 jours pour que le sujet ne soit pas archivé é_è

PS : Essaie de faire un up minimum une fois par semaine pour que ta demande soit plus visible et qu'on ne pense pas qu'elle soit abandonnée

UP

up

UP

Bonsoir!

Si je peux me permettre, il nous faudrait au moins les dimensions au moins approximatif... Sinon j'ai trouve ceci sur internet dont je pourrai m'en servir pour t'aider:


C'est ce que tu voudrais en gros? Bon ici c'est des image mais après je peux essayer de t'aider pour du contenu...

Bonjour, merci de t'intéresser à ma demande !

Alors en soi pour les dimensions, je peux gérer il n'y a pas d'importance du tout.

Je sais coder, mes div etc. c'est juste le système défilant que je n'arrive pas à faire

Oui c'est ce codage là que j'aimerai bien avoir (au lieu du texte "next", "prec", je mettrai des flêches (images PNG).

C'est vraiment juste le système de défilement avec les flèches qu'il me manque donc pour la dimension, etc. je n'ai pas besoin tu peux faire ce que tu veux je saurai bidouiller tout le reste sans problème :) (ou si tu en as vraiment besoin: une grande DIV de 800 px de large, sur 600 de hauteur, avec la fameuse div à l'intérieur au milieu avec le système de défilement par flêche, de 500 de large et 400 de hauteur).

Voilà merci :)

Coucou!

Alors, je me suis intéresser de prêt à ton sujet parce que c'était ce que je cherchais aussi. Donc, je voulais faire deux pierres d'un coup. Du coup après une journée entière à travailler sur ce silder; j'y suis presque arriver. Je n'ai pas trouver un moyen de faire des flèches (encore). Ne m'en veux pas, il y a 4 ans , j'étais codeuse ici mais j'ai du arrêter donc, niveau code, je suis encore légèrement à la ramasse. Je m'en sors mieux que ce que je pensais mais c'est pas encore ça.

Bref, puisque nous cherchions tout les deux la même chose mais pour différentes utilités, je suis arriver à ça:

http://thefallofolympus2.forumactif.com/h5-annexe#article4

Clique sur les pastilles blanches. :) Si ça ne t'intéresse pas, je vais chercher d'avantage, ce n'est pas impossible. :)

C'est pas mal du tout ! Si tu me passes le code, je peux peut-être essayer avec une image pour les flèches (si jamais toi aussi tu souhaitais mettre une image plus que les ronds ?).
Après ce n'est pas tout à fait pareil, j'aurai préféré un seul bouton pour défiler à chaque fois (genre une flèche à gauche, une à droite) plus que les 4 ronds mais si on ne se trouve pas autre chose ça fera l'affaire en attendant éventuellement x)

Coucou!

Je crois que je vais visiter plus souvent Never...

https://www.never-utopia.com/t50204-slideshow-full-css3-sans-target

Comment se faire *censure* pour que dalle! Bon bah voilà en faite... On a pas à se casser la tête tout y est plus qu'à suivre se joli tuto! ><

Personnellement chez moi ça ne fonctionne pas du tout

Chez moi ça fonctionne pourtant...


Tu me montres ce que tu as fait stp?

Zut du coup je l'ai retiré x_x
Bah en fait ça fonctionnait pas du tout j'avais pas les flêches défilantes et tout... (j'ai essayé le deuxième: pour mettre du contenu, pas celui avec les images perso avec bulles là).

Tu as mis quoi toi pour que ça fonctionne du coup ? O.o

Hellow ~

Marie, tu as vu le message de Kiki?

Ha oups, non je n'avais pas vu.

Kiki, donne-moi les dimensions de ta PA, stp. J'ai juste à faire la base et tu fera le reste si tu veux.

J'ai que suivi le tuto. ^^

800 de large / 480 de hauteur (mais peu importe ça je peux modifier hein ^^ c'est vraiment juste le slide que j'galère x_x )
Merci ! :)

Je te fais ça cet aprem. :)

Je te fais ça cet aprem. :)



Genre ça que tu veux: http://thefallofolympus2.forumactif.com/h9-slidershowtest

EDIT: Pardon ! pardon !Pardon PARDON!!! Pour le double poste... ><"

(Cheshire : c'est pas grave ça arrive :3)

Oui à peu près ! (genre ça en plus petit et dans une grosse case de 800*480 pixel mais ça devrait être facile à ajouter à l'intérieur je pense ^^)

Coucou!


https://www.never-utopia.com/t62591-repos-forcee-malgres-moi#953203

Désolée ^^'

EDIT:

Le html:

Code:

<div id="slideshow">
    <input checked name="slideshow" id="slide1" type="radio" />
    <input name="slideshow" id="slide2" type="radio" />
    <input name="slideshow" id="slide3" type="radio" />
    <input name="slideshow" id="slide4" type="radio" />
    <input name="slideshow" id="slide5" type="radio" />
    <div id="slides">
    <div class="inner">
    <div class="a_slide">
    Paphius quin etiam et Cornelius senatores, ambo venenorum artibus pravis se polluisse confessi, eodem pronuntiante Maximino sunt interfecti. pari sorte etiam procurator monetae extinctus est. Sericum enim et Asbolium supra dictos, quoniam cum hortaretur passim nominare, quos vellent, adiecta religione firmarat, nullum igni vel ferro se puniri iussurum, plumbi validis ictibus interemit. et post hoe flammis Campensem aruspicem dedit, in negotio eius nullo sacramento constrictus.
    </div>
      <div class="a_slide">
    Rogatus ad ultimum admissusque in consistorium ambage nulla praegressa inconsiderate et leviter proficiscere inquit ut praeceptum est, Caesar sciens quod si cessaveris, et tuas et palatii tui auferri iubebo prope diem annonas. hocque solo contumaciter dicto subiratus abscessit nec in conspectum eius postea venit saepius arcessitus.
    </div>
      <div class="a_slide">
    Sin autem ad adulescentiam perduxissent, dirimi tamen interdum contentione vel uxoriae condicionis vel commodi alicuius, quod idem adipisci uterque non posset. Quod si qui longius in amicitia provecti essent, tamen saepe labefactari, si in honoris contentionem incidissent; pestem enim nullam maiorem esse amicitiis quam in plerisque pecuniae cupiditatem, in optimis quibusque honoris certamen et gloriae; ex quo inimicitias maximas saepe inter amicissimos exstitisse.
    </div>
    <div class="a_slide">
      Proinde concepta rabie saeviore, quam desperatio incendebat et fames, amplificatis viribus ardore incohibili in excidium urbium matris Seleuciae efferebantur, quam comes tuebatur Castricius tresque legiones bellicis sudoribus induratae.
      </div>
      <div class="a_slide">
      Quam ob rem ut ii qui superiores sunt submittere se debent in amicitia, sic quodam modo inferiores extollere. Sunt enim quidam qui molestas amicitias faciunt, cum ipsi se contemni putant; quod non fere contingit nisi iis qui etiam contemnendos se arbitrantur; qui hac opinione non modo verbis sed etiam opere levandi sunt.
      </div>
      </div>
    </div>
    <div id="controls">
    <label for="slide1"></label>
    <label for="slide2"></label>
    <label for="slide3"></label>
    <label for="slide4"></label>
    <label for="slide5"></label>
    </div>                                 
    </div>

Le CSS:

Code:

/* Permet de cacher les input (apparait sous forme radio sinon) */
    #slideshow input {
      display: none;
    }
 

#slideshow {
  position: relative;
  width: 200px;
  height: 200px;
}

#slides {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 1;
  width: 200px;
  height: 200px;
  background: white;
  background-size: 200px;
  background-position: center center;
  overflow: hidden;
}

    /* Conteneur de tous les slides */
    #slides .inner {
      width: 500%;
    }

    /* Mise en forme des slides */
    #slides .a_slide {
      position: relative;
      width: 200px;
      height: 200px;
      float: left;
    }

    /* Déplacement des slides */
    #slide1:checked ~ #slides .inner { margin-left:0; }
    #slide2:checked ~ #slides .inner { margin-left:-100%; }
    #slide3:checked ~ #slides .inner { margin-left:-200%; }
    #slide4:checked ~ #slides .inner { margin-left:-300%; }
    #slide5:checked ~ #slides .inner { margin-left:-400%; }

#controls {
  position: absolute;
  top: 45%;
  left: 0;
  z-index: 0;
  width: 100%;
  height: 50px;
}

    /* On met les labels à la bonne taille et on les cache */
    #controls label {
      display: none;
      width: 20px;
      height: 20px;
    }

    /* Mise en place de la flèche vers le slide suivant */
    #slide1:checked ~ #controls label:nth-child(2),
    #slide2:checked ~ #controls label:nth-child(3),
    #slide3:checked ~ #controls label:nth-child(4),
    #slide4:checked ~ #controls label:nth-child(5),
    #slide5:checked ~ #controls label:nth-child(1) {
      background: url('http://csscience.com/responsiveslidercss3/next.png') no-repeat;
      float: right;
      margin: 0 -70px 0 0;
      display: block;
    }

    /* Mise en place de la flèche vers le slide précédent */
    #slide1:checked ~ #controls label:nth-child(5),
    #slide2:checked ~ #controls label:nth-child(1),
    #slide3:checked ~ #controls label:nth-child(2),
    #slide4:checked ~ #controls label:nth-child(3),
    #slide5:checked ~ #controls label:nth-child(4) {
      background: url('http://csscience.com/responsiveslidercss3/prev.png') no-repeat;
      float: left;
      margin: 0 0 0 -70px;
      display: block;
    }

    /* On met les labels à la bonne taille et on les cache */
    #controls label {
      display: none;
      width: 50px;
      height: 50px;
      opacity: 0.3;
      transition: all ease-out 0.2s;
    }

    /* Effet au passage de la souris sur les flèches */
    #controls label:hover {
      opacity: 0.8;
      transition: all ease-out 0.2s;
    }

    /* Animation slides */
    #slides .inner {
      -webkit-transform: translateZ(0);
      transition: all 800ms cubic-bezier(0.770, 0.000, 0.175, 1.000);
    }

Le CSS a changer pour le contenu du slides sont que ces CSS:

Code:

/* Mise en forme des slides */
    #slides .a_slide {
      position: relative;
      width: 200px; /*** Largeur du slides****/
      height: 200px; /*** Hauteur du slides****/
      float: left;
    }

#slideshow {
  position: relative;
  width: 200px; /*** Largeur du slides****/
  height: 200px; /*** Hauteur du slides****/
}

#slides {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 1;
  width: 200px; /*** Largeur du slides****/
  height:200 px /*** Hauteur du slides****/
  background: white;
  background-size: 200px; /*** La taille du fond ***/
  background-position: center center;
  overflow: hidden;
}


Voilà, le reste tu dois rien toucher sinon tu met le slide en vrille. Tu peux toucher aussi ceci :

Code:


  /* Mise en place de la flèche vers le slide suivant */
    #slide1:checked ~ #controls label:nth-child(2),
    #slide2:checked ~ #controls label:nth-child(3),
    #slide3:checked ~ #controls label:nth-child(4),
    #slide4:checked ~ #controls label:nth-child(5),
    #slide5:checked ~ #controls label:nth-child(1) {
      background: url('http://csscience.com/responsiveslidercss3/next.png') no-repeat; /*** L'image de la flèches droite ***/
      float: right;
      margin: 0 -70px 0 0;
      display: block;
    }

    /* Mise en place de la flèche vers le slide précédent */
    #slide1:checked ~ #controls label:nth-child(5),
    #slide2:checked ~ #controls label:nth-child(1),
    #slide3:checked ~ #controls label:nth-child(2),
    #slide4:checked ~ #controls label:nth-child(3),
    #slide5:checked ~ #controls label:nth-child(4) {
      background: url('http://csscience.com/responsiveslidercss3/prev.png') no-repeat; /**** L'image de la flèche gauche ***/
      float: left;
      margin: 0 0 0 -70px;
      display: block;
    }

En gros le background, tu peux y mettre tes propres images.

Voilà, j'espère t'avoir aider. ^^

Coucou Kiki85

Est ce que tu as vu la réponse de Marie ?

Hello ! Vraiment vraiment désolé je suis pire que surchargé ces temps-ci je n'ai pas mis le nez dedans depuis un bon mois j'suis overbooké x_x Merci Marie, je regarde ça dès que j'ai une heure devant moi !