Question

Not sure why I’m getting this error and can’t figure it out? The cycle works, I’m just getting this error in the console and would like to fix it. That’s why I’m here now 🙂

I’m creating 3 different cycles on the same page with the same selector and using the pager for unique controls. This is what I have currently:

// Cycle Process individual samples - generate unique navs
$('.prospect-carousel').each(function(i) {
    $(this).cycle({
        fx:     'scrollHorz',
        speed:  500,
        pager: '.nav-pl' + i,
        pagerAnchorBuilder: function(idx, slide) { 
           return '.nav-pl'+i+' li:eq(' + idx + ') a'; 
        } 
    }).cycle('pause');
});

HTML:

<h6 class="carbon_heading">Top Prospects</h6>

    <ul id="tab-nav" class="nav nav-tabs">
      <li><a href="#c2012">2012</a></li>
      <li><a href="#c2013">2013</a></li>
      <li><a href="#c2014">2014</a></li>
    </ul>

    <div id="tab-wrap">
        <div id="c2012" class="tab-section">

            <div class="prospect-carousel">

                <div class="prospect-bio">
                    <span class="info">
                        <span class="badge">
                            RANK
                            <span class="rank">{count}</span>
                        </span>

                        <span class="name">{title} <em>{prospects_position_primary} <a href="{page_uri}">View Bio &raquo;</a></em></span>
                    </span>

                </div>
            </div>

            <ol class="prospect-list nav-pl0">
                <li><a href="#">{title} <span>{prospects_position_primary}</span></a></li>
            </ol>
            <p><i class="icon-th-list"></i> <a href="/rankings/">2012 Player Rankings</a></p>
        </div>

        <div id="c2013" class="tab-section">
            <div class="prospect-carousel">

                <div class="prospect-bio">
                    <span class="info">
                        <span class="badge">
                            RANK
                            <span class="rank">{count}</span>
                        </span>

                        <span class="name">{title} <em>{prospects_position_primary} <a href="{page_uri}">View Bio &raquo;</a></em></span>
                    </span>
                </div>
            </div>

            <ol class="prospect-list nav-pl1">
                <li><a href="#">{title} <span>{prospects_position_primary}</span></a></li>
            </ol>
            <p><i class="icon-th-list"></i> <a href="/rankings/2013">2013 Player Rankings</a></p>
        </div>

        <div id="c2014" class="tab-section">

            <div class="prospect-carousel">
                <div class="prospect-bio">
                    <span class="info">
                        <span class="badge">
                            RANK
                            <span class="rank">{count}</span>
                        </span>

                        <span class="name">{title} <em>{prospects_position_primary} <a href="{page_uri}">View Bio &raquo;</a></em></span>
                    </span>
                </div>
            </div>

            <ol class="prospect-list nav-pl2">
                <li><a href="#">{title} <span>{prospects_position_primary}</span></a></li>
            </ol>
            <p><i class="icon-th-list"></i> <a href="/rankings/2014">2014 Player Rankings</a></p>
        </div>
    </div>
enter code here

Answer 1

I had Mike (developer of cycle) look at it and he said my third div was causing the issue b/c it was empty. He’s going to fix this on the next release.