Anything Slider 可防止无限缩略图轮播循环
我正在使用 JQuery Anything Slider / PHP / MySQL。我的代码中一切都按预期工作。但是,如果您显示第一组缩略图,我想禁用缩略图轮播的后退箭头。如果您要显示图像集中的最后一组缩略图,我还想禁用转发。换句话说,我想防止缩略图轮播无限循环。任何帮助将不胜感激。这是我的代码。
<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>
其他信息...这是我的任何滑块选项。
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
});
});
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
});
});
如果你对这篇内容有疑问,欢迎到本站社区发帖提问 参与讨论,获取更多帮助,或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱,如果其他用户或者作者回复了您的评论,将不能在第一时间通知您!
发布评论
评论(1)
您看过这个演示吗?基本上只需将
infiniteSlides
选项设置为false
并将stopAtEnd
设置为true
Did you see this demo? Basically just set the
infiniteSlides
option tofalse
andstopAtEnd
totrue