Sliding behavior

Chris's Avatar

Chris

06 Dec, 2012 09:12 PM

Hi,

First of all: Thank you for this really great Slider!

But in my current project i´ve got a little problem:

I´ve got a Slider with 4 Slides and thumbnails. Autoplay is activated and the loop parameter is set to true.

If the first Slide is visible and I click on the 4th thumbnail the slider animates to the last slide, showing all other slide in between, except the 3rd one. This behavior disappears if I set the loop parameter to false. But I have to set the loop parameter to true, otherwise the autoplay behavior rewinds the slider if the last slide changes to the first one. I´ve tried to increase the number of preloaded images but this won´t fix my problem (btw: I´ve tried to setup the images in the slider with an image- and with an a-tag.)

Is there a way to show all images in between if the slider animates from first to last slide? (I have seen that there are only three slides in the DOM, maybe this number can be increased?)

Another possible solution for my problem is to slide directly from first to last or from the currently visible slide to the slide which thumbnail was clicked, NOT showing any slide between this two ones. Is there a way to accomplish this behavior?

This is my code, which initializes the slider:

            sliderObj = $('#slider').royalSlider({

                      autoScaleSlider      : true
                    , autoScaleSliderWidth : 1500
                    , autoScaleSliderHeight: 950    
                    , imageScaleMode       : 'none'
                    , imageAlignCenter     : false
                    , imageScalePadding    : 0
                    , slidesSpacing        : 0
                    , loop                 : true
                    , loopRewind           : true
                    , transitionSpeed      : 1000
                    , arrowsNav            : false
                    , arrowsNavHideOnTouch : true
                    , navigateByClick      : false
                    , sliderTouch          : false
                    , sliderDrag           : true
                    , keyboardNavEnabled   : false
                    , controlNavigation    : 'thumbnails'
                    , slidesOrientation    : 'vertical'
                    , numImagesToPreload   : 1

                    , thumbs: {
                            orientation: 'horizontal'
                          , autoCenter   : false
                          , fitInViewport: false
                          , drag         : false
                          , touch        : false
                          , arrows       : false
                          , spacing      : false
                      }

                    , block: {
                          moveOffset: 5
                        , speed     : 200
                        , delay     : 0
                        , fadeEffect: true
                    }

                    , autoPlay: {
                          enabled     : false
                        , delay       : 500
                        , pauseOnHover: false
                    }

            }).data('royalSlider');

Thank you in advanced for your time and support!

  1. 1 Posted by Chris on 06 Dec, 2012 09:23 PM

    Chris's Avatar

    Sorry, I´ve made a mistake if i posted the above code.

    In my original code the loopRewind parameter is set to false, numImagesToPreload is set to 4 and autoplay delay is set to 10 seconds...

    But the Problem is still the same ;-)

  2. Support Staff 2 Posted by Dmytro Semenov on 06 Dec, 2012 10:27 PM

    Dmytro Semenov's Avatar

    Hi,

    Due to complexity of algorithm and dynamic numImagesToPreload option, it's a bit complex to implement. I can not just append image directly after current, as it'll cause flickering on mobile devices, and I can't clone slides as it causes memory issues.

    If you want slider just to be static container with four images, you'll have to disable loop, or use fade.

    But!

    Please get 9.3.4 version from build tool - http://dimsemenov.com/private

    I added slidesDiff option, it determines minimum slides between long transition. By default it's set to 2. Change it to 1, it'll skip the third slide.

    slidesDiff:1
    

    Dmitry

Reply to this discussion

Internal reply

Formatting help / Preview (switch to plain text) No formatting (switch to Markdown)

Attaching KB article:

»

Attached Files

You can attach files up to 10MB

If you don't have an account yet, we need to confirm you're human and not a machine trying to post spam.

Keyboard shortcuts

Generic

? Show this help
ESC Blurs the current field

Comment Form

r Focus the comment reply box
^ + ↩ Submit the comment

You can use Command ⌘ instead of Control ^ on Mac