Anything Slider 可防止无限缩略图轮播循环

发布于 2024-11-28 19:29:31 字数 2085 浏览 1 评论 0原文

我正在使用 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 技术交流群。

扫码二维码加入Web技术交流群

发布评论

需要 登录 才能够评论, 你可以免费 注册 一个本站的账号。

评论(1

江挽川 2024-12-05 19:29:31

您看过这个演示吗?基本上只需将 infiniteSlides 选项设置为 false 并将 stopAtEnd 设置为 true

$('#slider').anythingSlider({
    infiniteSlides: false,
    stopAtEnd: true
});

Did you see this demo? Basically just set the infiniteSlides option to false and stopAtEnd to true

$('#slider').anythingSlider({
    infiniteSlides: false,
    stopAtEnd: true
});
~没有更多了~
我们使用 Cookies 和其他技术来定制您的体验包括您的登录状态等。通过阅读我们的 隐私政策 了解更多相关信息。 单击 接受 或继续使用网站,即表示您同意使用 Cookies 和您的相关数据。
原文