Multiple carousels (carouFredSel) using jquery each, link identifier issue

Question

I'm using the following code to create multiple slidehows on 1 page.

The slideshows work fine, but I can't get the individual buttons of each slideshow to work. When I click them the page just scrolls to the top. I thought by uniquely identifying each link I shouldn't have a problem.

Any ideas what's wrong?

        $("div.slideshow").each(function(){
            $(this).find('ul').carouFredSel
            ({
            auto:true,
             items: { width: 200, height: 200 },
             prev: { button: function() { return $(this).find('a.prev');}},             
             next: { button: function() { return $(this).find('a.next'); }},          
            });
    console.log( $(this).find('a.prev') ); //correct element returned, length 1
    console.log($(this));  //correct element returned
    });

Answer 1

if code next

<div class="image_carousel">
    <div class="sec_elem">
        <div class="tem-bl">
            <img src="image.jpg" alt=""/>
        </div>
        <div class="tem-bl">
            <img src="image.jpg" alt=""/>
        </div>
        <div class="tem-bl">
            <img src="image.jpg" alt=""/>
        </div>
    </div>

    <a class="prev" href="#"></a>
    <a class="next" href="#"></a>
</div>

jquery

$(".sec_elem").carouFredSel({
    circular: true,
    infinite: false,
    width:'100%',
    auto    : true,
    scroll  : {
        items   : 1,
        pauseOnHover    : true,
        duration    : 1000
    },
    prev    : {
        button  : function(){
            return $(this).parents('.image_carousel').find('.prev');
        },
        key     : "left"
    },
    next    : {
        button  : function(){
            return $(this).parents('.image_carousel').find('.next');
        },
        key     : "right"
    }
});

Answer 2

Since the page scrolls to the top, the problem is with carouFredSel initializing the pagers at all. Very likely an issue with your markup.

I've also had some odd issues with using the responsive : true option, along the lines you just described.

I've created a jsFiddle to show a working example of pagination with multiple carousels in a jQuery tabs UI:

http://jsfiddle.net/EFC3X/