Créer un slider en pure CSS3 / HTML5 pour WordPress

HTML5 et CSS3 ne sont pas encore tout à fait valides et restent encore en cours de transition. Néanmoins, je vous propose aujourd'hui un tutoriel, dont le concept nous vient de Geoffrey Crofte => CreativeJuiz - Html5 & Css3 : Slideshow) permettant de créer un slider (diaporama) en HTML5 / CSS3 et ce, sans JavaScript. Au risque de me répéter, le slider présenté ici, n'est proposé qu'a titre expérimental afin de vous montrer les possibilités du CSS3  /HTML5. Il n'est pas conseillé de l'utiliser dans un cadre de développement cross-browser.

Démonstration en ligne / sources

#1 – Le pattern HTML5

Ce que j’appelle le pattern, c’est tout simplement ce dont nous aurons besoin pour que notre slider fonctionne. C’est un peu la maquette HTML5 de notre slider, sans y intégrer de boucle PHP ou de query_post…

En HTML5, la plupart de vos <div> vont pouvoir être remplacé par la balise <section> – les <div> étant réservées à des blocs indéfinissables du point de vue sémantique. Ensuite, nous mettrons nos slides dans une balise <figure> qui permet de mettre en exergue l’utilisation d’une image et de sa légende (ici, le contenu abrégé) ; toujours d’un point de vue référencement.

<section id="slideshow">
    <div class="container">
        <div class="c_slider"></div>
        <div class="slider">
            <a href="#"><figure>
                <img src="http://fakeimg.pl/640x310/" alt="" width="640" height="310" />
                <figcaption>Fake image de 640x310px. Slide 1</figcaption>
            </figure></a>
            <a href="#"><figure>
                <img src="http://fakeimg.pl/640x310/" alt="" width="640" height="310" />
                <figcaption>Fake image de 640x310px. Slide 2</figcaption>
            </figure></a>
            <a href="#"><figure>
                <img src="http://fakeimg.pl/640x310/" alt="" width="640" height="310" />
                <figcaption>Fake image de 640x310px. Slide 3</figcaption>
            </figure></a>
            <a href="#"><figure>
                <img src="http://fakeimg.pl/640x310/" alt="" width="640" height="310" />
                <figcaption>Fake image de 640x310px. Slide 4</figcaption>
            </figure></a>
        </div>
    </div>
</section>

Voici la base de notre slider. J’utilise le site Fakeimg pour générer de fausses images, mais libre à vous de mettre vos images pour autant qu’elle respecte le format. Vous remarquerez que pour une question d’optimisation, je n’utilise pas de liste. Tout simplement, parce que ça ne me sert à rien… A ce code, nous ajouterons une timeline.

<section id="slideshow">
    <div class="container">
        <div class="c_slider"></div>
        <div class="slider">
            <a href="#"><figure>
                <img src="http://fakeimg.pl/640x310/" alt="" width="640" height="310" />
                <figcaption>Fake image de 640x310px. Slide 1</figcaption>
            </figure></a><!--
            --><a href="#"><figure>
                <img src="http://fakeimg.pl/640x310/" alt="" width="640" height="310" />
                <figcaption>Fake image de 640x310px. Slide 2</figcaption>
            </figure></a><!--
            --><a href="#"><figure>
                <img src="http://fakeimg.pl/640x310/" alt="" width="640" height="310" />
                <figcaption>Fake image de 640x310px. Slide 3</figcaption>
            </figure></a><!--
            --><a href="#"><figure>
                <img src="http://fakeimg.pl/640x310/" alt="" width="640" height="310" />
                <figcaption>Fake image de 640x310px. Slide 4</figcaption>
            </figure></a>
        </div>
    </div>
    <span id="timeline"></span>
</section>

Astuce : afin d’éviter tout espace non désirable entre les images, je vous conseille de commenter vos indentations.

#2 – Le CSS3

Premièrement, concentrons-nous sur la mise en forme de ce slider :

#slideshow {
    position: relative;
    width: 640px;
    height: 310px;
    padding: 15px;
    border: 1px solid #ddd;
    margin: 0 auto 2em;
    background: #FFF;
    background: -webkit-linear-gradient(#FFF, #FFF 20%, #EEE 80%, #DDD);
    background: -moz-linear-gradient(#FFF, #FFF 20%, #EEE 80%, #DDD);
    background: -ms-linear-gradient(#FFF, #FFF 20%, #EEE 80%, #DDD);
    background: -o-linear-gradient(#FFF, #FFF 20%, #EEE 80%, #DDD);
    background: linear-gradient(#FFF, #FFF 20%, #EEE 80%, #DDD);
    /*-- CSS3 --*/
    -webkit-border-radius: 2px 2px 2px 2px;
    -moz-border-radius: 2px 2px 2px 2px;
    border-radius: 2px 2px 2px 2px;

    -webkit-box-shadow: 0 0 3px rgba(0,0,0, 0.2);
    -moz-box-shadow: 0 0 3px rgba(0,0,0, 0.2);
    box-shadow: 0 0 3px rgba(0,0,0, 0.2);
}
/*-- Ombrage CSS3 --*/
#slideshow:before,  
#slideshow:after {  
    position: absolute;  
    bottom:16px;  
    z-index: -10;  
    width: 50%;  
    height: 20px;  
    content: " ";  
    background: rgba(0,0,0,0.1);

    -webkit-border-radius: 50%;  
    -webkit-box-shadow: 0 0 3px rgba(0,0,0, 0.4), 0 20px 10px rgba(0,0,0, 0.7);
    -moz-border-radius: 50%;  
    -moz-box-shadow: 0 0 3px rgba(0,0,0, 0.4), 0 20px 10px rgba(0,0,0, 0.7);  
    border-radius: 50%;  
    box-shadow: 0 0 3px rgba(0,0,0, 0.4), 0 20px 10px rgba(0,0,0, 0.7);  
}  
#slideshow:before {  
    left:0;  
    -webkit-transform: rotate(-4deg);
    -moz-transform: rotate(-4deg); 
    transform: rotate(-4deg); 
}  
#slideshow:after {  
    right:0;  
    -webkit-transform: rotate(4deg);
    -moz-transform: rotate(4deg); 
    transform: rotate(4deg);  
}

Grâce à ce bout de code CSS, vous pouvez d’ores et déjà voir le container du slider prendre forme. Évidement, nous n’en resterons pas là. Nous allons gérer les débordement, les bordures, la taille totale du slider (taille = taille des slides x nombre de slides = 400%) :

#slideshow .container {  
    position:relative;  
    width: 640px;  
    height: 310px;  
    overflow: hidden;  
}  
#slideshow .container:after {  
    position:absolute;  
    bottom: 0; left:0;  
    content: " ";  
    width: 100%;  
    height: 1px;  
    background: #999;  
}  
#slideshow .slider {  
    position: absolute;  
    left:0; top:0;  
    width: 400%;  
    height: 310px;  
}  
#slideshow figure {  
    position:relative;  
    display:inline-block;  
    padding:0; margin:0;  
}
#slideshow figure:after {  
    position: absolute;  
    display:block;  
    content: " ";  
    top:0; left:0;  
    width: 100%; height: 100%;  
    -webkit-box-shadow: 0 0 65px rgba(0,0,0, 0.5) inset;
    -moz-box-shadow: 0 0 65px rgba(0,0,0, 0.5) inset;
    box-shadow: 0 0 65px rgba(0,0,0, 0.5) inset;
}

Vous pouvez voir que notre container à meilleur allure et que nos images sont masquées. Ensuite, nous allons nous occuper de nos légendes <figcaption> qui sont pour l’instant masquées également :

#slideshow figcaption {  
    position:absolute;  
    left:0; right:0; bottom: 5px;  
    padding: 20px;  
    margin:0;  
    border-top: 1px solid rgb(225,225,225);  
    text-align:center;  
    letter-spacing: 0.05em;  
    word-spacing: 0.05em;  
    font-family: Georgia, Times, serif;  
    background: #fff;  
    background: rgba(255,255,255,0.7);  
    color: #555;  
    text-shadow: -1px -1px 0 rgba(255,255,255,0.3);  
}

Vous devriez avoir quelque chose dans ce goût là :

#3 – L’animation

Pour la phase animation, il est nécessaire de se poser quelques question :

• Combien de temps nécessaire à la lecture du slide ?
• Combien de temps va durer la transition ?
• Combien ai-je de slides ?

C’est questions sont nécessaire car elles vont nous permettre de calculer notre temps total, notre temps d’animation, et notre temps de lecture.

En ayant ces valeurs, nous allons fixer les keyframes pour animer nos slides :

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

@-moz-keyframes slider {  
    0%, 20%, 100%   { left: 0 }  
    25%, 45%        { left: -100% }  
    50%, 70%        { left: -200% }  
    75%, 95%        { left: -300% }  
}

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

En créant ces keyframes, je boucle comme suit :

• A 0% du déroulement de l’animation, le slider, qui je vous le rappelle est égale à 400% de la taille d’un slide, n’est pas décalé ;
• Entre 20 et 25%, mon animation s’exécute ;
• A 25%, c’est-à-dire à 1/4 du déroulement de notre animation, je décale « slider » de -100% ;
• Entre 45 et 50%, mon animation s’exécute ;
• A 50%, je décale de 200% ;
• Entre 70 et 75%, mon animation s’exécute ;
• A 75%, je décale de 300% ;
• Entre 95 et 100%, mon animation s’exécute ;
• A 100%, je revient à 0 de décalage ;

Maintenant que nos keyframes sont fixées, nous allons déclarer ce que constitue l’animation slider. Retournez plus haut dans votre code, cherchez #slideshow .slider et ajoutez ceci :

#slideshow .slider {  
    /* ... avec la propriété animation */  
    -webkit-animation: slider 32s infinite; 
    -moz-animation: slider 32s infinite; 
    animation: slider 32s infinite;  
}

En déclarant ceci, je donne à l’animation slider, un timer de 32 secondes… 32/4 => 8 secondes pour la lecture et l’animation. l’animation se déroule sur 5% du temps total, c’est-à-dire 1,6 secondes… Donc nos slides sont affichées en 6,4 secondes. Un peu de mathématiques, ça fait jamais de tort !

Allez-y retester votre slider…. Et oui ça marche, vous en doutiez ?

Nous allons maintenant faire de même avec notre fameuse timeline…

• Notre animation

  #timeline {  
      position: absolute;  
      background: #999;  
      bottom: 15px;  
      left: 15px;  
      height: 1px;  
      background: rgb(214,98,13);  
      background: rgba(214,98,13,.8);  
      width: 0;  
      /* fonction d'animation */  
      -webkit-animation: timeliner 32s infinite; 
      -moz-animation: timeliner 32s infinite; 
      animation: timeliner 32s infinite;
  }

• Nos Keyframes

  @-webkit-keyframes timeliner {  
      0%, 25%, 50%, 75%, 100% { width: 0;     }  
      20%, 45%, 70%, 90%      { width: 640px; }  
  }
  @-moz-keyframes timeliner {  
      0%, 25%, 50%, 75%, 100% { width: 0;     }  
      20%, 45%, 70%, 90%      { width: 640px; }  
  }
  @keyframes timeliner {  
      0%, 25%, 50%, 75%, 100% { width: 0;     }  
      20%, 45%, 70%, 90%      { width: 640px; }  
  }

De la même façon que les slides, les keyframes décrivent les étapes de l’animation. Nous savons que la timeline doit être à sont maximum 4* par animation et respectivement à 20, 40, 70 et 90%; et nous définissons à 0%, le début, la fin, et fin des animations de « slide » (0, 100, 25, 50, 75%).

Avec le même procédé, nous allons définir l’animation de la légende pour chaque slide :

• Nos keyframes

  @-webkit-keyframes figcaptionner {  
      0%, 20%, 45%, 70%, 95%                     { bottom: -55px;    }  
      10%, 19%, 35%, 44%, 60%, 69%, 85%, 94%       { bottom: 5px;      }  
  }
  @-moz-keyframes figcaptionner {  
      0%, 20%, 45%, 70%, 95%                     { bottom: -55px;    }  
      10%, 19%, 35%, 44%, 60%, 69%, 85%, 94%       { bottom: 5px;      }  
  }
  @keyframes figcaptionner {  
      0%, 20%, 45%, 70%, 95%                     { bottom: -55px;    }  
      10%, 19%, 35%, 44%, 60%, 69%, 85%, 94%       { bottom: 5px;      }  
  }

• L’animation

  #slideshow figcaption {  
      /* ... la propriété animation */  
      -webkit-animation: figcaptionner 32s infinite;
      -moz-animation: figcaptionner 32s infinite;  
      animation: figcaptionner 32s infinite;  
  }

Une fois votre slider effectué, voici la méthode pour l’intégrer à votre thème wordpress. Il va falloir configurer une nouvelle boucle qui nous retournera les 4 premiers articles possédant une image. Ce pourrait bien être autre chose, si vous êtes familier avec les « query_post », vous pourrez trouver moult utilités à ce slider.

Voici notre boucle :

<section id="slideshow">
    <div>
        <div></div>
        <div>
            <?php
            query_posts('posts_per_page=4&meta_key=_thumbnail_id&meta_compare=!=&meta_value= ');
                while ( have_posts() ) : the_post(); ?><a href="<?php echo the_permalink(); ?>" title="Lire l\'article"><figure><?php the_post_thumbnail( array(640,310) ); ?><figcaption><?php the_title(); ?></figcaption></figure></a>
                <?php endwhile;
            wp_reset_query(); ?>
        </div>
    </div>
    <span id="timeline"></span>
</section>

Et voila… C’est tout. Insérer votre code CSS dans le fichier style.css et le tour est joué.

N.B : le fait de mettre notre boucle sur une seule ligne est volontaire. Voici la boucle avec indentation :

<?php
    query_posts('posts_per_page=4&meta_key=_thumbnail_id&meta_compare=!=&meta_value= ');
    while ( have_posts() ) : the_post(); ?>
        <a href="<?php echo the_permalink(); ?>" title="Lire l\'article">
            <figure>
                <?php the_post_thumbnail( array(640,310) ); ?>
               <figcaption><?php the_title(); ?></figcaption>
            </figure>
        </a>
    <?php endwhile;
    wp_reset_query();
?>

Vos images seront décalées si vous copiez ce code.

Si vous m’avez suivi jusqu’ici vous savez désormais coder un diaporama en HTML5 / CSS3 pour WordPress !

Crédits photo : Fergus Ray Murray