Javascript Girl
  1. Javascript Girl
  3. Affichage du nombre de diapositives avec Nivo Slider
Intereting Posts
Jquery fonctions différées personnalisées Différence entre assigner une fonction à une variable ou non Exporter le tableau HTML vers Excel son téléchargement de contenu de table vers Excel Besoin de vous connecter directement à une page interne Chrome, à partir d'une page d'une extension Chrome Email AJAX POST to web api Activation de OnBeforeUnload SEULEMENT lorsque les valeurs de champs ont changé Nesting node async.eachSeries Angulaire.pour tout et tous les objets Modules et systemjs types. Instancier la classe à partir d'un script en ligne Comment avoir des valeurs de retour différentes pour plusieurs appels sur un espion Jasmine Ui-router angulaire: obtenez $ état information de toState en résolution Comment puis-je obtenir un objet File de PhoneGap camera.getPicture? Pourquoi les briseurs de trame fonctionnent-ils en plusieurs domaines, et pouvez-vous utiliser de manière conditionnelle des interrupteurs de trame? Comment puis-je modifier les marqueurs? Construction conditionnelle basée sur l'environnement à l'aide de Webpack

Affichage du nombre de diapositives avec Nivo Slider

Je voudrais montrer le nombre de diapositives en tant que 2 of 10 sur mon curseur. Comment puis-je fonctionner avec les transitions 3 of 10 , 4 of 10 (lorsque le curseur se déplace avec des diapositives) et 7 of 10 (si la miniature correspondante a été cliquée)?

Vous pouvez avoir le diapositive actuel comme current_slide_no = jQuery('#nivo-slider').data('nivo:vars').currentSlide; Ajoutez 1 à cela car l'index commence à partir de 0.

Utilisez l'attribut afterChange pour modifier le numéro de la diapositive en cours lors de l'initialisation du curseur NIVO.

Donc, j'ai travaillé par 

 <script type="text/javascript"> jQuery(document).ready(function(){ var total = jQuery('#nivo-slider img').length; var current_slide_no = 1; // garbage // var rand = Math.floor(Math.random()*total); jQuery('#nivo-slider').nivoSlider({ effect:'fade', //Specify sets like: 'fold,fade,sliceDown,slideInLeft' animSpeed:600, //Slide transition speed pauseTime:30000, directionNav:false, //Next and Prev // directionNavHide:true, //Only show on hover controlNav:true, //1,2,3... controlNavThumbs:true, //Use thumbnails for Control Nav controlNavThumbsFromRel:true, //Use image rel for thumbs pauseOnHover:false, //Stop animation while hovering //captionOpacity:0.3, //Universal caption opacity startSlide:0, //Set starting Slide (0 index) // keyboardNav:true //Use left and right arrows afterChange: function(){ current_slide_no = jQuery('#nivo-slider').data('nivo:vars').currentSlide; jQuery('#nivo-slider-status > .current-slide').html(current_slide_no+1); } }); jQuery('#nivo-slider-status').show(); jQuery('#nivo-slider-status > .total-slides').html(total); current_slide_no = jQuery('#nivo-slider').data('nivo:vars').currentSlide; jQuery('#nivo-slider-status > .current-slide').html(current_slide_no+1); }); </script>

Et mon html (devrait être à l'extérieur de la glissière NIVO DIV) est 

 <div id="nivo-slider-status" class="alignright"> <span class="current-slide"></span> of <span class="total-slides"></span> </div>

Vous devriez rechercher le clickhandler et / ou l'événement de transition. Je n'ai pas encore utilisé nivo, mais c'est le concet que vous devez faire: 

 parent = $('#buttons'); // button container pages = parent.find('.button').size; // total number of pages parent.find('.button').click(function(){ index = parent.index($this) + 1; // this is the the page number //do something with these variables $('#div1').html(index + ' of ' + pages); });