AccueilFAQRechercherMembresGroupesS'enregistrerConnexion

Forum de graphisme, codage et game design proposant des tutoriels, astuces, libres services et commandes dans les domaines de l'infographie amateur, de l'intégration web (HTML et CSS essentiellement) ainsi que dans la conception de RPG sur forum.


2 résultats trouvés pour slideshow

Onyx

PA - Couleurs automnes (avec slideshow automatique) - Mar 24 Mar 2015 - 6:36


PA - Couleurs automnes (avec slideshow automatique)


Voici un petit LS de PA que j'ai faite pour la demande de Nyan-cat à partir du code déjà commencé par Nemalus. D'ailleurs, si vous souhaitez mettre mon nom à quelque part pour un crédit, merci de la créditer aussi, elle a fait une bonne partie du travail.

Pour voir l'aperçu normal : cliquez ici.
Pour voir l'aperçu au survol des prédéfinis et/ou du staff et/ou des liens : cliquez ici.

Ce LS est en trois parties.
  • Tout d'abord, nous allons installer la partie HTML de la PA.
  • Puis, nous allons mettre en forme la PA à l'aide du CSS.
  • Enfin, nous verrons comment mettre ajouter ou enlever des images du slideshow automatique.


La PA a une largeur de 820px.

Mettre un crédit vers Never-Utopia est obligatoire.

Vos commentaires et remerciements sont toujours bienvenus ^^


1. Corps de la PA (HTML)


Nous allons commencer par aller dans l'espace de la page d'accueil pour y mettre la partie HTML.

Pour cela, nous allons aller dans :
> PANNEAU D'ADMINISTRATION
> > AFFICHAGE
> > > PAGE D'ACCUEIL
> > > > GÉNÉRALITÉS
> > > > > CONTENU DU MESSAGE

On y met le code suivant et on enregistre :
Code:
<link type="text/css" rel="stylesheet" href="http://fonts.googleapis.com/css?family=Dosis" />                                                           
<div class="fond_PA">
   <div class="nema">
                                                                    <a href="#">Règlement</a>                                                     
   </div>
   <div class="nema">
                                                                    <a href="#">Présentations</a>                                                     
   </div>
   <div class="nema">
                                                                    <a href="#">Partenariats</a>                                                     
   </div>
   <div class="nema">
                                                                    <a href="#">S'inscrire</a>                                                     
   </div>
   <div class="nema">
                                                                    <a href="#">Crédits</a>                                                     
   </div><br />    <br />    <br />                                                     
   <table cellpadding="0" cellspacing="0">
      <tbody>
         <tr>
            <td>
               <div class="contexte_PA">
Contexte - Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed vel congue est, et pharetra augue. Praesent fermentum vulputate elementum. Ut vehicula gravida bibendum. Pellentesque pretium ante purus, non aliquam urna posuere sit amet. Suspendisse potenti. Suspendisse tortor dolor, viverra sed enim vitae, vulputate ornare lectus. Aenean euismod nibh nec urna pretium consectetur. <a href="#">lire plus</a>                                                                                 
               </div>
            </td>
            <td>
               <div id="slideshow">
                  <div class="container">
                     <div class="slider">
                              <img src="http://placehold.it/380x145" alt="" style="width: 380px; height: 145px;" /><img src="http://placehold.it/380x145" alt="" style="width: 380px; height: 145px;" /><img src="http://placehold.it/380x145" alt="" style="width: 380px; height: 145px;" /><img src="http://placehold.it/380x145" alt="" style="width: 380px; height: 145px;" />       
                     </div>
                  </div>
               </div>
            </td>
         </tr>
      </tbody>
   </table>
   <table cellspacing="0" cellpadding="0">
      <tbody>
         <tr>
            <td valign="top" style="width: 320px;" align="center">
                                                                                                   <span class="nema_title">Staff</span>                                                             
               <div style="width: 320px; height: 75px; overflow: hidden; background-image:url(http://placehold.it/320x75); margin-bottom: 8px;">
                  <div class="stafef">
                     <div style="color: #DEDDD0; font-size: 11px; text-align: center; font-family: calibri; line-height: 100%; padding-top: 10px; font-weight: 700;">
                                                                                                                            Nom Prénom<br />                                <a href="#"><span style="color: rgb(213, 199, 180);">Contact</span></a>                                - <a href="#"><span style="color: rgb(213, 199, 180);">Profil</span></a><br />                                Poste occupé                                                                                               
                     </div>
                  </div>
               </div>
               <div style="width: 320px; height: 75px; overflow: hidden; background-image:url(http://placehold.it/320x75); margin-bottom: 8px;">
                  <div class="stafef">
                     <div style="color: #DEDDD0; font-size: 11px; text-align: center; font-family: calibri; line-height: 100%; padding-top: 10px; font-weight: 700;">
                                                                                                                            Nom Prénom<br />                                <a href="#"><span style="color: rgb(213, 199, 180);">Contact</span></a>                                - <a href="#"><span style="color: rgb(213, 199, 180);">Profil</span></a><br />                                Poste occupé                                                                                               
                     </div>
                  </div>
               </div>
               <div style="width: 100px; height: 100px; overflow: hidden; background-image:url(http://placehold.it/100x100); margin-right: 5px; display: inline-block;">
                  <div class="stafefico" style="display: inline-block;">
                     <div style="color: #DEDDD0; font-size: 11px; text-align: center; font-family: calibri; line-height: 100%; padding-top: 10px; font-weight: 700;">
                                                                                                                            Nom Prénom<br />                                <a href="#"><span style="color: rgb(213, 199, 180);">Contact</span></a>                                - <a href="#"><span style="color: rgb(213, 199, 180);">Profil</span></a><br />                                Poste occupé                                                                                               
                     </div>
                  </div>
               </div>
               <div style="width: 100px; height: 100px; overflow: hidden; background-image:url(http://placehold.it/100x100); margin-right: 5px; display: inline-block;">
                  <div class="stafefico" style="display: inline-block;">
                     <div style="color: #DEDDD0; font-size: 11px; text-align: center; font-family: calibri; line-height: 100%; padding-top: 10px; font-weight: 700;">
                                                                                                                            Nom Prénom<br />                                <a href="#"><span style="color: rgb(213, 199, 180);">Contact</span></a>                                - <a href="#"><span style="color: rgb(213, 199, 180);">Profil</span></a><br />                                Poste occupé                                                                                               
                     </div>
                  </div>
               </div>
               <div style="width: 100px; height: 100px; overflow: hidden; background-image:url(http://placehold.it/100x100); margin: 0px; display: inline-block;">
                  <div class="stafefico" style="display: inline-block;">
                     <div style="color: #DEDDD0; font-size: 11px; text-align: center; font-family: calibri; line-height: 100%; padding-top: 10px; font-weight: 700;">
                                                                                                                            Nom Prénom<br />                                <a href="#"><span style="color: rgb(213, 199, 180);">Contact</span></a>                                - <a href="#"><span style="color: rgb(213, 199, 180);">Profil</span></a><br />                                Poste occupé                                                                                               
                     </div>
                  </div>
               </div>
            </td>
            <td valign="top" style="padding-left: 10px; padding-top: 10px; width: 180px;">
               <div style="background: #EECFB7; color :#BC7349; width:150px; height: 270px; overflow: auto; text-align: justify; padding: 15px;">
                  <div style="text-align: justify">
                                                                                                                     Nouvelles - Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed vel congue est, et pharetra augue. Praesent fermentum vulputate elementum. Ut vehicula gravida bibendum. Pellentesque pretium ante purus, non aliquam urna posuere sit amet. Suspendisse potenti. Suspendisse tortor dolor, viverra sed enim vitae, vulputate ornare lectus. Aenean euismod nibh nec urna pretium consectetur.                                                                                         
                  </div>
               </div>
            </td>
            <td valign="top" style="padding-top: 10px; padding-left: 10px; width: 266px;" align="center">
                                                                                                         <a href="#" class="nema_2">Lien 1</a>                                          <a href="#" class="nema_2">Lien 2</a>                                                                                                                            <a class="nema_2" href="#">Lien 3</a>                                                                                                                            <a class="nema_2" href="#">Lien 4</a>      <a class="nema_2" href="#">Lien 5</a>    <a class="nema_2" href="#">Lien 6</a>                                                                                                                                                                  <a style="margin-bottom: 15px;" class="nema_2" href="#">Lien 7</a>                               
               <div style="width: 60px; height: 100px; overflow: hidden; background-image:url(http://placehold.it/60x100); margin-right: 4px; display: inline-block;">
                  <div class="predef" style="display: inline-block;">
                     <div style="color: #DEDDD0; font-size: 11px; text-align: center; font-family: calibri; line-height: 100%; padding-top: 10px; font-weight: 700;">
                                                                                                                            <a href="#">Nom Prénom</a>  <br />  <br />                              <span style="color: rgb(213, 199, 180);">Hors-la-loi</span>                                                     
                     </div>
                  </div>
               </div>
               <div style="width: 60px; height: 100px; overflow: hidden; background-image:url(http://placehold.it/60x100); margin-right: 4px; display: inline-block;">
                  <div class="predef" style="display: inline-block;">
                     <div style="color: #DEDDD0; font-size: 11px; text-align: center; font-family: calibri; line-height: 100%; padding-top: 10px; font-weight: 700;">
                                                                                                                            <a href="#">Nom Prénom</a>  <br /><br />                                <span style="color: rgb(213, 199, 180);">Hors-la-loi</span>                                                     
                     </div>
                  </div>
               </div>
               <div style="width: 60px; height: 100px; overflow: hidden; background-image:url(http://placehold.it/60x100); margin-right: 4px; display: inline-block;">
                  <div class="predef" style="display: inline-block;">
                     <div style="color: #DEDDD0; font-size: 11px; text-align: center; font-family: calibri; line-height: 100%; padding-top: 10px; font-weight: 700;">
                                                                                                                            <a href="#">Nom Prénom</a>  <br />  <br />                            <span style="color: rgb(213, 199, 180);">Hors-la-loi</span>                                                     
                     </div>
                  </div>
               </div>
               <div style="width: 60px; height: 100px; overflow: hidden; background-image:url(http://placehold.it/60x100); display: inline-block;">
                  <div class="predef" style="display: inline-block;">
                     <div style="color: #DEDDD0; font-size: 11px; text-align: center; font-family: calibri; line-height: 100%; padding-top: 10px; font-weight: 700;">
                                                                                                                            <a href="#">Nom Prénom</a>  <br />  <br />                            <span style="color: rgb(213, 199, 180);">Hors-la-loi</span>                                                     
                     </div>
                  </div>
               </div>
            </td>
         </tr>
      </tbody>
   </table>
</div>





2. Mise en forme (CSS)


Si vous regardez votre PA, vous voyez sans doute que ce n'est pas très esthétique pour le moment. Du coup, nous allons mettre en forme notre PA à l'aide du CSS.

Pour cela, nous allons aller dans :
> PANNEAU D'ADMINISTRATION
> > AFFICHAGE
> > > IMAGES ET COULEURS
> > > > COULEURS
> > > > > FEUILLE DE STYLE CSS

Puis, nous allons ajouter le CSS suivant :
Code:
/* --------------------------------- PA --------------------------------- */

/* slideshow */
#slideshow {
  position:relative;
  width:380px;
  height:145px;
}

/* gestion des dimensions et débordement du conteneur */
#slideshow .container {
  position:relative;
  width:380px;
  height:145px;
  overflow:hidden;
}

/* le conteneur des slides */
#slideshow .slider {
  position:absolute;
  left:0;
  top:0;
  width:400%;
  height:145px;
  animation:slider 16s infinite;
  -webkit-animation:slider 16s infinite;
}

/* Fonction animation */
@keyframes slider {
  0%,20%,100% {left:0}
  25%,45% {left:-100%}
  50%,70% {left:-200%}
  75%,95% { left:-300%}
}
@-webkit-keyframes slider {
  0%,20%,100% {left:0}
  25%,45% {left:-100%}
  50%,70% {left:-200%}
  75%,95% { left:-300%}
}

/* Fond de la PA */
.fond_PA {
  padding:10px;
  background-color:#E5B994;
  width:800px;
  position:relative;
}

/* Contexte */
.contexte_PA {
  margin-right:10px;
  background-color:#EECFB7;
  width:370px;
  height:115px;
  padding:15px;
  color:#BC7349;
  text-align:justify;
  font-size:12px;
  overflow:auto;
}

/* Liens */
.nema {
  height:40px;
  width:150px;
  display:inline-block;
}

.nema a {
  display:inline-block;
  background-color:#80696C;
  color:#fff;
  font-family:'Dosis',sans-serif;
  font-size:25px;
  height:40px;
  text-align:center;
  width:145px;
  transition:all 1s ease;
  -webkit-transition:all 1s ease;
}

.nema a:hover {
  background-color:#3E2428;
  color:#fff;
}

.nema_2 {
  height:22px;
  width:266px;
  display:block;
  margin-bottom:5px;
  background-color:#80696C;
  color:#fff!important;
  font-family:'Dosis',sans-serif;
  font-size:16px;
  text-align:center;
  transition:all 1s ease;
  -webkit-transition:all 1s ease;
}

.nema_2:hover {
  background-color:#3E2428;
  color:#fff;
}

/*Titre Staff*/
.nema_title {
  display:inline-block;
  color:#fff;
  font-family:'Dosis',sans-serif;
  font-size:25px;
  height:30px;
  text-align:center;
  margin-bottom:5px;
  margin-top:10px;
}

/* Effets staff + predef */
.stafef {
  width:320px;
  height:75px;
  background:#3E2428;
  opacity:0;
  transition:all 1s ease-in-out;
  -webkit-transition:all 1s ease-in-out;
}

.stafef:hover {
  opacity:1;
  -webkit-transform:rotate(-360deg);
  transform:rotate(-360deg);
}

.stafefico {
  width:100px;
  height:100px;
  display:inherit;
  background:#3E2428;
  opacity:0;
  transition:all 1s ease-in-out;
  -webkit-transition:all 1s ease-in-out;
}

.stafefico:hover {
  opacity:1;
  transform:rotate(-360deg);
  -webkit-transform:rotate(-360deg);
}

.predef {
  width:60px;
  height:100px;
  display:inherit;
  background:#3E2428;
  opacity:0;
  transition:all 1s ease-in-out;
  -webkit-transition:all 1s ease-in-out;
}

.predef:hover {
  opacity:1;
  transform:rotate(-360deg);
  -webkit-transform:rotate(-360deg);
}

/* --------------------------------- FIN PA --------------------------------- */


Important : Vous devez cocher "non" à l'option de CSS "Optimiser votre CSS". Sinon, le Slideshow ne fonctionnera pas.





3. Modifier le Slideshow


Commençons par la partie HTML. Dans la partie HTML, vous avez ceci :
Code:
<div id="slideshow">
                  <div class="container">
                    <div class="slider">
                              <img src="http://placehold.it/380x145" alt="" style="width: 380px; height: 145px;" /><img src="http://placehold.it/380x145" alt="" style="width: 380px; height: 145px;" /><img src="http://placehold.it/380x145" alt="" style="width: 380px; height: 145px;" /><img src="http://placehold.it/380x145" alt="" style="width: 380px; height: 145px;" />       
                    </div>
                  </div>
              </div>


Les divs servent à cacher le reste des images du slideshow pour qu'on n'en voit qu'une seule à la fois. La partie qui nous intéresse, c'est celle-ci :
Code:
 <img src="http://placehold.it/380x145" alt="" style="width: 380px; height: 145px;" /><img src="http://placehold.it/380x145" alt="" style="width: 380px; height: 145px;" /><img src="http://placehold.it/380x145" alt="" style="width: 380px; height: 145px;" /><img src="http://placehold.it/380x145" alt="" style="width: 380px; height: 145px;" />


Il y a 4 images. Vous pouvez enlever une image, en ajouter une et/ou changer l'image en mettant l'url de votre nouvelle image à la place de 'http://placehold.it/380x145'.

C'était tout pour la partie HTML u_u




Pour la partie CSS, c'est un peu plus difficile. Il faut aller dans le CSS et retrouver ceci :
Code:
/* slideshow */
#slideshow {
  position:relative;
  width:380px;
  height:145px;
}

/* gestion des dimensions et débordement du conteneur */
#slideshow .container {
  position:relative;
  width:380px;
  height:145px;
  overflow:hidden;
}

/* le conteneur des slides */
#slideshow .slider {
  position:absolute;
  left:0;
  top:0;
  width:400%;
  height:145px;
  animation:slider 16s infinite;
  -webkit-animation:slider 16s infinite;
}

/* Fonction animation */
@keyframes slider {
  0%,20%,100% {left:0}
  25%,45% {left:-100%}
  50%,70% {left:-200%}
  75%,95% { left:-300%}
}
@-webkit-keyframes slider {
  0%,20%,100% {left:0}
  25%,45% {left:-100%}
  50%,70% {left:-200%}
  75%,95% { left:-300%}
}


Dans "#slideshow .slider", il y a ceci :
Code:
width:400%;


Pourquoi "400%"?
Parce qu'il y a 4 images. S'il y en avait 5, il faudrait changer cela pour 500%. S'il y avait 3 images, il faudrait changer cela pour 300%.

Ensuite, toujours dans "#slideshow .slider", il y a ceci :
Code:
animation:slider 16s infinite;
  -webkit-animation:slider 16s infinite;


À quoi ça sert?
Cela sert à indiquer qu'il y a l'animation "slider" (qu'on va voir ensuite) qui s'effectue pendant une durée totale de 16 secondes et qui se répète à l'infinie. Le "16s" indique donc la durée totale de l'animation du slideshow. Si vous voulez que cela soit plus rapide, il vous suffit de diminuer cette valeur. Si vous voulez que ce soit plus lent, vous devez augmenter cette valeur.




On continue avec "@keyframes slider" qui détaille l'animation nommée "slider" de notre slideshow. À savoir que "@-webkit-keyframes slider" doit toujours être pareil à "@keyframes slider". Bref, voilà à quoi cela ressemble :
Code:
@keyframes slider {
  0%,20%,100% {left:0}
  25%,45% {left:-100%}
  50%,70% {left:-200%}
  75%,95% { left:-300%}
}


La ligne "0%,20%,100% {left:0}" indique que de 0% de l'animation à 20% de l'animation, c'est la première image puisque le "left:0" est à "0". D'ailleurs, cela indique aussi que qu'à la fin de l'animation (100%), cela revient à la première image.

La ligne "25%,45% {left:-100%}" indique que de 25% de l'animation à 45% de l'animation, c'est la deuxième image puisque le "left:-100%" est à "-100%". Le "-100%" indique que pour cette durée, le slideshow est déplacé de 1 image vers la gauche.

La ligne "50%,70% {left:-200%}" indique que de 50% de l'animation à 70% de l'animation, c'est la troisième image puisque le "left:-200%" est à "-200%". Le "-200%" indique que pour cette durée, le slideshow est déplacé de 2 images vers la gauche.

La ligne "75%,95% { left:-300%}" indique que de 75% de l'animation à 95% de l'animation, c'est la quatrième image puisque le "left:-300%" est à "-300%". Le "-300%" indique que pour cette durée, le slideshow est déplacé de 3 image vers la gauche.


Je suis pas sûr de comprendre... Comment ça marche si on veut rajouter des images?

Eh bien, il y a toujours une certaine structure à suivre. Donc s'il y a 3 images, il y aura au total 3 lignes. S'il y a 5 images, ce sera 5 lignes. Chaque ligne (sauf la première) est structurée de la même façon :
Code:
A%,B% { left:C%}


Le A et B, c'est le début et la fin d'une pause dans l'animation. Cela veut dire que de A à B, il n'y aura pas de mouvement. Par exemple, si mon animation fait au total 100 secondes, que mon A est 20% et mon B est 30%, cela voudra dire que de la 20ème seconde à la 30ème seconde, il n'y aura pas de mouvement.

Le C nous indique le positionnement des images du slideshow pendant la période de temps entre A et B.
Vous vous souvenez du "width" de la class "#slideshow .slider"? C'était en %. On avait dit qu'on mettait 100% x le nombre d'images. Si on avait 5 images, cela voulait dire 500%. Selon cette logique, la largeur totale de la zone est égale à 500% et chaque image équivaut à 100%.
Revenons maintenant à notre C. Disons que C serait "-200%". On vient de dire que chaque image égal "100%". Donc si on est à "-200%", cela veut dire qu'il y a 2 images qui sont cachées sur la gauche. Du coup, le slideshow montre notre troisième image!

Donc si on résume, la durée totale de l'animation étant 100 secondes, A étant 20%, B étant 30% et C étant -200%, cela veut dire que de la 20ème seconde à la 30ème seconde, il y a deux images de cachées sur la gauche et on voit la troisième image!

Pas simple ><

Donc, tout en suivant cette structure, il faut s'assurer de mettre un temps d'apparition (une ligne) pour chaque image. Donc si j'ai 5 images, je mets la première de 0 à 20, la deuxième de 20 à 40, la troisième de 40 à 60, la quatrième de 60 à 80 et la cinquième de 80 à 100.


Mais il n'y a pas de transition entre les images!

Effectivement. Pour mettre une transition, il faut laisser un peu de temps entre les images. Si la première image se termine à 20 et que la deuxième se commence à 20, il n'y a pas de temps pour qu'on voit la transition!

Donc pour laisser une transition, je ferais plutôt ainsi :
Si j'ai 5 images, je mets la première de 0 à 15, la deuxième de 20 à 35, la troisième de 40 à 55, la quatrième de 60 à 75 et la cinquième de 80 à 95.


Bon ok, ça marche... Mais tout à l'heure, tu avais dis que c'était un peu plus spécial pour la première ligne, non?

Oui! Pour qu'on puisse retourner à la première image lorsqu'on a terminé de passer toutes les images, il faut rajouter un petit quelque chose :
Code:
A%,B%,D% { left:C%}


Le D, c'est toujours 100%. Cela veut dire qu'à la fin, on retourne à la première image ^^

Voilà, c'est tout, si vous avez suivis jusqu'ici, vous devriez vous débrouiller ^^




C'est tout! Pour les intéressés, je me suis servie de ce tuto pour faire le slideshow :
http://www.creativejuiz.fr/blog/tutoriels/css3-creer-slideshow-automatique-controlable-transition

Si jamais vous avez des problèmes avec ce LS, n'hésitez pas à passer dans "Un problème avec mon code" ou "Personnalisations".

À plus !

NyoTheNeko

Slideshow full CSS3 sans :target ! - Sam 12 Juil 2014 - 17:27



Slideshow full CSS3





   
Ceci est un tuto, optimal pour une PA, crée suite à la Demande d'SatoruMasao, ici.
Notez, en tant que petit disclaimer, que je ne sors pas tout ça de mon chapeau. Vous trouverez en lien le slideshow que j'ai prit en base, qui montrait comment ne pas utiliser les :target mais plutôt les input et label (ce qui évite de faire comme une "nouvelle page" et permet de cliquer sur le bouton de "précédent" du navigateur pour vraiment aller sur la page précédente et non pas l'id du slide précédent.


Toutes versions ▬ CSS3 & HTML5 ▬ Ce que ça donne


   
Notez que je vais donc vous montrer comment faire autant le slideshow simple, que les personnages avec la petite bulle qui apparait au passage de la souris! Cependant, vous n'êtes pas obliger de mettre forcément des render de personnages et des petits bulles, mais pouvez très bien remplir d'autres choses! En gros, cela dépend fortement de votre imagination et de vos compétences. Le cas échéant, la section des problèmes est là pour vous aider!




Le slideshow de base


Avant de commencer à s'amuser à mettre les petites bulles d'informations sur les personnages ou même quoi que ce soit d'autres, il faudrait tout d'abord commencer à créer le slideshow de base, c'est à dire, le conteneur, les slides (de simples div pour l'instant) et les flèches avec l'animation qui devrait y avoir.

Je vais aller étape par étape, mais tout de même montrer tout le HTML avant de montrer tout le CSS. Cependant, il est à noter que sans le CSS, le HTML risque d'être très moche (et surtout de ne rien faire!).

Le HTML


Alors, tout d'abord, commençons par le commencement!
Nous allons créer notre toute première div qui va contenir tous le slideshow. Vous pouvez l’appeler comme vous le voulez, mais ici, elle sera appelée "slideshow". Elle contiendra alors tout ce qui a un rapport avec le slider: les slides, les boutons pour aller d'un slide à l'autre, etc. Donc la voici:

Code:
<div id="slideshow">
</div>


C'est très simple n'est-ce pas?

Maintenant, nous allons rajouter des balises input de type radio. Ces balises, ce sont normalement ce qu'on utilise dans le formulaires, pour choisir une option ou une autre. Un exemple simple est sur ForumActif, plus précisément sur NeverUtopia: quand vous créez un sujet, sous "Icône de sujet" vous avez à côté de chaque icône un petit rond qu vous pouvez cocher. Eh bien c'est ça les input de type radio d'un formulaire!
Mais pourquoi utiliser ça, mais surtout, à quoi ça sert? Eh bien plutôt que d'utiliser des liens et d'utiliser ensuite le pseudo-élément :target, ici nous allons utiliser les input et leur pseudo-élément :checked, qui regarde si un input est coché ou non. Cela permet donc de ne pas ouvrir un "nouveau lien" à chaque slide, mais bel et bien de toujours avoir le même lien dans la barre de navigation.

Nous allons donc mettre autant d'input que nous voulons de slides, ici 5:

Code:

<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" />


   
Si vous ne connaissez pas la balise input, laissez-moi vous expliquer ce qu'est chacun des éléments ici présent. Premièrement, le nom (name)  permet simplement de... donner un nom à l'élément. Normalement, on tente d'en donner un unique à chacun, notamment lorsqu'on  utilise le JavaScript ou alors que l'on utilise ça vraiment comme un formulaire, et non pas pour un slideshow comme ici. Cependant, ici ce n'est pas important et tous nos input s'appellent slideshow.
Ensuite, on a donné un id à chacun de nos éléments, qui correspond au combientième slide on est. Cela est important pour le CSS, pour savoir que input a été coché, alors que le name n'est pas utilisé pour ça.
Le type est ensuite, eh bien, le type de l'input. Ici on a radio, c'est à dire que seul un input peut être coché à la fois, mais il existe beaucoup de différents types d'input (vu que c'est un formulaire: il y a pour du texte, un choix multiple, une barre avec plusieurs choix de mots, etc). Ici cependant, on a besoin du type radio pour notre slideshow.
Enfin, vous aurez pu remarquer que le premier input a le mot clé "checked" ajouté dans la balise. Cela veut dire que par défaut, c'est l'input slide1 qui est coché et donc, celle-ci qui sera affichée à l'ouverture de la page. Cela peut très bien changer! Vous pourriez choisir d'avoir le troisième slide d'affiché à l'ouverture ou même le dernier! En gros, c'est le input qui est checked qui sera vu en premier par les gens naviguant sur votre site!


Pour rester dans le thème des input, parlons tout de suite comment et pourquoi ils seront utilisé: les flèches qui "contrôlent" le slideshow, et décident quel input est checked ou non. Pour cela, nous utilisons des labels.
On va d'ailleurs mettre ces labels dans un id que vous pouvez nommer comme vous le voulez mais que je nomme "controls". Cela nous permettra alors de placer les flèches et de faire certains effets dessus dans le CSS, mais aussi de les sélectionner correctement grâce au CSS (dont je parlerais plus tard)

Code:
<div id="controls">
 <label for="slide1"></label>
 <label for="slide2"></label>
 <label for="slide3"></label>
 <label for="slide4"></label>
 <label for="slide5"></label>
</div>


Comme vous pouvez le constater, chaque slide a son propre label, et c'est l'attribut for qui dit pour quel label est chaque input. En effet, si vous cliquez sur un label qui est for un certain input, alors cet input sera coché. Je suppose donc que vous comprenez à présent un peu mieux comment ça marche: on clique sur une flèche qui est en fait un label pour un certain input d'un slide, et ce slide sera alors coché, ce qui permettra, grâce au CSS, à aller au slide correspondant!
Remarquez cependant que le for doit avoir le même nom que l'id de l'input correspondant.

Donc jusqu'à présent, on a ça:

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="controls">
 <label for="slide1"></label>
 <label for="slide2"></label>
 <label for="slide3"></label>
 <label for="slide4"></label>
 <label for="slide5"></label>
 </div>
</div>


Ce n'est pour l'instant pas grand chose, cependant: c'est le plus important. en effet, bien que vous n'avez pas encore les slides à proprement parler, vous avez déjà la plus grosse partir du HTML, et ce qui va faire marcher tout le slideshow. Cependant, vu qu'un slideshow n'est rien sans slides, il nous faut les ajouter!

Nous allons donc créer une div qui va contenir tous nos slides, que l'on mettra entre les inputs et les controls (l'importance de ceci est expliquée plus tard) qui sera de la taille de tous les slides additionnés (que je nommerais inner), mais également un autre div, qui contiendra inner et qui permettra de cacher les slides en trop (à l'aide d'un overflow: hidden) de telle sorte à afficher un seul slide à la fois. Je le nommerais slides.
Nous avons donc ceci:

Code:
<div id="slides">
 <div class="inner">
 </div>
</div>



Je vais alors ajouter mes cinq slides dans inner, en leur donnant à chacun la classe a_slide (que vous pouvez appeler comme vous le voulez) qui me permettra de mettre la taille aux slides, mais aussi d'appliquer les effets nécessaires. J'ai donc ceci:

Code:
<div id="slides">
 <div class="inner">
 <div class="a_slide">
 </div>
 <div class="a_slide">
 </div>
 <div class="a_slide">
 </div>
 <div class="a_slide">
 </div>
 <div class="a_slide">
 </div>
 </div>
</div>



À présent, pour que l'on puisse tout de suite tester les slides, j'ai mit dans chaque slide une image (le render) avec une class selon où je les veux positionnés, entourés d'un lien. En effet, je veux alterner entre le render à gauche et le render à droite, cependant, vous pouvez créer autan de positions que vous voulez (au milieu, un peu à droit,e un peu à gauche, etc), u même placer à l'aide d'id plutôt que de classe chaque image indépendamment. De même, vous pouvez mettre autre chose dans chaque slide qu'une image!

Code:
<div id="slides">
 <div class="inner">
 <div class="a_slide">
 <a href="#"><img class="left" src="http://i.imgur.com/SgVARN7.png" /></a>
 </div>
 <div class="a_slide">
 <a href="#"><img class="right" src="http://i.imgur.com/To2uhmJ.png" /></a>
 </div>
 <div class="a_slide">
 <a href="#"><img class="left" src="http://i.imgur.com/LOhfzmf.png" /></a>
 </div>
 <div class="a_slide">
 <a href="#"><img class="right" src="http://i.imgur.com/CIw0pQ9.png" /></a>
 </div>
 <div class="a_slide">
 <a href="#"><img class="left" src="http://www.renders-graphiques.fr/image/upload/normal/Kakuzu-1.png" /></a>
 </div>
 </div>
</div>



Et voilà! Le HTML est terminé! En résumé, nous avons ceci (HTML complet pour l'étape du slideshow simple):

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">
 <a href="#"><img class="left" src="http://i.imgur.com/SgVARN7.png" /></a>
 </div>
  <div class="a_slide">
 <a href="#"><img class="right" src="http://i.imgur.com/To2uhmJ.png" /></a>
 </div>
  <div class="a_slide">
 <a href="#"><img class="left" src="http://i.imgur.com/LOhfzmf.png" /></a>
 </div>
 <div class="a_slide">
  <a href="#"><img class="right" src="http://i.imgur.com/CIw0pQ9.png" /></a>
  </div>
  <div class="a_slide">
  <a href="#"><img class="left" src="http://www.renders-graphiques.fr/image/upload/normal/Kakuzu-1.png" /></a>
  </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


Si vous envoyez à présent le HTML sans le CSS sur votre PA, vous verrez très vite que ça ne ressemble pas à grand chose... En effet, vu que nous avons que des class et des id, les div n'ont aucune hauteur ou largeur et donc, rien ne s'affiche. Enfin, mis à part les input (donc les boutons de type radio) dont le premier est coché... Et comme vous le voyez dans le résultat final, ces derniers ne sont même pas présents! Mais pas de panique: le CSS3 et sa magie va bientôt opérer, et vous aurez bientôt un superbe slideshow!

Cependant, nous avons beaucoup de choses à voir, alors là aussi je vais utiliser quelques titres pour les séparer un peu mieux!

Mise en place du bloc du slideshow


Tout d'abord, nous allons masquer les input, c'est à dire, faire en sorte qu'ils n'apparaissent pas. En effet vu que pour l'instant c'est la seule chose qui apparaisse mais que c'est la seule chose qu'on ne veut PAS voir apparaître, il suffit de faire en srte qu'ils ne s'affichent pas à l'aide d'un display: none;
Nous avons donc ceci:

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



Maintenant que nous avons un "tableau blanc" sur lequel travailler, il est donc temps de commencer par le commencement: la balise qui entoure notre slideshow, à laquelle j'avais donné plus tôt l'id "slideshow". Nous allons donc tout de suite lui donner une largeur et une hauteur, mais aussi un position relative. C'est important, notamment pour positionner les flèches, ou tout autre élément que vous voudriez jouter aux slideshow (autre que les slides et les flèches).
Nous avons donc ceci:

Code:
/* Création du slideshow (contour) */
#slideshow {
  position: relative;
  width: 800px;
  height: 400px;
}



Maintenant, dans l'ordre logique des choses, je vais m'occuper des slides. Je vais donc commencer par la div à laquelle j'ai donné plus tôt l'id "slides", qui me permettra d'afficher un seul slide à la fois. Je vais donc lui donner la taille d'un seul slide (qui pour moi est la même taille que le slideshow en entier), le positionner de manière absolue tout en haut du slideshow (avec une position absolute) et un overflow: hidden, ce qui va me permettre de cacher tout ce qui dépasse de là, et donc, vous l'aurez compris, de cacher toutes les autres slides. En plus de cela, vu que mon slideshow aura une image de fond fixe et que seul des render vont passer par-dessus, j'ai mit une image de fond.

Code:
/* Conteneur de inner et de tous les slides, permet d'afficher un seul slide à la fois. */
#slides {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 1;
  width: 800px;
  height: 400px;
  background-image: url('http://animeipics.files.wordpress.com/2014/01/konoha-thrids-era.jpg');
  background-size: 800px;
  background-position: center center;
  overflow: hidden;
}

   
Le background-size: 800px; me permet de faire en sorte que mon image de fond ait une largeur appropriée et le background-position lui donne la bonne position. Ici, le background-size a la largeur qui est fixée mais la hauteur s'adapte automatiquement (proportionnellement à l'image de base). Si j'avais écrit Si j'avais écris background-size: auto 400px; ce serait la hauteur qui se serait fixée à 400px et la largeur qui se serait automatiquement mise à la bonne proportion. On peut aussi fixer les deux attributs, pour fixer la largeur (toujours en premier) et la hateur, comme ceci: background-size: 800px 400px;.
Le z-index est également important. En effet, les flèches sont dans un div plus tard, c'est à dire que normalement, il est "plus haut" sur le z-index que les slides. Il faut donc changer cela, et on va donner à controls un z-index plus petit que slides!


Maintenant que nous avons ceci, nous allons regarder la première div fille de slides, qui n'est autre que la div à la class "inner". C'est donc lui qui va avoir tous nos slides. Je lui donne donc la bonne taille (donc pour qu'il contienne 5 slides). Rien de spécial donc... mis à part donner une largeur!

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


Ici, on met une largeur en pourcentage plutôt qu'en px. En effet, vu que le div d'id slides nous donne déjà la largeur d'un slide, et que donc cela correspond à 100%, il faut mettre le nombre de slides * 100 comme nombre. Donc ici, 5 slides sont 500%, 6 slides serait 600%, 4 slides serait 400%, etc. C'est important, plus tard, pour déplacer les slides. On pourrait très bien le faire en px, mais cela demande un peu plus de calcul tout de même Wink


On a donc les deux conteneurs des slides, mais maintenant, il faudrait mettre en forme les slides eux-même! On va donc leur donner une taille (la même que #slides), mais également une position relative (pour pouvoir positionner les choses en absolu dedans, notamment les images et, bien plus tard, les bulles, que l'on verra dans la seconde partie) et enfin un float: left;

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


Le float: left permet de faire en sorte que tous les slides se mette les uns à côtés des autres sans marge. En effet, les div étant normalement des éléments bloc, ils retournent à la ligne avant ET après, or ici, nous ne voulons pas que ce soit le cas!
Il n'y aura d'ailleurs aucun problème au niveau du float, vu que le conteneur a un overflow: hidden. Pour plus d'informations, je vous invite à lire l'annexe sur les float que j'ai écris moi-même dans le cursus Wink


Et c'est presque fini! en effet, à présent, il y a le code pour le déplacement des slideshow à faire! Et là, on en aura terminé pour le bloc "brut" du slideshow!
Voici donc la partie la plus importante du code, qui est aussi présente sur le slider dont je me suis inspirée pour faire celui-ci:

Code:
/* 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%; }


OMFG!? C'est quoi ce checked? Et ce ~ là, ça veut dire quoi? AAAAAAH.
Pas de panique! O__O J'explique tout en-dessous!


Le pseudo-élément :checked
C'est ce qui va me permettre de voir quel input a été coché. J'en ai vaguement parlé plus tôt. Comme vous avez pu le voir dans le CSS, on regarde quel input est coché: celui de l'id slide 1, slide2, slide3, slide4 ou slide5. En effet, selon lequel est coché, on voudrait que inner soit décalé vers la gauche de plusieurs pourcent (c'est pourquoi aussi c'était important d'avoir en pourcentages la largeur d'inner). Pour afficher le premier slide c'est de 0, le second c'est de 100&, le troisème de 200%, etc. Notez qu'il faudrait en rajouter si on a plus de slides, tout comme il faut rajouter des input. Enfin, j'espère que le tuto est assez claire pour que vous ayez compris ça de par vous-même, mais j'aime autant préciser!
Donc en gros, ce pseudo-élément sert à ça: regarder lequel est coché et faire des choses en conséquence!


Le sélécteur ~
Ce sélécteur signifique "l'élément frère le plus proche". C'est à dire, dans notre code, le frère nommé "#slides .inner" le plus proche du input nommé #slideX qui est checked.
Mais qu'est un élément frère? Eh bien dans notre code par exemple, le div d'id "slideshow" a comme élément fils les input, le div d'id slides et enfin le div d'id controls. Cela implique donc que tous les trois sont des "frères" (ou sœurs).

Exemple:
Code:
<div id="un">
 <div id="deux">
 </div>
</div>

Ici, un est l'élément père de deux, et deux est l'élément filsè d eun.

Code:
<div id="un">
</div>
<div id="deux">
</div>


Ici, un est deux sont des éléments frères.

En somme, si votre code est bien indenté, il est facile de voir quels éléments sont des frères/sœurs, et lesquels sont des parents/enfants les uns des autres. En effet, les frères/sœurs seront sur le même niveau, et les parents/enfants seront sur des niveaux différents!


Je pense donc qu'à présent vous comprenez le code! Si tel input est checked, on change la marge à gauche de l’élément frère #slides .inner

Vous pouvez à présent envoyer votre code et voir... une image fixe! Et oui! Il n'y a pas encore les contrôles, donc les flèches, qui nous permettront de cocher les différents input! Du coup, eh bien... rien ne bouge! Il va donc falloir lire la suite pour mettre en place les flèches et, donc, ce qui nous permettra de contrôler le slideshow et de passer d'une slide à l'autre!

Mise en place des contrôles (flèches)


Les codes pour les contrôles est en réalité vraiment très "simple" dans le sens où, il n' a pas beaucoup de lignes, cependant, il peut être difficile à comprendre! Cependant, pas de panique: je suis là pour ça!

Commençons par le plus simple, qui est, le placement des flèches. Comme vous pouvez le voir, les flèches dépassent du slideshow. Ce n'est pas un problème, et d'ailleurs, vous pouvez bien sûr changer ça selon comment vous voulez avoir votre slideshow (avec les position: absolute de #slides et de #controls).
Quoiqu'il en soit, à l'aide du div d'id "controls" on va positionner les flèches au milieu de notre slideshow (à l'aide du top: 45%), et lui donner comme hauteur la taille des images que l'on va utiliser pour nos flèches. En plus de cela, il faut lui donner un z-index de 0 (ou en tout cas un z-index plus petit que celui de #slides) pour qu'ils soit derrière slides.
Notez cependant que si vous voulez que les flèches soient par-dessus votre slide, il va falloir changer ça, et même peut-être, avoir à placer chaque flèche individuellement! (car il faudrait que le z-index soit plus grand que celui des slides pour que les flèches apparaissent et soient cliquables, cependant, sur toute la longueur et hauteur de controls, les slides ne seraient plus cliquables (et n'auraient plus d'effet au passage de la souris).
Bref, en gros, voici le code:
[/b]
Code:
/* Mise ne place de l'élément contenant les flèches */
#controls {
  position: absolute;
  top: 45%;
  left: 0;
  z-index: 0;
  width: 100%;
  height: 50px;
}



Assez simple n'est-ce pas? Mais pour l'instant, on a toujours pas les flèches! En effet, nous voulons que les flèches s'affichent toujours, mais soient par rapport au bon label, c'est à dire, que lorsque le slide1 est coché, qu'il y ait la flèche de droite qui aille vers le slide2, et la flèche de gauche qui aille vers le slide5 (le dernier slide). Du coup, il faut une manière de cacher TOUS les labels, sauf le bon label correspondant au slide précédent et au slide suivant (et les bons qui plus est). Il faut donc tout d'abord mettre ce code:

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


Donc ici, on cache tous les label et on leur donne la taille de l'image. MAintenant, passons au code compliqué!


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;
  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;
}


AAAAAAH!
Non mais faut apprendre à se calmer hein O__O

En réalité, ce code est très simple une fois qu'on comprend à quoi sert la pseudo-classe :nth-child(X). En effet, nth-child désigne le nième enfant du type de la classe/objet qui est mit avant. Donc label:nth-child signifie le n-ième enfant qui est un label, et dans ce cas, se trouve dans l'id #controls. Le chiffre en parenthèse, est donc ce fameux nième enfant: label:nth-child(4) signifie le 4ième enfant de type label. C'est assez simple non? Il suffit donc de regarder dans votre HTML et compter à quel enfant vous voulez aller.

Vous comprenez alors que lorsque slide1 est coché (donc le pseudo-élément :checked), on veut que la flèche next soit le label pour le slide2, qui est dans notre HTML le 2ième enfant de type label dans #controls. De même, on veut que notre flèche previous nous envoie vers le slide5, qui est dans notre HTML le 5ième enfant de type label dans #controls!  

Pour ce qui est du reste du code, le float nous permet de positionner les flèches tout à droite et tout à gauche du bloc, la marge nous permet de les mettre en dehors du slideshow, le display_block nous permet d'annuler le display: none du précédent code, de telle sorte à ce que seul le label que l'on veut s'affiche et enfin, le background est bien sûr l'image de la flpche, respectivement de celle vers la droite et celle vers la gauche.


Nous avons donc à présent les flèches et le slide en pleine état de marche, cependant, sans les animations, eh bien, c'est un peu moche... Mais pas de soucis, les animations arrivent dans la partie suivante!

Animer les slides et effets sur les flèches


Nous allons tout d'abord faire l'animation sur les flches. Tout simplement parce que, eh bien, c'est le plus simple! En effet, comme vous pouvez le voir, le seul effet sur mes flèches est un changement d'opacité. Très simple donc, et un changement qu'il suffit d'appliquer sur le CSS #controls label en ajoutant de l'opacité, et en faisant un changement au passage d ela souris grâce à la pseudo-classe :hover!
Je vous donne donc le code, qui n'a vraiment rien de compliqué !

Code:
/* 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;
}



Voilà donc qui est fait pour les flèches! Maintenant, il est temps de passer au slides, pour qu'ils se déplacent de façon fluide. Le code est assez court (deux lignes), mais vraiment très condensé: je vous explique cependant tout!

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



Tout d'abord, le  -webkit-transform: translateZ(0); n'a vraiment pas d'autre fonction que d'assurer que l'animation se fait sans à-coups dans Chrome. En effet, si vous avez ce navigateur, vous verrez la différence si vous le mettez ou non. Ca ne change rien en soit, mais c'est plus joli, et surtout, uniquement pour Chrome qu'il y a cette ligne, vraiment xD
Vous voyez que la prochaine est une transition. Si vous avez un peu suivvi la plupart des Ls ici ou plusieurs Tutos, vous savez que cette ligne permet justement d'avoir l'animation, et donc un truc fluide. Cependant, vous voyez aussi que c'est une fonction bien compliquée que l'on utilise comme fonction de transition (cubic-bezier avec pleins de nombres dans ses parenthèses, contrairement aux habitues linear, ease-in, ease-out, ease-in-out et ease!). Cependant, pour déjà comprendre les deux premier termes de cette ligne: all signifie que tout ce qui peut être animé le sera. Ici, pour nous, c'est simplement le déplacement de inner. Ensuite, les 800ms est le temps durant lequel va durer l'animation. C'est 0.8 secondes en somme.

Revenons donc à cubic-bezier. En réalité, ease, ease-in, etc sont toutes des courbes de Bézier qui déterminent la transition. Et de même, chacun d'entre eux pourraient être écrits sous la forme de cubic-bezier (par exemple, ease pourrait s'écrire cubic-bezier(0.25, 0.1, 0.25, 1.0)). Donc, en gros, c'es une fonction de transition tout à fait normale, sauf que nous avons nous-même crée la façon dont l'animation va se jouer. En gros, c'est purement mathématique.
Vous avez cet outil qui vous permet de créer vos propres courbez de Bézier et les utiliser dans vos transitions, qui permet également de comparer avec les transitions "communes" ease, lineat, ease-in, ease-out et ease-in-out. Vous pouvez donc voir que notre courbe est très similaire au ease-in-out, bien que légèrement plus "rapide" dans sa transition.
Si vous voulez en apprendre plus sur la syntaxe de la fonction cubic-bezier, je vous invite à lire la partie de ce tuto qui en parle, qui est assez complet. Pour nous, ce n'est pas vraiment le sujet, on ne fait que l'utiliser Wink


Et maintenant, tout est bon! Nous n'avons plus qu'à placer les images correctement (comme je l'ai prévu dès le départ à gauche et à droite de chaque slide) et on en aura fini de cette première partie pour la création du slideshow!

Mise en place des images


Maintenant que nous avons tout le slideshow, il est temps de placer les images au bon endroit, comme j'avais dit lorsque j'ai écrit le HTML, j'ai prévu d'en mettre certaines à gauches et certaines à droites.
Je vais tout d'abord commencer par mettre toutes les images en position absolue. Je vais aussi faire en sorte qu'elle ne dépassent pas la hauteur du slideshow, donc les redimensionner à une hauteur de 400px.

Code:
/* Placer toutes les images en absolu. */
.a_slide img {
  position: absolute;
  display: block;
  height: 400px;
}



Maintenant, on va placer toutes les images avec la classe left à gauche

Code:
/* On place les images à gauche */
.a_slide img.left {
  bottom: 0px;
  left: 0px;
}



Et toutes les images avec la classe right à droite!

Code:
/* On place les images à droite */
.a_slide img.right {
  bottom: 0px;
  right: 0px;
}



Vous pourriez très bien utiliser les bottom, top, left et right pour placer les images ailleurs, et donc avoir plus de classes ou même des id pour chaque image si chacune doit être mise à un endroit spécifique! En somme, vous pouvez utiliser la position absolue comme vous le voulez pour placer les images!

Maintenant, il est temps de passer à la deuxième étape si vous voulez placer des bulles d’informations au passage de la souris sur les images!


Revenir en haut

La date/heure actuelle est Jeu 16 Aoû 2018 - 8:34