用Nivo滑块显示幻灯片计数 [英] Showing Slide Count with Nivo Slider
问题描述
我想在我的滑块上将幻灯片计数显示为 2 of 10
。如何使用过渡 3 of 10
, 4 of 10
(当滑块随幻灯片移动时) &安培; 10 of 10
(如果点击相应的缩略图)?
I would like to show the slide count as 2 of 10
on my slider. How do I make it work with the transitions 3 of 10
, 4 of 10
(as the slider moves with slides) & 7 of 10
(if the corresponding thumbnail was clicked)?
推荐答案
您可以将当前幻灯片设为 current_slide_no = jQuery('#nivo-slider')。data('nivo:vars')。currentSlide;
将1添加为索引从0开始。
You can have the current slide no as current_slide_no = jQuery('#nivo-slider').data('nivo:vars').currentSlide;
Add 1 to it as index starts from 0.
使用 afterChange
属性在初始化NIVO滑块时更改当前幻灯片编号。
Use afterChange
attribute to change the current slide number while initializing the NIVO slider.
所以,我得到它的工作
<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>
和我的html(应该在NIVO滑块DIV之外)是
and my html (should be outside the NIVO slider DIV) is
<div id="nivo-slider-status" class="alignright">
<span class="current-slide"></span> of <span class="total-slides"></span>
</div>
这篇关于用Nivo滑块显示幻灯片计数的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!