playRtl change swap arrows?

[3Necromancer]

i think that when playRtl is used, the forward and backward arrow functions should be swapped as well. Because when you click the left arrow which supposed to be forward/next it brings back the previous slide.
not sure how to do it right now, guess only possible with making an HTML elements and appending the function to it?

[Mottie]

Hmm, I though the plugin did swap the functions of the buttons internally, but you can always do this yourself easily using any of the these three methods to actually swap the arrows:

1 ) use CSS to swap the locations of the arrows.

2. use the appendForwardTo and appendBackTo options to move the arrows anywhere you desire.

3. add external arrows to control the slider using the api.

[3Necromancer]

i tried the easiest way (for me), with the .css
swapped them up, but the animation that brings it into view is still in the wrong way.
tried to make some changes in the .css without success. fireforx developer tools seems to not show the changes correctly making it even more difficult to find the right settings.

[3Necromancer]

on chrome the arrows appear to fade in, on firefox the right arrow just pops out, while the left one has a sliding in animation but from outside of the slider instead from the inside :/

[Mottie]

Can you please modify this demo so I can see the code you're using and hopefully help resolve this issue :)

[3Necromancer]

sorry, im not sure how to save the changes so you could see them.
i guess want the slider initialization values

        $('#slider').anythingSlider({
            theme               : "minimalist-square", // Theme name
            mode                : "horiz",   // Set mode to "horizontal", "vertical" or "fade" (only first letter needed); replaces vertical option
            expand              : false,     // If true, the entire slider will expand to fit the parent element
            resizeContents      : true,      // If true, solitary images/objects in the panel will expand to fit the viewport
            showMultiple        : false,     // Set this value to a number and it will show that many slides at once
            easing              : "swing",   // Anything other than "linear" or "swing" requires the easing plugin or jQuery UI

            buildArrows         : true,      // If true, builds the forwards and backwards buttons
            buildNavigation     : true,      // If true, builds a list of anchor links to link to each panel
            buildStartStop      : false,      // If true, builds the start/stop button

            appendForwardTo     : null,      // Append forward arrow to a HTML element (jQuery Object, selector or HTMLNode), if not null
            appendBackTo        : null,      // Append back arrow to a HTML element (jQuery Object, selector or HTMLNode), if not null
            appendControlsTo    : null,      // Append controls (navigation + start-stop) to a HTML element (jQuery Object, selector or HTMLNode), if not null
            appendNavigationTo  : null,      // Append navigation buttons to a HTML element (jQuery Object, selector or HTMLNode), if not null
            appendStartStopTo   : null,      // Append start-stop button to a HTML element (jQuery Object, selector or HTMLNode), if not null

            toggleArrows        : true,     // If true, side navigation arrows will slide out on hovering & hide @ other times
            toggleControls      : false,     // if true, slide in controls (navigation + play/stop button) on hover and slide change, hide @ other times

            startText           : "Start",   // Start button text
            stopText            : "Stop",    // Stop button text
            forwardText         : "«", // Link text used to move the slider forward (hidden by CSS, replaced with arrow image)
            backText            : "»", // Link text used to move the slider back (hidden by CSS, replace with arrow image)
            tooltipClass        : "tooltip", // Class added to navigation & start/stop button (text copied to title if it is hidden by a negative text indent)

            // Function
            enableArrows        : true,      // if false, arrows will be visible, but not clickable.
            enableNavigation    : true,      // if false, navigation links will still be visible, but not clickable.
            enableStartStop     : true,      // if false, the play/stop button will still be visible, but not clickable. Previously "enablePlay"
            enableKeyboard      : true,      // if false, keyboard arrow keys will not work for this slider.

            // Navigation
            startPanel          : 1,         // This sets the initial panel
            changeBy            : 1,         // Amount to go forward or back when changing panels.
            hashTags            : false,      // Should links change the hashtag in the URL?
            infiniteSlides      : true,      // if false, the slider will not wrap & not clone any panels
            navigationFormatter : null,      // Details at the top of the file on this use (advanced use)
            navigationSize      : false,     // Set this to the maximum number of visible navigation tabs; false to disable

            // Slideshow options
            autoPlay            : true,     // If true, the slideshow will start running; replaces "startStopped" option
            autoPlayLocked      : true,     // If true, user changing slides will not stop the slideshow
            autoPlayDelayed     : true,     // If true, starting a slideshow will delay advancing slides; if false, the slider will immediately advance to the next slide when slideshow starts
            pauseOnHover        : true,      // If true & the slideshow is active, the slideshow will pause on hover
            stopAtEnd           : false,     // If true & the slideshow is active, the slideshow will stop on the last page. This also stops the rewind effect when infiniteSlides is false.
            playRtl             : true,     // If true, the slideshow will move right-to-left

            // Times
            delay               : 5000,      // How long between slideshow transitions in AutoPlay mode (in milliseconds)
            resumeDelay         : 6000,     // Resume slideshow after user interaction, only if autoplayLocked is true (in milliseconds).
            animationTime       : 600,       // How long the slideshow transition takes (in milliseconds)
            delayBeforeAnimate  : 0,         // How long to pause slide animation before going to the desired slide (used if you want your "out" FX to show).

            // Callbacks
            onBeforeInitialize  : function(e, slider) {}, // Callback before the plugin initializes
            onInitialized       : function(e, slider) {}, // Callback when the plugin finished initializing
            onShowStart         : function(e, slider) {}, // Callback on slideshow start
            onShowStop          : function(e, slider) {}, // Callback after slideshow stops
            onShowPause         : function(e, slider) {}, // Callback when slideshow pauses
            onShowUnpause       : function(e, slider) {}, // Callback when slideshow unpauses - may not trigger properly if user clicks on any controls
            onSlideInit         : function(e, slider) {}, // Callback when slide initiates, before control animation
            onSlideBegin        : function(e, slider) {}, // Callback before slide animates
            onSlideComplete     : function(slider) {},    // Callback when slide completes; this is the only callback without an event "e" parameter

            // Interactivity
            clickForwardArrow   : "click",         // Event used to activate forward arrow functionality (e.g. add jQuery mobile's "swiperight")
            clickBackArrow      : "click",         // Event used to activate back arrow functionality (e.g. add jQuery mobile's "swipeleft")
            clickControls       : "click focusin", // Events used to activate navigation control functionality
            clickSlideshow      : "click",         // Event used to activate slideshow play/stop button
            allowRapidChange    : true,           // If true, allow rapid changing of the active pane, instead of ignoring activity during animation

            // Video
            resumeOnVideoEnd    : true,      // If true & the slideshow is active & a supported video is playing, it will pause the autoplay until the video is complete
            resumeOnVisible     : true,      // If true the video will resume playing (if previously paused, except for YouTube iframe - known issue); if false, the video remains paused.
            addWmodeToObject    : "opaque",  // If your slider has an embedded object, the script will automatically add a wmode parameter with this setting
            isVideoPlaying      : function(base){ return false; } // return true if video is playing or false if not - used by video extension


        });

if its uncomfortable i can upload the file somewhere.

[Mottie]

To save your changes in that demo, just click "Update" at the top. No need to register, login or signup or anything.

I added the default settings you shared to this demo and everything seems to work fine for me.

Maybe if you changed the theme to the default, then compare it to the original you will notice that the navigation order is also reversed. Is this what you mean?

Also when you compare the original (non-RTL) demo, you'll see that pressing the left arrow moves the slides to the right. But when the playRtl option is true, pressing the left arrow moves the slides to the left. It's reversed to me.

[3Necromancer]

thats the problem. then it shouldn't be reversed.
when i press the left arrow i want the slides to move to the right.
why? because the automatic slider pulls from the left to the right, so when i push the button in the direction of the automatic slide i expect to see a new slide, and not the old one that was just pushed out.
this is true to the left-to-right slider. slides come out of the right 'border', and if you push the right arrow you'll get a new slide, and not an old one.

[Mottie]

Then I would suggest not using the playRtl option (leave it false), then add this css, so the slider will still work on pages that have direction set to rtl:

.anythingSlider .anythingWindow {
    direction: ltr;
    unicode-bidi: bidi-override;
}

[3Necromancer]

already included it ^^
not a big deal, but for RTL people it makes more sense for the automatic draw to be RTL, just as its more intuitive the other way for you.
any chance to undo that RTL swapping pull directions? as it makes little sense.

[Mottie]

Sure that shouldn't be a problem. But I wonder if I should just remove that option completely? The slideshow is also reversed, should it not switch either?

[3Necromancer]

my opinion on the matter is that arrows are signs that everyone, regardless of their culture interpret the same way.
like roadway signs.
so it doesn't matter if youre a LTR or RTL, or even if you don't know how to read, you still expect that once you push the right arrow, a new slide will be pulled from the right and moved to the left.

only the direction of the autoPlay should be changed.
this is because it is somewhat connected to the way you read.
on Left-to-right, you first read the left page of a book, and then the right page. when you turn a page, you hold the right corner and move it to the left.
so you expect new content to come from the right, and the "flow" is from the right to the left.
for Right-to-left its reversed, we first read the right page and then the left one, and the "normal flow" is from the left to the right.
so the autoplay direction should be reversed with RTL, but the arrows should function normally (as in the LTR).

am i sound crazy?

[3Necromancer]

i just noticed that with autoPlayLocked it continues to rotate video slide even if video is played.
seems like resumeOnVideoEnd is not overriding autoPlayLocked

[Mottie]

Hmm, don't you mean the opposite? I was just testing this and it seems that when resumeOnVideoEnd is false, it overrides the autoPlayLocked and the slideshow stops, but still appears to be running; this is a bug to me, because the autoPlayLocked option should always keep the slideshow running.

[3Necromancer]

i have
resumeOnVideoEnd set to true
the comment says:
// If true & the slideshow is active & a supported video is playing, _it will pause the autoplay until the video is complete_

and yet when i play the video it still slides away in the middle.

autoPlayLocked says
// If true, user changing slides will not stop the slideshow

playing a video =/= user changing slides. its a common sense that if i clicked 'play' on the video i don't want it to slide away while i watch it.

but i do want it to resume with the automatic sliding as the video is done playing. that what i was trying to achieve.

[Mottie]

Hmm, resumeOnVideoEnd is true by default and for me it is pausing the slideshow while the video is playing. Is it only happening with HTML5 video?