1

I wonder if anyone has used RoyalSlider and has the same question as me?

I've used RoyalSlider for 2 projects of mine so far and it's great, though I am not sure if this is an issue or a function that has not yet been integrated.

I have set the slider to be autoPlay. It's working fine. But I noticed as soon as I touch the slide (either clicking on it or swiping it). The autoPlay just stops (regardless of pauseOnHover was true or false).

Ideally, i think it is best to have the autoPlay to resume after users interact with the slider?

My markup is as followed:

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 ------------------->   
  1. Jquery

            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',
          });
        });
    

I don't expect an instant fix for this because it's fine as is, but would like to know if this has been considered by anyone before me? Thank you! Cheers.

2 Answers 2

1

You need to include stopAtAction: false since the default is set to true.

Like this:

autoPlay: {
        // autoplay options go gere
        enabled: true,
        stopAtAction: false,
        pauseOnHover: true,
        delay: 2500,
    },
0
-1
    $('.rsArrowRight').addClass("AutoPlaySlider");
    setInterval(function() {$('.AutoPlaySlider').trigger('click');}, 3000);
    $('.royalSlider').hover(function () {
        $(this).find('.rsArrowRight').toggleClass("AutoPlaySlider");
    });
1
  • 2
    Please add a text to describe the goal of your code or how it answer to the question.
    – A.L
    Oct 21, 2014 at 12:11

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.