How to stop sliding when reaching the last image in jcarousel???
hi
i'm having an jcarousel dificullties.
I'm using a jcarousel slider with an animation function i've created (fadeIn-fadeOut),
but when i'm clicking on the next button the slider doesn't stop at the last side, but goes on and there's a lot empty space-slides.
so how to stop sliding when reaching the last image in jcarousel???
thanks in advance
here's the code:
<?php if( $this->getRequest()->getModuleName() =="cms"): ?>
<script type="text/javascript">
//<![CDATA[
function mycarousel_initCallback(carousel) {
jQuery('#mycarousel-next').bind('click', function() {
carousel.next();
return false;
});
jQuery('#mycarousel-prev').bind('click', function() {
carousel.prev();
return false;
});
};
function mycarousel_animate(carousel){
jQuery('#mycarousel-next').click(function() {
jQuery('#mycarousel').fadeOut('slow', function() {
jQuery('#mycarousel').fadeIn('slow')
carousel.next();
});
});
jQuery('#mycarousel-prev').click(function() {
jQuery('#mycarousel').fadeOut('slow', function() {
jQuery('#mycarousel').fadeIn('slow')
carousel.prev();
});
});
}
var hash=1;
if (window.location.hash) {
hash = parseInt(window.location.hash.slice(1));
}
jQuery(document).ready(function() {
jQuery('#mycarousel').jcarousel({
visible : 7,
start: hash,
scroll: 7,
animation: 1700,
//wrap: 'circular',
initCallback: mycarousel_initCallback,
itemVisibleInCallback : mycarousel_animate,
buttonNextHTML: null,
buttonPrevHTML: null
//itemLoadCallback: {
// onBeforeAnimation: carouselFadeOut,
//onAfterAnimation: carouselFadeIn
//}
});
});
//]]>
</script>
<div id="mycarousel" class="jcarousel-skin-tango">
<a href="#" id="mycarousel-prev"> </a>
<ul>
<li><a href="/#1"><img src="/media/wysiwyg/newthumbnails/page01.jpg" alt="" /></a></li>
<li><a href="/page2#2"><img src="/media/wysiwyg/newthumbnails/page02.jpg" alt="" /></a></li>
<li><a href="/page4#3"><img src="/media/wysiwyg/newthumbnails/page04.jpg" alt="" /></a></li>
<li><a href="/page5#4"><img src="/media/wysiwyg/newthumbnails/page05.jpg" alt="" /></a></li>
<li><a href="/page6#5"><img src="/media/wysiwyg/newthumbnails/page06.jpg" alt="" /></a></li>
<li><a href="/page7#6"><img src="/media/wysiwyg/newthumbnails/page07.jpg" alt="" /></a></li>
<li><a href="/page8#7"><img src="/media/wysiwyg/newthumbnails/page08.jpg" alt="" /></a></li>
<li><a href="/page9#8"><img src="/media/wysiwyg/newthumbnails/page09.jpg" alt="" /></a></li>
<li><a href="/page10#9"><img src="/media/wysiwyg/newthumbnails/page10.jpg" alt="" /></a></li>
<li><a href="/page11#10"><img src="/media/wysiwyg/newthumbnails/page11.jpg" alt="" /></a></li>
<li><a href="/page12#11"><img src="/media/wysiwyg/newthumbnails/page12.jpg" alt="" /></a></li>
<li><a href="/page13#12"><img src="/media/wysiwyg/newthumbnails/page13.jpg" alt="" /></a></li>
<li><a href="/page14#13"><img src="/media/wysiwyg/newthumbnails/page14.jpg" alt="" /></a></li>
<li><a href="/page15#14"><img src="/media/wysiwyg/newthumbnails/page15.jpg" alt="" /></a></li>
<li><a href="/page16#15"><img src="/media/wysiwyg/newthumbnails/page16.jpg" alt="" /></a></li>
</ul>
<a href="#" id="mycarousel-next"> </a>
</div>
<?php endif; ?>