Question

I’ve setup the cycle plugin to work multiple times on one page, which is all working fine. I’m trying to add a swipe event though, using the touchwipe plugin, which works fine on a single cycle carousel, but I can’t get it to work on the multiples.

Here’s my Javsacript, showing the Cycle code, plus the Touchwipe add on at the bottom:

function galleries () {     

    var counter = 1

    $('.gallery .pics').each(function() {
        $(this).parent().attr('id','slideshow_'+counter);
        $(this).before('<ul class="next-prev-nav"><li><a href="#" class="prev-'+counter+'">Previous</a></li><li><a href="#" class="next-'+counter+'">Next</a></li></ul><div style="clear:both;"></a>');
        $(this).after('<ul class="gallery-nav-'+counter+'">');
        $(this).cycle({
            fx: 'scrollHorz',
            speed:  '400', 
            timeout: '4000', 
            pager:  '.gallery-nav-'+counter,
            next: '.next-'+counter,
            prev: '.prev-'+counter,
            pause:   1,
            pauseOnPagerHover: true, 
            startingSlide: 0, // zero-based 

            pagerAnchorBuilder: function(id, slide) { 
                var s = $(slide);
                var imgsource = s.find('img.CycIMG').attr('src');

                // Set this as the source for our image
                return '<li><a href="#"><img src="' + imgsource + '" width="62" alt=""></a></li>';  
            }
        }).cycle('pause');
        $(this).touchwipe({
            wipeLeft: function() {
                $('.pics').cycle('next');       
            },
            wipeRight: function() {
                $(this).cycle('prev');
            }
        });
        counter++;
    });
}

The lines of code starting from $(this).touchwipe are what I can’t get to work. I’m showing two different examples here. The “wipeLeft” function works, but as it is targeting a generic class (‘pics’), it swipes all the carousels at once. The “wipeRight” function is how I’d like it to work, using “this”, to target just the current cycle carousel in the loop. I’ve tried targeting the individual ID for each carousel I created at the start, but this doesn’t seem to work.

Would really appreciate any help!

Answer 1

Try adding a context selector to your code:

$('.gallery .pics').each(function() {
    var parent = this.parentNode;

    /*...*/

    $(this).touchWipe({
        wipeLeft: function(){
            $('.pics', parent).cycle('next');
        }
    });
});

What this does is add “context” to your selector. It’s similar to this: $(parent).find('.pics')

I’m actually working on the exact same situation as you, and I’ve tested it to work 🙂