CODEWITHSUNDEEP
javascriptjqueryhtml
colindunn
colindunn

Reputation: 3163

jQuery Cycle: Multiple slide shows, count individual children

I'm using jQuery Cycle to create several slideshows on the same page. Some of the slideshows only have one image. For these, I would like to hide the next/prev image. Not sure why this code isn't working, but I suspect it is counting all the children of all the slideshows. If this is the case, I need it to calculate each slideshow length individually. JSFiddle here

jQuery

if ( $('.slideshow').children().length < 1 )
    $(this).parent().find('.controls').hide();
else
$('.slideshow').each(function() {
    var cycle = $(this),
    controls = cycle.parent().find('.controls');
    cycle.cycle({
        timeout: 0,
        speed: 'fast',
        fx: 'scrollHorz',
        next: controls.find('.next'),
        prev: controls.find('.prev'),
        before: function(curr,next,opts) {
                    var s = ($(next).index() + 1) + '/' + opts.slideCount;
                    $(opts.caption).html(s)
                },
        caption: cycle.parent().find('p.caption'),
    });
});

HTML

   <div class="container">
    <ul class="slideshow">
        <li><img alt="product" src="http://placehold.it/500x500" /></li>
        <li><img alt="product" src="http://placehold.it/500x500" /></li>
        <li><img alt="product" src="http://placehold.it/500x500" /></li>
    </ul>
    <div class="controls"><a href="#" class="prev">Prev</a> <a href="#" class="next">Next</a></div>
</div>

<div class="container">
    <ul class="slideshow">
        <li><img alt="product" src="http://placehold.it/500x500" /></li>
    </ul>
    <div class="controls"><a href="#" class="prev">Prev</a> <a href="#" class="next">Next</a></div>
</div>

Upvotes: 1

Views: 1073

Answers (1)

Boyo
Boyo

Reputation: 1381

$(document).ready(function() {    
    $('.slideshow').each(function() {        
        if ( $(this).children().length <= 1 )
            $(this).parent().find('.controls').hide();
        else{
            var cycle = $(this);
            controls = cycle.parent().find('.controls');
            cycle.cycle({
                timeout: 0,
                speed: 'fast',
                fx: 'scrollHorz',
                next: controls.find('.next'),
                prev: controls.find('.prev'),
                before: function(curr,next,opts) {
                            var s = ($(next).index() + 1) + '/' + opts.slideCount;
                            $(opts.caption).html(s)
                        },
                caption: cycle.parent().find('p.caption'),
            });
        }
    });    
});

Upvotes: 4

Related Questions