Mercii :)

Coucou Elsa ! :)

Je viens de voir ton petit sujet et ça m'a interpelé, en effet, je me demandais depuis peu comment faire un slideshow uniquement en html & css, bon ok, ça requiert du HTML5 et du CSS3, mais bon, on va pas ronchonner quand on peut faire sans javascript, non ? :)

Du coup, j'ai trouvé un petit programme qui propose de faire ça sur le web, et j'ai donc généré un code qui était énormmmmmme (car toutes les fonctionnalités que tu ne veux pas, on les intègre quand même) et on les "display:none;" bref, on ne les affiche pas au résultat, mais elles sont bien existantes...



Et donc voilà ce que ça donne, en vrai en livvvvvve :



Pour les codes, vu que c'est vraiment un cas par cas (avant que j'en fasse un tuto pour que d'autres puissent l'utiliser a bon escient, et sans erreur, le voici :

Le Code CSS

(PA > Affichage > Couleurs > Feuille de Style)

Code:

/* ------------- General ------------- */

      .csslider1 {
        display: inline-block;
        position: relative;
        max-width: 180px;
       
        width: 100%;
        margin-top: 0px;
      }

      .csslider1 > .cs_anchor {
        display: none;
      }

      .csslider1 > ul {
        position: relative;
        z-index: 1;
        font-size: 0;
        line-height: 0;
        margin: 0 auto;
        padding: 0;
       
        overflow: hidden;
        white-space: nowrap;
      }
      .csslider1 > ul > div {
        width: 100%;
        visibility: hidden;
        font-size: 0px;
        line-height: 0;
      }
      .csslider1 > ul > li.img img {
        width: 100%;
        height: 175px;
      }

      .csslider1 > ul > li {
        position: relative;
        display: inline-block;
        width: 100%;
        height: 100%;
        overflow: hidden;
        vertical-align: top;
        -webkit-box-sizing: border-box;
        -moz-box-sizing: border-box;
        box-sizing: border-box;
      }

      /* ------------- General Bullets ------------- */
      .csslider1 > .cs_bullets {
        position: absolute;
        left: 0;
        width: 100%;
        z-index: 6;
        text-align: center;
      }
      .csslider1 > .cs_bullets > div {
        margin-left: -50%;
        width: 100%;
      }
      .csslider1 > .cs_bullets > label {
        position: relative;
        display: inline-block;
        cursor: pointer;
      }

      /* ------------- /General Bullets ------------- */

      /* ------------- Effect ------------- */
      /* = disposition des images au depart */

      .csslider1 > ul > li.num0 {
        left: 0%;
      }
      .csslider1 > ul > li.num1 {
        left: 100%;
      }
      .csslider1 > ul > li.num2 {
        left: 200%;
      }
      
      /* ANIMATION SI CLIC SUR BOUTONS */

      .csslider1 > #cs_slide1_0:checked ~ ul > li,
      .csslider1 > #cs_pause1_0:checked ~ ul > li {
        -webkit-transform: translateX(0%);
        transform: translateX(0%);
      }
      .csslider1 > #cs_slide1_1:checked ~ ul > li,
      .csslider1 > #cs_pause1_1:checked ~ ul > li {
        -webkit-transform: translateX(-100%);
        transform: translateX(-100%);
      }
      .csslider1 > #cs_slide1_2:checked ~ ul > li,
      .csslider1 > #cs_pause1_2:checked ~ ul > li {
        -webkit-transform: translateX(-200%);
        transform: translateX(-200%);
      }

      .csslider1 > ul > li {
        position: absolute;
        top: 0;
        left: 0;
        display: inline-block;
        opacity: 1;
      }

      /* ANIMATIONS CSS3 QUI SLIDE */

      @-webkit-keyframes slide {
        0%, 25%  { -webkit-transform: translateX(0%); transform: translateX(0%); }
        33.333333333333336%, 58.333333333333336%  { -webkit-transform: translateX(-100%); transform: translateX(-100%); }
        66.66666666666667%, 91.66666666666667%  { -webkit-transform: translateX(-200%); transform: translateX(-200%); }
       
      }
      @keyframes slide {
        0%, 25%  { -webkit-transform: translateX(0%); transform: translateX(0%); }
        33.333333333333336%, 58.333333333333336%  { -webkit-transform: translateX(-100%); transform: translateX(-100%); }
        66.66666666666667%, 91.66666666666667%  { -webkit-transform: translateX(-200%); transform: translateX(-200%); }
       
      }

      .csslider1  > #cs_play1:checked ~ ul > li {
        -webkit-animation: slide 12000ms infinite;
        animation: slide 12000ms infinite;
      }


      .csslider1 > #cs_play1:checked ~ ul > li,
      .csslider1 > .pause:checked ~ ul > li {
        -webkit-transition: none;
        transition: none;
      }


      /* ------------- /Effect ------------- */

      /* ------------- Template Bullets ------------- */
      .csslider1 > .cs_bullets {
        bottom: 5px;
        margin-bottom: 5px;
      }
      .csslider1 > .cs_bullets > label {
        border-radius: 50%;
        margin: 0 5px;
        padding: 9px;
        background: white; /* = COULEUR DES BULLES */
      }

      .csslider1 > .cs_bullets > label > .cs_point {
        position: absolute;
        left: 50%;
        top: 50%;
        margin-left: -2px;
        margin-top: -2px;
        background: transparent;
        border-radius: 50%;
        padding: 2px;
      }

      .csslider1 > .cs_bullets > label:hover > .cs_point,

      .csslider1 > #cs_slide1_0:checked ~ .cs_bullets > label.num0 > .cs_point,
      .csslider1 > #cs_pause1_0:checked ~ .cs_bullets > label.num0 > .cs_point,
      .csslider1 > #cs_slide1_1:checked ~ .cs_bullets > label.num1 > .cs_point,
      .csslider1 > #cs_pause1_1:checked ~ .cs_bullets > label.num1 > .cs_point,
      .csslider1 > #cs_slide1_2:checked ~ .cs_bullets > label.num2 > .cs_point,
      .csslider1 > #cs_pause1_2:checked ~ .cs_bullets > label.num2 > .cs_point {
       
        /* !!!!!!!!!!!!!!!!!!!!!
            COULEUR PETITE BILLE
          !!!!!!!!!!!!!!!!!!!!!  */

        background: red;
      }

      @keyframes bullet {
        0%, 33.32333333333334%  { background: red; }  /* COULEUR PETITE BILLE */

        33.333333333333336%, 100% { background: transparent; }
      }
      @-webkit-keyframes bullet {
        0%, 33.32333333333334%  { background: red; } /* COULEUR PETITE BILLE */
        33.333333333333336%, 100% { background: transparent; }
      }

      .csslider1 > #cs_play1:checked ~ .cs_bullets > label.num0 > .cs_point,
      .csslider1 > #cs_pause1:checked ~ .cs_bullets > label.num0 > .cs_point {
        -webkit-animation: bullet 12000ms infinite 0ms; /* 4S = 4000ms *3 car 3 images */
        animation: bullet 12000ms infinite 0ms;
      }
      .csslider1 > #cs_play1:checked ~ .cs_bullets > label.num1 > .cs_point,
      .csslider1 > #cs_pause1:checked ~ .cs_bullets > label.num1 > .cs_point {
        -webkit-animation: bullet 12000ms infinite 4000ms;
        animation: bullet 12000ms infinite 4000ms;
      }
      .csslider1 > #cs_play1:checked ~ .cs_bullets > label.num2 > .cs_point,
      .csslider1 > #cs_pause1:checked ~ .cs_bullets > label.num2 > .cs_point {
        -webkit-animation: bullet 12000ms infinite 8000ms;
        animation: bullet 12000ms infinite 8000ms;
      }

      .csslider1 > #cs_play1:checked ~ .cs_bullets > label > .cs_point,
      .csslider1 > .pause:checked ~ .cs_bullets > label > .cs_point {
        -webkit-transition: none;
        transition: none;
      }

      .csslider1 > .slide:checked ~ .cs_bullets > label > .cs_point,
      .csslider1 > .pause:checked ~ .cs_bullets > label > .cs_point {
        -webkit-animation: none;
        animation: none;
      }

Le Code HTML

(à insérer là où tu souhaites avoir ton slideshow)

Code:

<div class='csslider1 autoplay '>
      <input name="cs_anchor1" id='cs_slide1_0' type="radio" class='cs_anchor slide'  autocomplete="off">
      <input name="cs_anchor1" id='cs_slide1_1' type="radio" class='cs_anchor slide'  autocomplete="off">
      <input name="cs_anchor1" id='cs_slide1_2' type="radio" class='cs_anchor slide'  autocomplete="off">
      <input name="cs_anchor1" id='cs_play1' type="radio" class='cs_anchor' checked autocomplete="off">
      <input name="cs_anchor1" id='cs_pause1_0' type="radio" class='cs_anchor pause' autocomplete="off">
      <input name="cs_anchor1" id='cs_pause1_1' type="radio" class='cs_anchor pause' autocomplete="off">
      <input name="cs_anchor1" id='cs_pause1_2' type="radio" class='cs_anchor pause' autocomplete="off">
      
      <ul>
         <div>
            <img src="http://i39.servimg.com/u/f39/19/09/37/43/va9aqz10.png" style="width: 100%;">
         </div>
         <li class='num0 img'>
            <img src='http://i39.servimg.com/u/f39/19/09/37/43/va9aqz10.png' alt='VA9Aqze' title='VA9Aqze' />
         </li>
         <li class='num1 img'>
            <img src='http://i39.servimg.com/u/f39/19/09/37/43/lcivbn10.png' alt='LCIVbNj' title='LCIVbNj' />
         </li>
         <li class='num2 img'>
            <img src='http://i39.servimg.com/u/f39/19/09/37/43/r84qkb10.png' alt='r84qkby' title='r84qkby' />
         </li>
      
      </ul>
      
      <div class='cs_bullets'>
         <label class='num0' for='cs_slide1_0'>
            <span class='cs_point'></span>
            
         </label>
         <label class='num1' for='cs_slide1_1'>
            <span class='cs_point'></span>
            
         </label>
         <label class='num2' for='cs_slide1_2'>
            <span class='cs_point'></span>
            
         </label>
      </div>
      
   </div>

N'hésite pas à me demander si tu ne comprends pas des choses ou autres, je te mets dans mon prochain message (car plus de place assez dans celui-ci) les zones de code "CSS" que tu peux modifier pour styliser... (couleur des petits points par exemple)

Coucou,
Merci beaucoup c'est exactement ça :)
Par contre je veux bien savoir comment mettre 4 images et réduire le diamètre des billes blanche (ou augmentation de la rouge). Sinon tout est super *.*

Coucou petit up.
Merci

Bonsoir c'est toujours d’actualité :)

Hello hello :)

Je me tape l'incrustation pour la modification qui est rapide

elsa2607 a écrit:réduire le diamètre des billes blanche (ou augmentation de la rouge).

Pour réduire le diamètre des billes blanches, il faut modifier le CSS à cet endroit là :

Code:

.csslider1 > .cs_bullets > label {
    border-radius: 50%;
    margin: 0 5px;
    padding: 9px;
    background: white; /* = COULEUR DES BULLES */
}

La propriété qui nous intéresse est le padding dont il faut réduire la largeur.

Si je met 5px, ça donne quelque chose comme ceci :


Pour rajouter la 4ème slide, l'explication est plus longue, moi je vais dodo ♥

Bonne année ! Je te souhaite plein de bonheur <3

Merci beaucoup à toi aussi

Bonsoir c'est toujours d’actualité :)

Salut!

C'est toujours d'actualité? Qu'est-ce qu'il reste à faire exactement?

Coucou
Hum ajouter une 4ème image

Coucou Elsa! :)

Je reviens vers toi, alors je voudrais savoir si tu as vraiment besoin d'avoir les bulles et un "contrôle" sur le slideshow, ou bien est-ce que ça peut être de simple images qui défilent?

Comme je te l'avais dis, je suis passé via un générateur pour faire le slideshow car je ne savais pas vraiment comment imaginer le système pour les bulles, et j'ai tenté de "retoucher" le code pour qu'il fonctionne avec une quatrième image, mais c'est chaud.

Du coup, je peux te proposer : soit de te régénérer un code comme le précédent pour 4 images (je passe via le programme, et je nettoie le code pour garder que le nécessaire utile), soit de te créer un slideshow automatique sans bulles... (et ce sera + facile pour toi de le modifier si plus ou moins d'images). :)

Dis-moi quoi

Salut Elsa,
Tu as vu le dernier message d'Henry ?

Coucou,
Je découvre seulement ^^
Eh bien je pense que ej vais en rester là avec 3 bulles car le générateur me demande les ID de CB ...
et comme c'était les bulles qui m’intéressaient je vais me contenter de ça :)
Merci en tout cas

Salut!

Par conséquent, est-ce que la demande est complétée? Merci de donner des nouvelles d'ici 10 jours si tu ne veux pas que la demande soit archivée

Pas de nouvelles, alors j'archive ~