amélioration du style bxslider du plug-in slide jquery example

amélioration du style bxslider du plug-in slide jquery example_jquery

WBOY

Libérer： 2016-05-16 16:33:56

original

1356 Les gens l'ont consulté

L'exemple de cet article décrit comment améliorer le style du plug-in de diaporama jquery bxslider et le partage avec tout le monde pour votre référence. Les détails sont les suivants :

J'ai comparé de nombreuses diapositives jquery et je ne les ai pas trouvées très bonnes. Enfin, j'ai trouvé que bxslider a la meilleure compatibilité et prend en charge le retournement manuel sur les appareils mobiles.

Mais l'effet d'affichage officiel est vraiment moche et inacceptable. Au final, j'ai dû le bricoler moi-même.

Le style officiel de bxslider est le suivant :

Le style modifié est le suivant :

Étape 1 : Présenter bxslider

Copier le code Le code est le suivant :

Étape 2 : Ajouter le code HTML bxslider

Copier le code

Le code est le suivant :

Le code html officiel original est le suivant :

Copier le code

Le code est le suivant :

Sur cette base, un calque parent DIV de slider_block est créé, et la position est définie sur relative, principalement pour tourner les pages "1, 2, 3" pour le positionnement absolu du slider-pager de sous-couche.

Étape 3 : Modifier CSS jquery.bxslider.css et ajouter une optimisation de style CSS pour slider-pager

Copier le code

Le code est le suivant : #slider_block{position : relative;marge : 0 auto;hauteur : 245px;margin-top:10px;overflow:hidden;} #slider-pager{position : absolue;bas : 10px;droite : 10px;z-index : 999;font-size : 0px;} #slider-pager .pager-link {float : left ; } #slider-pager .active {fond : #0C3;couleur : #fff;}

/*Supprimer l'effet d'ombre, le navigateur n'est pas compatible avec 4jcms */
/*.bx-wrapper .bx-viewport {
-moz-box-shadow : 0 0 5px #ccc
-webkit-box-shadow : 0 0 5px #ccc
boîte-ombre : 0 0 5px #ccc
Bordure : solide #fff 5px ; Gauche : -5px ; arrière-plan : #fff ;
}

*/
#slider_block{position : relative;marge : 0 auto;hauteur : 245 px;margin-top :10px;débordement :caché;}
#slider-pager{position : absolue;bas : 10px;droite : 10px;z-index : 999;font-size : 0px;}
#slider-pager .pager-link {float : left ; >
#slider-pager .active {fond : #0C3;couleur : #fff;}

/*Supprimer l'effet d'ombre, le navigateur n'est pas compatible par 4jcms */
/*.bx-wrapper .bx-viewport {
-moz-box-shadow : 0 0 5px #ccc;
-webkit-box-shadow : 0 0 5px #ccc;
ombre-boîte : 0 0 5px #ccc;
bordure : solide #fff 5px ;
gauche : -5px ; arrière-plan : #fff;

>
*/

Rénovation finale terminée