wSlide - tests avancés

/!\ Revenir à la page d'accueil du plugin wSlide
/!\ Autres pages de demo: wSlide - tests sans effets | wSlide - tests avec effets
/!\ Pour les styles css des exemples, explorez le code source de la page, ils sont écrit en dur et séparés distinctement !



Diaporama 360

Code et explications

Dans cet exemple, j'ai juste appliqué une image au format 360° en background de l'élément "li". Ce qui donne un fond sans fin.
#parent1 ul{
	background-image: url(image/panorama-360.jpg);
}


Visionneuse

Code et explications

Ici j'ai juste rempli les éléments 'li' avec des images, pour en faire une galerie (j'ai utilisé la mème image par simplicité). Arrangé vous juste pour donner des dimensions suffisantes au bloc, pour ne pas rogner des images. Il faut evidement ne pas appliquer de padding !
#parent2 li{
	padding: 0;
}


Cercles

Code et explications

En donnant une image de fond originale aux éléments 'li', on peut obtenir des effet interessants. J'ai joué sur le padding pour placer le texte.
#parent3 li{
	background-image: url(image/step3_circle.gif);
	padding: 120px 75px;
	color: white;
}


Fixed

Code et explications

Ici j'ai donné un effet de fond "fixe" en appliquand une image de fond sur le div qui contient la liste ...
#parent4-wrap{
	background-image: url(image/blancheur.jpg);
}



/!\ Revenir à la page d'accueil du plugin wSlide
/!\ Autres pages de demo: wSlide - tests sans effets | wSlide - tests avec effets
/!\ Pour les styles css des exemples, explorez le code source de la page, ils sont écrit en dur et séparés distinctement !