在Nivoslider中跳过第一张幻灯片

时间:2012-12-13 11:40:21

标签: javascript jquery html nivo-slider

我在我正在建设的一个小型WordPress网站上使用 Nivoslider版本3.1

我想知道是否有办法告诉Nivoslider 总是忽略幻灯片1.

所以如果我的HTML是:

<div id="slider" class="slider nivoSlider">
<img src="1.jpg" /> <!-- Ignore this ALWAYS -->
<img src="2.jpg" />
<img src="3.jpg" />
<img src="4.jpg" />
</div>

因此,Slider将始终以2.jpg开头&amp;将永远不会显示1.jpg 。这可能吗?

以下是Nivoslider Demo供参考。

这是一个奇怪的解决方法,我同意,但是当我使用foreach循环来填充滑块时,我当前的Slider实现不起作用。它填充它,但滑块卡在“加载”。

为了记录,这是我目前的实施:

<div id="slider" class="slider nivoSlider">
                <?php
                    $id = get_the_ID();
                    $custom_fields = get_post_custom($id);
                    $my_custom_field = $custom_fields['img1'];
                    foreach ( $my_custom_field as $key => $value ) {
                        echo '<img src="/wp-content/themes/boilerplate/images/csg-50c8a86d6bfc0.png" height="350" width="620">';
                    }
                ?>
                </div>

非常感谢您提供的任何帮助。

2 个答案:

答案 0 :(得分:1)

根据您下载的特定版本的nivoslider /您可能对其进行的特定编辑:

寻找slide-show.js

并编辑

startSlide: 0, // Set starting Slide (0 index)

在第一个循环中跳过它

而且......(我在这里出去了)

在jquery.nivo.slider中编辑函数...

$.fn.nivoSlider = function(options) {

    //Defaults are below
    var settings = $.extend({}, $.fn.nivoSlider.defaults, options);

    return this.each(function() {
        //Useful variables. Play carefully.
        var vars = {
            currentSlide: 0,
            currentImage: '',
            totalSlides: 0,
            randAnim: '',
            running: false,
            paused: false,
            stop:false
        };

这样你就可以硬编码幻灯片的绝对数量,并且在到达1.jpg之前应该重新开始循环。

不确定这是否有效 - 对这样的元素进行硬编码通常不是一个好主意;您还需要删除用户控件以防止手动导航到该幻灯片。

它确实提出了一个问题:为什么要包含一张你永远不想要显示的幻灯片?

答案 1 :(得分:-1)

上面没有为我工作.. 做了为我工作(跳过第4张图片)是这样的:

   $('#slider').nivoSlider({
       prevText: '',
       nextText: '',
       controlNav: false,
       beforeChange: function ()
       {
           var current = $('#slider').data('nivo:vars').currentSlide;
           //if the currentIndex = 2, the next will be 3, which is the fourth image, 
           //which is the one I wanted to skip
           if(current == 2)
           {
               $('#slider').data('nivo:vars').currentSlide = 3;
           }
       }
   });

对于第一张图片,您应该说当前== * last-index * {... currentSlide = 0}