代码之家 › 专栏 › 技术社区 › Austeroid

在手动迭代滑块后,autoPlay不会恢复(Dmitry Semenov的RoyalSlider)

autoplay slider html jquery

Austeroid · 技术社区 · 11 年前

我想知道是否有人使用过RoyalSlider,并且和我有同样的问题?

到目前为止,我已经为我的两个项目使用了RoyalSlider,它很棒,但我不确定这是一个问题还是一个尚未集成的函数。

我已将滑块设置为自动播放。工作正常。但我一触到幻灯片(点击或滑动)就注意到了。自动播放只是停止(不管pauseOnHover是真是假)。

理想情况下,我认为最好在用户与滑块交互后恢复自动播放?

我的标记如下:

1.HTML

<div class="hero desktop z-lv3">
            <div class="royalSlider-desktop rsDefault">
                <div class="rsContent">
                    <img class="rsImg" src="img/global/hero1.jpg" alt="" />
                </div>
                <div class="rsContent">
                    <img class="rsImg" src="img/global/hero2.jpg" alt="" />
                </div>
                <div class="rsContent">
                    <img class="rsImg" src="img/global/hero3.jpg" alt="" />
                </div> 
                <div class="rsContent">
                    <img class="rsImg" src="img/global/hero1.jpg" alt="" />
                </div>
                <div class="rsContent">
                    <img class="rsImg" src="img/global/hero1.jpg" alt="" />
                </div>
                <div class="rsContent">
                    <img class="rsImg" src="img/global/hero1.jpg" alt="" />
                </div>
                <div class="rsContent">
                    <img class="rsImg" src="img/global/hero1.jpg" alt="" />
                </div>  
            </div>  <!------------------- End Slider Desktop  ------------------->
         </div> <!------------------- End Slider Desktop Wrapper ------------------->

滑动分页

        jQuery(document).ready(function($) {
      $('.royalSlider-desktop').royalSlider({
        arrowsNav: true,
        loop: true,
        keyboardNavEnabled: true,
        imageScaleMode: 'fill',
        autoScaleSlider: true, 
        autoScaleSliderWidth: 1600,
        autoScaleSliderHeight:800,
        controlNavigation: 'bullets',
        controlsInside: false,
        navigateByClick: true,
        autoPlay: {
                // autoplay options go gere
                enabled: true,
                pauseOnHover: true,
                delay: 2500,
            },
        transitionType:'fade',
      });
    });

我不希望立即解决这个问题,因为它很好,但我想知道在我之前是否有人考虑过这个问题?非常感谢。干杯

2 回复 | 直到 9 年前

coldpumpkin 11 年前

你需要包括 stopAtAction: false 因为默认设置为 true .

这样地:

autoPlay: {
        // autoplay options go gere
        enabled: true,
        stopAtAction: false,
        pauseOnHover: true,
        delay: 2500,
    },

-1

Tekin 11 年前

    $('.rsArrowRight').addClass("AutoPlaySlider");
    setInterval(function() {$('.AutoPlaySlider').trigger('click');}, 3000);
    $('.royalSlider').hover(function () {
        $(this).find('.rsArrowRight').toggleClass("AutoPlaySlider");
    });

推荐文章

code-geek · Jquery根据单选按钮选择隐藏或显示文本字段

9 月前

Jamie · 在CSS链接的文件名中添加Jinja占位符

9 月前

ptownbro · 重叠分区标签,同时保持以下所有分区和内容就位

9 月前

Luke Frost IEng MIMechE · Bootstrap 5.3在Div中的项目位置没有如我所期望的那样显示

9 月前

Reegan · 使用Angular ngFor指令在html中渲染嵌套对象值

9 月前

wqyutv · 当找不到文件时,任何破坏错误的东西都不会出现,我该怎么解决这个问题?

9 月前

user29519291 · 为不同的变量创建一个带有可重用Click函数的简单菜单

9 月前

Gukkey · 在React中明确隐藏日期类型输入后,如果我单击父div,如何显示日期选择器?

10 月前

Lorenzo Bertolaccini · 在Angular项目中通过对话框后,在控制台中显示但在HTML中不显示的数据数组

10 月前

john Rizzo · 按钮背景颜色、悬停和活动状态存在问题

10 月前