Caroufredsel prev/next not working in firefox

Question

works perfectly in chrome and safari, but take users to the top of the page on firefox

this is the config script in the header:

$("#bottle-carousel1").carouFredSel({
    auto: false,
    prev: "#prev1 > a.prev",
    next: "#next1 > a.next",
    mousewheel: false,
});

these are the links themselves:

<div id="prev1"><a class="prev" href="">prev</a></div>
<div id="next1"><a class="next" href="">next</a></div>

the code is working fine, just not in firefox and not clear why. most folks posting with problems are saying that it works in firefox but not chrome or safari, this is not the case for me.

Answer 1

Well I can't replicate the problem, it works fine on my FF, but if I had to take a guess I would say the problem is the <a> tag with no href value. The browser's default value might just be to reload or return to the top of the page (like how it does when # is used.)

I would try removing the <a> tag altogether, as you don't really need it.

the markup would become:

<div id="prev1">prev</div>
<div id="next1">next</div>

and the JS would be:

$("#bottle-carousel1").carouFredSel({
    auto: false,
    prev: "#prev1",
    next: "#next1",
    mousewheel: false,
});

then in your css just make sure you have:

#prev1,
#next1 {
   cursor: pointer;
}

so that it looks the same

Answer 2

Have you tried to download original version of carouFredSel? I had the same issue with a bootstrap them. I replaced this file with online (theme) version jquery.carouFredSel-6.2.1-packed.js