JQuery loop error: cannot read property 'cycleW' undefined

Question

Not sure why I get this error and can't figure it out? The loop is working, I just get this error in the console and want to fix it. That's why I'm here now :)

I create 3 different loops on the same page with the same selector and using a pager for unique controls. This is what I have:

// 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 (the loop developer) and he said that my third div caused the b / c problem when it was empty. He's going to fix it in the next release.