Vérifiez vos informations

Il semblerait que les informations techniques de votre profil n'aient pas été actualisées depuis un certain temps... Pour que l'aide apportée vous soit efficace, il est important que ces informations soient à jour : prenez quelques secondes pour confirmer ou compléter les informations suivantes.


Lien de votre forum
Version de ce forum
Vous êtes le fondateur de ce forum
Vous avez modifié le CSS de ce forum
Vous avez modifié les templates de ce forum
Votre navigateur

Effet fade de bxSlider défaillant

Voir le sujet précédent Voir le sujet suivant Aller en bas

Résolu Effet fade de bxSlider défaillant

Message par foxies le Dim 20 Mai 2018 - 8:14

Détails techniques

Version du forum : ModernBB
Poste occupé : Fondateur
Navigateur(s) concerné(s) : Google Chrome
Personnes concernées par le problème : Tous les utilisateurs
Lien du forum : (lien masqué, vous devez poster pour le voir)

Description du problème

Bonjour, j'ai récemment installé un slider bxSlider sur mon forum.

J'ai suivi à la lettre la méthode du site officiel et selon mes faibles connaissances, soit

1) inclure le fichier (min.js) dans mon template overall_header avant la balise < /head> :
Code:
<script src="https://cdn.jsdelivr.net/bxslider/4.2.12/jquery.bxslider.min.js"></script>
,

2) créer un nouveau JS dans mes modules avec ce code :

Code:
$(document).ready(function(){
      $('.slider').bxSlider();
    });

(J'ai coché "sur toutes les pages"),

3) ajouter ce code HTML dans une page test de mon forum () :
Code:
<div class="slider">
    <div>I am a slide.</div>
    <div>I am another slide.</div>
,

4) enfin, en téléchargeant le jquery.bxslider.zip présent sur le site, j'ai récupéré le CSS :

Code:
/** VARIABLES
===================================*/
/** RESET AND LAYOUT
===================================*/
.bx-wrapper {
  position: relative;
  margin-bottom: 60px;
  padding: 0;
  *zoom: 1;
  -ms-touch-action: pan-y;
  touch-action: pan-y;
}
.bx-wrapper img {
  max-width: 100%;
  display: block;
}
.bxslider {
  margin: 0;
  padding: 0;
}
ul.bxslider {
  list-style: none;
}
.bx-viewport {
  /*fix other elements on the page moving (on Chrome)*/
  -webkit-transform: translatez(0);
}
/** THEME
===================================*/
.bx-wrapper {
  -moz-box-shadow: 0 0 5px #ccc;
  -webkit-box-shadow: 0 0 5px #ccc;
  box-shadow: 0 0 5px #ccc;
  border: 5px solid #fff;
  background: #fff;
}
.bx-wrapper .bx-pager,
.bx-wrapper .bx-controls-auto {
  position: absolute;
  bottom: -30px;
  width: 100%;
}
/* LOADER */
.bx-wrapper .bx-loading {
  min-height: 50px;
  background: url('images/bx_loader.gif') center center no-repeat #ffffff;
  height: 100%;
  width: 100%;
  position: absolute;
  top: 0;
  left: 0;
  z-index: 999;
}
/* PAGER */
.bx-wrapper .bx-pager {
  text-align: center;
  font-size: .85em;
  font-family: Arial;
  font-weight: bold;
  color: #666;
  padding-top: 20px;
}
.bx-wrapper .bx-pager.bx-default-pager a {
  background: #666;
  text-indent: -9999px;
  display: block;
  width: 10px;
  height: 10px;
  margin: 0 5px;
  outline: 0;
  -moz-border-radius: 5px;
  -webkit-border-radius: 5px;
  border-radius: 5px;
}
.bx-wrapper .bx-pager.bx-default-pager a:hover,
.bx-wrapper .bx-pager.bx-default-pager a.active,
.bx-wrapper .bx-pager.bx-default-pager a:focus {
  background: #000;
}
.bx-wrapper .bx-pager-item,
.bx-wrapper .bx-controls-auto .bx-controls-auto-item {
  display: inline-block;
  vertical-align: bottom;
  *zoom: 1;
  *display: inline;
}
.bx-wrapper .bx-pager-item {
  font-size: 0;
  line-height: 0;
}
/* DIRECTION CONTROLS (NEXT / PREV) */
.bx-wrapper .bx-prev {
  left: 10px;
  background: url('https://cdn.jsdelivr.net/bxslider/4.2.12/images/controls.png') no-repeat 0 -32px;
}
.bx-wrapper .bx-prev:hover,
.bx-wrapper .bx-prev:focus {
  background-position: 0 0;
}
.bx-wrapper .bx-next {
  right: 10px;
  background: url('https://cdn.jsdelivr.net/bxslider/4.2.12/images/controls.png') no-repeat -43px -32px;
}
.bx-wrapper .bx-next:hover,
.bx-wrapper .bx-next:focus {
  background-position: -43px 0;
}
.bx-wrapper .bx-controls-direction a {
  position: absolute;
  top: 50%;
  margin-top: -16px;
  outline: 0;
  width: 32px;
  height: 32px;
  text-indent: -9999px;
  z-index: 999;
}
.bx-wrapper .bx-controls-direction a.disabled {
  display: none;
}
/* AUTO CONTROLS (START / STOP) */
.bx-wrapper .bx-controls-auto {
  text-align: center;
}
.bx-wrapper .bx-controls-auto .bx-start {
  display: block;
  text-indent: -9999px;
  width: 10px;
  height: 11px;
  outline: 0;
  background: url('https://cdn.jsdelivr.net/bxslider/4.2.12/images/controls.png') -86px -11px no-repeat;
  margin: 0 3px;
}
.bx-wrapper .bx-controls-auto .bx-start:hover,
.bx-wrapper .bx-controls-auto .bx-start.active,
.bx-wrapper .bx-controls-auto .bx-start:focus {
  background-position: -86px 0;
}
.bx-wrapper .bx-controls-auto .bx-stop {
  display: block;
  text-indent: -9999px;
  width: 9px;
  height: 11px;
  outline: 0;
  background: url('https://cdn.jsdelivr.net/bxslider/4.2.12/images/controls.png') -86px -44px no-repeat;
  margin: 0 3px;
}
.bx-wrapper .bx-controls-auto .bx-stop:hover,
.bx-wrapper .bx-controls-auto .bx-stop.active,
.bx-wrapper .bx-controls-auto .bx-stop:focus {
  background-position: -86px -33px;
}
/* PAGER WITH AUTO-CONTROLS HYBRID LAYOUT */
.bx-wrapper .bx-controls.bx-has-controls-auto.bx-has-pager .bx-pager {
  text-align: left;
  width: 80%;
}
.bx-wrapper .bx-controls.bx-has-controls-auto.bx-has-pager .bx-controls-auto {
  right: 0;
  width: 35px;
}
/* IMAGE CAPTIONS */
.bx-wrapper .bx-caption {
  position: absolute;
  bottom: 0;
  left: 0;
  background: #666;
  background: rgba(80, 80, 80, 0.75);
  width: 100%;
}
.bx-wrapper .bx-caption span {
  color: #fff;
  font-family: Arial;
  display: block;
  font-size: .85em;
  padding: 10px;
}

J'ai repris aussi le code situé sur cette page car j'aimerais inclure des images dans le slider. Je remarque que l'effet "fade" n'est pas le même sur mon forum, le passage d'une image à l'autre est "saccadé" si je puis dire... Malgré tout, en désactivant mon CSS de base, il n'y a aucun soucis... En espérant que quelqu'un saura identifier le problème, je vous souhaite une bonne journée Smile


Dernière édition par pinke le Lun 21 Mai 2018 - 8:09, édité 1 fois
avatar

foxies
*****

Féminin
Messages : 519
Inscrit(e) le : 02/05/2010

http://hawkeyeriver.forumgratuit.org/
foxies a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Effet fade de bxSlider défaillant

Message par w00tw00t le Dim 20 Mai 2018 - 23:16

Bonjour pinke,

L'ajout de ce CSS semble régler le soucis sur ma maquette. Est-ce le cas de votre coté également ?

Code:
.bx-wrapper {
    transition-property:initial;
    transition-duration:initial;
    transition-timing-function:initial;      
}
.bx-wrapper * {
    transition-property:inherit;
    transition-duration:inherit;
    transition-timing-function:inherit;      
}

Cordialement,
w00tw00t
avatar

w00tw00t
***

Messages : 118
Inscrit(e) le : 09/05/2018

http://forum.forumactif.org
w00tw00t a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Effet fade de bxSlider défaillant

Message par foxies le Lun 21 Mai 2018 - 8:08

Merci beaucoup @w00tw00t, le problème a été réglé sur mon forum aussi avec l'ajout de ces codes. Bonne journée Very Happy
avatar

foxies
*****

Féminin
Messages : 519
Inscrit(e) le : 02/05/2010

http://hawkeyeriver.forumgratuit.org/
foxies a été remercié(e) par l'auteur de ce sujet.

Voir le sujet précédent Voir le sujet suivant Revenir en haut


Permission de ce forum:
Vous ne pouvez pas répondre aux sujets dans ce forum