I am using JQuery Anything Slider / PHP / MySQL. Everything is working as expected in my code. However I would like to disable the back arrow of the thumbnail carousel if you're displaying the first set of thumbnail. I would also like to disable the forward if you're displaying the last set of thumbnail from the image set. In other word I want to prevent the thumbnail carousel from looping indefinitely. Any help would be greatly appreciated. Here is my code.
<div class="anythingSlider">
<div class="thumb_wrapper">
<ul style="list-style-type: none;">
<?php
$new = 1;
$count = 0;
do {
if ($new == 1)
{echo '<li style="list-style-type: none;">';} ?> <div class="thumb" data-count="<?php echo $count; ?>" data-thumb="<?php echo $image_row['thumb']; ?>" ><img title="<?php echo $image_row['description']; ?>" data-image="<?php echo $image_row['image']; ?>" src="<?php echo $image_row['thumb']; ?>" alt="<?php echo $image_row['description']; ?>" /></div>
<?php $count++;
if ($new == 5)
{ echo "</li>"; $new = 1;
} else {
$new ++;}
}
while ($image_row = mysql_fetch_array($image)); ?>
</ul>
</div>
</div>
Additional information... Here are my Anything Slider options.
function formatText(index, panel) {
return index + "";
};
$(function () {
$('.anythingSlider').anythingSlider({
easing: "easeInOutExpo",
autoPlay: false,
delay: 3000,
startStopped: false,
animationTime: 600,
hashTags: true,
buildNavigation: true,
pauseOnHover: true,
startText: "Go",
stopText: "Stop",
navigationFormatter: formatText
});
});
Did you see this demo? Basically just set the infiniteSlides
option to false
and stopAtEnd
to true
$('#slider').anythingSlider({
infiniteSlides: false,
stopAtEnd: true
});