I am attempting to add external controls (as on http://sorgalla.com/projects/jcarousel/examples/static_controls.html).
They work nicely by adding the following to the document head:
<style type="text/css">
/**
* Additional styles for the controls.
*/
.jcarousel-control {
margin-bottom: 10px;
text-align: center;
}
.jcarousel-control a {
font-size: 75%;
text-decoration: none;
padding: 0 5px;
margin: 0 0 5px 0;
border: 1px solid #fff;
color: #eee;
background-color: #4088b8;
font-weight: bold;
}
.jcarousel-control a:focus,
.jcarousel-control a:active {
outline: none;
}
.jcarousel-scroll {
margin-top: 10px;
text-align: center;
}
.jcarousel-scroll form {
margin: 0;
padding: 0;
}
.jcarousel-scroll select {
font-size: 75%;
}
#mycarousel-next,
#mycarousel-prev {
cursor: pointer;
margin-bottom: -10px;
text-decoration: underline;
font-size: 11px;
}
</style>
<script type="text/javascript">
/**
* We use the initCallback callback
* to assign functionality to the controls
*/
function mycarousel_initCallback(carousel) {
jQuery('.jcarousel-control a').bind('click', function() {
carousel.scroll(jQuery.jcarousel.intval(jQuery(this).text()));
return false;
});
jQuery('.jcarousel-scroll select').bind('change', function() {
carousel.options.scroll = jQuery.jcarousel.intval(this.options[this.selectedIndex].value);
return false;
});
jQuery('.jcarousel-next').bind('click', function() {
carousel.next();
return false;
});
jQuery('.jcarousel-prev').bind('click', function() {
carousel.prev();
return false;
});
};
// Ride the carousel...
jQuery(document).ready(function() {
jQuery(".jcarousel-container").jcarousel({
scroll: 1,
initCallback: mycarousel_initCallback,
// This tells jCarousel NOT to autobuild prev/next buttons
buttonNextHTML: null,
buttonPrevHTML: null
});
});
</script>
When the final item is reached, the 'next' arrow dims, has 'disabled= true' added to it, but it is still clickable and moves the slider on.
Do you have any idea how to fix this? It works really nicely apart from this little bug?
Thanks
Comments
Comment #1
quicksketchAre you even using the jCarousel module? I don't think this support request is properly placed if you're just asking for help using the library. If you think this is truly a bug with the library, you should file a report with jCarousel at https://github.com/jsor/jcarousel/issues.
Comment #2
quicksketchAfter taking a look at your code, I found that the problem is likely caused by your own custom callback code:
If you want to have these control not continue sliding the carousel, you need to do a check that the button is not disabled.
I didn't verify this code, but some similar check should be necessary to actually make the control stop working if it has been disabled.
Anyway, I still think this is outside the scope of requests for the jCarousel module (you should ask questions like this to the jQuery mailing list or some other resource directly related to the library). Let's keep jCarousel module requests specific to Drupal and how to use the module.
Comment #3
couloir007 commentedI have the exact same problem. I'm using two carousels, one controlling the other. I tried quicksketch's suggestion, but it didn't work. The binding doesn't fire in the if statement as expected, but it progresses anyway, so it appears the the new binding doesn't override the built in event. I solved this by hiding the buttons with onBeforeAnimation and "if (carousel.last == carousel.size())..." It created other problems that I had to solve, but if it's never an issue to begin with, life would be much easier.