Flexslider 2: comment puis-je cacher la direction-nav “prev” flèche pour ma première diapositive?

Je suis en train de jouer avec le CSS et le Javascript pour Flexslider 2 et je ne peux pas comprendre comment masquer la "prev" flèche pour seulement la première diapositive de mon diaporama. Je voudrais qu'elle réapparaissait pour le reste du diaporama.

Toute aide est sincèrement apprécié.

Cas

avez-vous jamais comprendre cela? Je suis dans le même bateau

InformationsquelleAutor user1832527 | 2012-11-17

flexslider

J'aime la flexslider parce que vous pouvez écrire personnalisé jquery logique dans ses fonctions de rappel. Voici un exemple de base de cacher les flèches par défaut, puis cliquez sur (une méthode jquery), révèlent de nouveau, le tout dans le flexslider start (), fonction de rappel...

$('#carousel-home').flexslider({
    animation: "slide",
    controlNav: false,
    animationLoop: false,
    slideshow: false,
    itemWidth: 170,
    itemMargin: 5,
    asNavFor: '#slider',
    start:function(slider){
        //HIDE THE ARROWS BY DEFAULT...
        $('#slider .flex-direction-nav').css({visibility:'hidden'});

        //THEN INSERT YOUR CUSTOM JQUERY CLICK ACTIONS TO REVEAL THEM AGAIN
        slider.find('a').on('click',function(){
        $('#slider .flex-direction-nav').css({visibility:'visible'});
        });
    }//end start function
});//end carousel

$('#slider').flexslider({
    slidshow: false,
    animation: "slide",
    controlNav: false,
    animationLoop: false,
    slideshow: true,
    sync: "#carousel-home"
});//end slider

Qui va aller de pair avec le code HTML suivant...

<div id="carousel-home" class="flexslider">
  <ul class="slides ffastandards">
  <li><a href="#">Mission</a></li>
    <li><a href="#">Vision</a></li>
    <li><a href="#">Voice</a></li>
  </ul>
</div>
<hr>
<div id="slider" class="flexslider content-slider">
    <ul class="slides">
    <li>mission</li>
    <li>vision</li>
    <li>voice</li>
    </ul>
</div>

Bonne chance!

InformationsquelleAutor klewis

6

Flexslider ajoute une classe de 'flex-disabled' à la correspondante d'éléments de navigation après avoir atteint le début ou la fin du diaporama/carrousel.

Ressemble cela ne fonctionne que si vous définissez ce paramètre: animationLoop: false.

Vous pouvez utiliser cette classe pour cacher le "prev" flèche (ou flèche 'suivant').
```
.flex-direction-nav a.flex-disabled {
   display:none;
}
```
En option, vous pouvez définir l'opacité avec une transition CSS pour l'avoir fade in/out.
```
.flex-direction-nav a {
   opacity: 1;
   transition: opacity .3s;
   -moz-transition: opacity .3s;
   -webkit-transition: opacity .3s;
}

.flex-direction-nav a.flex-disabled {
   opacity: 0;
}
```
InformationsquelleAutor mattisahuman
3

Cela fera l'affaire
```
.flex-direction-nav a.flex-next, 
.flex-direction-nav a.flex-prev{
    display:none;
}
```
- La question posée par un moyen de masquer le "prev" flèche sur la première diapositive de la présentation seulement. Cette css permet de masquer les flèches pour chaque diapositive.
InformationsquelleAutor Todor Todorov

 $('.flexslider').flexslider({
                animation: 'fade',
                controlsContainer: '.flexslider',
                controlNav: false,
                directionNav:false
            });

C'est la solution, ajouter directionNav:false

InformationsquelleAutor Viral Parmar

Ajouter quelques instructions conditionnelles que ajouter ie8 pour vos pages html de la balise. Puis l'ajouter à la feuille de style

html.ie8 .flex-direction-nav .flex-prev, html.ie8 .flex-direction-nav .flex-next {display:none;}

html.ie8 #flexslider_hg_homepage_wrapper:hover .flex-direction-nav .flex-prev,
html.ie8 #flexslider_hg_homepage_wrapper:hover .flex-direction-nav .flex-next {display:block;}

InformationsquelleAutor James

0

Vous pouvez insérez ce code dans votre fichier javascript:
$('votre .classe ou #id').flexslider({
controlNav: true
});

InformationsquelleAutor Santos L. Victor

Vous devez vous connecter pour publier un commentaire.