Les questions de la création d'un custom Flexslider des flèches de navigation
Je suis en utilisant Flexslider v2.0 et suis en train de créer mon propre navigation flèche qui va s'asseoir directement ci-dessous le diaporama.
De ce que j'ai lu, j'ai créer mon propre curseur de navigation et de faire usage de la Flexslider "controlsContainer" & "manualControls" contrôles.
Pour l'instant j'ai seulement obtenu de faire de la nouvelle coutume flèches pour se déplacer seulement 1 pas en avant ou un pas en arrière. Je ne peut pas l'obtenir à naviguer comme les construit dans, les flèches de navigation.
Voici le code:
CSS
.flex-direction-nav2 { }
.flex-direction-nav2 a {width:30px; height:30px; margin:-20px 0 0; display:block; background:url(../images/flexslider/bg_direction_nav.png) no-repeat 0 0; z-index:10; cursor:pointer; text-indent:-9999px; -webkit-transition:all .3s ease }
.flex-direction-nav2 .flex-next { display:inline-block;background:url(../images/shortcodes/testimonials/arrow-right-01.png) no-repeat 50%; background-color:#000; right:-1px; z-index:6}
.flex-direction-nav2 .flex-prev { display:inline-block;background:url(../images/shortcodes/testimonials/arrow-left-01.png) no-repeat 50%; background-color:#fff; right:25px; -webkit-box-shadow:3px 0 0 0 #fff; box-shadow:3px 0 0 0px #fff; z-index:5}
HTML
<div class="testimonial-container clearfix">
<div class="title">
<h3><span>What Client’s Say</span></h3>
</div>
<div class="testimonials clearfix">
<ul class="slides">
<li>
<div class="testimonials-content">CONTENT</div>
</li>
<li>
<div class="testimonials-content">CONTENT</div>
</li>
<li>
<div class="testimonials-content">CONTENT</div>
</li>
</ul>
</div>
<ul class="flex-direction-nav2">
<li><a href="#" class="flex-prev">Prev</a></li>
<li><a href="#" class="flex-next">Next</a></li>
</ul>
</div>
jQuery
/* Testimonial Slider */
$('.testimonials').flexslider({
animation: "slide",
directionNav: true,
controlNav: true,
animationLoop: true,
pauseOnAction: true,
pauseOnHover: true,
nextText: "Next",
prevText: "Previous",
controlsContainer: ".testimonial-container",
manualControls: ".flex-direction-nav2 li a"
});
Toute aide serait grandement appréciée.
Grâce
OriginalL'auteur Jason | 2013-03-03
Vous devez vous connecter pour publier un commentaire.
Si vous souhaitez personnaliser les contrôles, vous n'avez pas besoin d'ajouter manuellement les commandes de votre source. Si vous changez de "controlsContainer" être ".témoignages", il va créer le "ul" à l'intérieur de ce conteneur immédiatement après les diapositives de la liste. Vous pouvez ensuite le style de ceux comme vous le souhaitez. Nous avons personnalisé les flèches sur ND.edu et d'autres sites tels que provost.nd.edu et dailydomer.nd.edu qui sont assis au-dessous du curseur. Pour accomplir ce que vous êtes après, vous devrez peut-être ajuster une extra div autour de ".témoignages" et de définir votre controlsContainer.
OriginalL'auteur Erik Runyon
flexslider génère le contrôle de la navigation dans leur JS du plugin et utiliser le css de leur feuille de style. à mon avis vous avez besoin de remplacer la feuille de style et de modifier le plugin pour utiliser votre défini de contrôle de la navigation. J'ai fait ça dans sharepoint rotation de bannière à l'aide de flexslider 2 . Vous pouvez avoir regarder un coup d'oeil à http://wp.me/p48LHO-9o
Tout est expliqué ici clairement.
Merci!!
OriginalL'auteur SM Farhad Ali
Ou vous pourriez essayer de déclencher des comportements de navigation comme expliqué ici
(Ou vous pourriez passer à slick 🙂 )
OriginalL'auteur Fred K