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?

[3Necromancer]

i tried with a youtube video enclosed with iframe and tested both with chrome and firefox.

[Mottie]

Are you seeing any console errors? Chrome is being really picky when I try to test using dropbox and it's throwing errors for me.

[3Necromancer]

when i hit the play button on the video i got this

GET http://s.ytimg.com/yts/swfbin/ad3-vflfVm1jO.swf  www-embed-vflcCbKJI.js:193
    Hj www-embed-vflcCbKJI.js:193
    r.q www-embed-vflcCbKJI.js:24
    (anonymous function) www-embed-vflcCbKJI.js:180

[3Necromancer]

on firefox i don't get anything new (there are errors on loading) when i press the play button, but it slides away anyway :/

[3Necromancer]

thanks for the update. what exactly do i need to grab from the github? jquery.anythingslider.js or jquery.anythingslider.min.js as well?

what about the video sliding away while playing if autoPlayLocked is set?

[Mottie]

Get jquery.anythingslider.js and jquery.anythingslider.video.js for developement, and then get the .min versions for use on your site.

The autoPlayLocked problem should be fixed... I think LOL.

[3Necromancer]

What does the .min stands for? i wan't sure so i included/required all of 'em in the page...

[Mottie]

The .min is referring to the jquery.anythingslider.min.js and jquery.anythingslider.video.min.js files.

The .min files are just the compressed (minified) versions of the full code. It's smaller for production and makes your live site load a smaller file for faster loading.

[3Necromancer]

good news is the arrows are fixed ! bad news the videos aren't. it still slides away if a video is played, and now it does not stop the video (continues to play out of view) tested both on chrome and firefox.

RTL is more tricky then i thought. when RTL is used, it starts from slide #1 and goes back to the last slide instead of going to slide #2 not sure if that something you want to sort out or you think its the website that needs to feed the links in reversed order when using RTL. i guess it depends on your definition. the comment says "slideshow will move right-to-left" i guess it is true that both the animation plays right-to-left and the objects are being showed in the opposite order.

as i see it RTL means only the sliding effect change sides. not sure why would someone feed the slider in one order and then want to play it in reverse. might be good to add the functionality if someone ever finds it useful, but then it should start from the last slide and not the first one as it does now.

[Mottie]

Sorry, I thought I had tested it... I was in a hurry to get that next version out and didn't get a chance to test everything. I really need to add unit tests! Anyway, I'll try to get this fixed soon.

With the video, it should be working. Are you initializing the video extension? It changed in v1.9:

$(function(){
  $('#slider')
    .anythingSlider()
    // initialize the video extension, as desired (new v1.9)
    .anythingSliderVideo({
      // video id prefix; suffix from $.fn.anythingSliderVideo.videoIndex
      videoId         : 'asvideo',
      // this option replaces the `addWmodeToObject` option in the main plugin
      wmode           : "opaque",
      // auto load YouTube api script
      youtubeAutoLoad : true,
      // YouTube iframe parameters, for a full list see:
      // https://developers.google.com/youtube/player_parameters#Parameters
      youtubeParams   : {
        modestbranding : 1,
        iv_load_policy : 3,
        fs : 1,
        wmode: 'opaque' // this is set by the wmode option above, so no need to include it here
      }
    });
});

[3Necromancer]

my bad, i didn't look through the changelog. videos work perfect.

[3Necromancer]

what do you think about RTL feed? i mean showing the slides in reverse order. https://github.com/CSS-Tricks/AnythingSlider/issues/526#issuecomment-17089606

[Mottie]

Do you mean while the slideshow is playing?

Edit: Wouldn't that be like having the playRtl option set to false?

What do you think of this demo? It's basically as if I made the playRtl option modify the css only.

[3Necromancer]

do you mean the reversed index numbers? no, that not what i meant. as i understand playRTL supposed to move slides in the opposite direction, not reverse order. by reverse order i mean that if i have a slider with 3 slides/panels, cat, bear and a dog (in that order), with playRTL false i'll see the cat first, then the bear, then the dog. with playRTL true, i'll see the cat first, then the dog, then the bear as in in it plays the 1st slide/panel, then goes backwards to the last slide, and basically plays it in reversed order.

playReverse might be a good feature, but thats not how i understand RTL (right to left =/= reversed) and playReverse should start from the last slide anyway, or basically if playReverse then _startPanel = startPanel-1 _if startPanel == 0 then startPanel = n end end

or with short conditions startPanel = (startPanel -1 == 0) ? n : startPanel-1;

[Mottie]

Sorry, I meant for you to start the slideshow in that demo. The panels are set to float right, so the order is reversed, but when the slideshow plays, it still goes from slide 1 to slide 5.

I see what you mean by starting from the last panel, using startPanel; but if I add something internally to the plugin to set that panel, then it forces the actual start panel on the user when the playRtl option is true, because any number in that option would then be ignored. Wouldn't it just be easier to set the startPanel option as the last slide manually? Using your example, the order would still be correct: cat → dog → bear. It's just starting from the cat-panel instead of the dog-panel (it continues as cat → dog → bear → cat, etc because infiniteSlides is true).

[3Necromancer]

• i did play the demo and i don't see anything different then the current version.

you got me wrong. playRTL supposed to play the slides from the left to the right. why is it reversing the order of the panels? with playRTL false the next panel is panel++ with playRTL true the next panel is panel-- the order of panels should be the same for playRTL true or false.

i only suggested that you might want to add a feature that will play the panels in reverse order, but playRTL should not play it in reverse.

[Mottie]

Hi @3Necromancer!

Honestly, the way AnythingSlider has set up playRtl to reverse the order of the panels, swap the arrows and slideshow direction were all done without know exactly how it should be done on a RTL page. I do and would appreciate your feedback on how to fix it so that it works "properly". Basically, I would like to know what is already correct and what needs to be fixed?

Thanks!

[3Necromancer]

the arrows are correct now.

there are two 'issues' remaining: 1) that the panels play backwards as i wrote above (next panel = current panel - 1) which plays the panels in reverse order which it shouldn't. img1 img2 img3 img4 img5

under RTL should play (just like playRTL: false): img1 -> img2 -> img3 -> img4 -> img5 -> img1 -> etc.. (note:meaning the order is img1 first, then img2, then img3 etc... the arrow shows the order of appearance and not the slide direction) and not img1 -> img5 -> img4 -> img3 -> img2 -> img1 -> img5 -> etc... as it does now.

2) panel indexing. now that really depends on personal perspective. Right to left is read from the right to the left, but we do math the normal way - left to right so im not sure how would you like to print the index of the panels on RTL. i mean number the panels 1,2,3,4,5 and playing going 1 -> 2 -> 3 -> 4 -> 5 -> 1 -> etc... or 5,4,3,2,1 and playing going 1 -> 2 -> 3 -> 4 -> 5 -> 1 -> etc... both should work for RTL people, but some might want it one way and others the other way. you could add an option, but as you do voluntary work i really don't want you to spend too much time over almost irrelevant things.

you do a great job! after looking at over 20 sliders (including sliders developed by commercial companies) i chose yours, and i think i made the right choice :)