diaporama jquery accessible

slick-tb-jqueryComment créer widget diaporama accessible et utilisable pour votre site en utilisant le HTML, CSS et JavaScript (jQuery).


slick-jquery

La partie la plus importante de tout bon site est une solide structure HTML. Une base sémantique signifie que le contenu de votre site web sera accessible dans presque tous les navigateurs clients.

La partie HTML
<div id= »slideshow »>
<div id= »slidesContainer »>
<div class= »slide »>
<!– Content for slide 1 goes here –>
<div class= »slide »><! – Contenu pour slide 1 va ici.–></div>
<div class= »slide »><! – Contenu pour slide 2 va ici.–></div>
<div class= »slide »><! – Contenu de diapositive 3 va ici.–></div>
<div class= »slide »><! – Contenu de diapositive 4 va ici.–></div>
</div>
</div>
</div>

<! – Diaporama HTML ->

Style du diaporama

#slideshow {
	margin:0 auto;
	width:640px;
	height:263px;
	background:transparent url(img/bg_slideshow.jpg) no-repeat 0 0;
	position:relative;
}
#slideshow #slidesContainer {
  margin:0 auto;
  width:560px;
  height:263px;
  overflow:auto; /* allow scrollbar */
  position:relative;
}
#slideshow #slidesContainer .slide {
  margin:0 auto;
  width:540px; /* reduce by 20 pixels of #slidesContainer to avoid horizontal scroll */
  height:263px;
}

/**
 * Slideshow controls style rules.
 */
.control {
  display:block;
  width:39px;
  height:263px;
  text-indent:-10000px;
  position:absolute;
  cursor: pointer;
}
#leftControl {
  top:0;
  left:0;
  background:transparent url(img/control_left.jpg) no-repeat 0 0;
}
#rightControl {
  top:0;
  right:0;
  background:transparent url(img/control_right.jpg) no-repeat 0 0;
}

Pour #slidesContainer, nous avons mis le overflow la propriété d’auto pour que les barres de défilement apparaissent lorsque notre contenu déborde sur l’ensemble de la hauteur de 263px (la hauteur de nos diapositives).

Nous devons réduire la largeur de .slide 20px par classe pour tenir compte de la main droite la barre de défilement qui apparaissent lorsque JavaScript est désactivé.
Sans JavaScript, le contenu est encore accessible, mais les utilisateurs peuvent faire défiler vers le haut et vers le bas pour afficher l’aide de nos diapositives.

Pour la démonstration en live c’est par là :  live slideshow
Télécharger la sources avec les fichiers .PSD slick_accessible_slideshow.zip (ZIP, 2.8 MB)

Aucun commentaire

Répondre

Votre adresse de messagerie ne sera pas publiée. Les champs obligatoires sont indiqués avec *

*

5 + douze =

CONTACT

We're not around right now. But you can send us an email and we'll get back to you, asap.

Envoi en cours...

©[current-year] WebCSSDesign

Se connecter

Oubli de mot de passe ?