The Lodge is members-only design/dev videos and Office Hours.

Next Office Hours Session: "Implementing an SVG Icon System" Nov 30 - 6:00 PM Eastern

AnythingSlider FX

  • # March 27, 2013 at 1:17 pm

    I am trying to use various FX with AnythingSlider (left, right, & fade specifically in this case) & running into some issues. With all slides set to the ‘Fade’ FX everything seems to work correctly (see link below):


    However, with all slides set to either the ‘Left’ or ‘Right’ FX the slides get out of sync as it rotates (see links below):


    Any idea on what’s going on?

    Thanks in advance!

    # March 27, 2013 at 5:35 pm

    Hey again! I hadn’t gotten around to checking out these forums until just now… hopefully [my answer on StackOverflow]( worked out for you.

    # March 27, 2013 at 8:06 pm


    Option #1 as you outlined in the StackOverflow link above did the trick…thanks!

    I do have a secondary question if it’s alright to ask within the same thread. If you take a look at my example page using all ‘left’ transition Fx:

    When the page loads you will notice the initial slide exhibits the following behavior:

    1) initial slide image (slide 1) loads and then transitions left
    2) the same initial slide image (slide 1) then transitions out right then back left
    3) from there each slide follows the same (expected) pattern of transitioning out right then back left (as noted in item 2 above)

    I was asked if there was a way to prevent the initial slide (slide 1) from displaying that initial left transition? Hope that makes sense! And might be more or less noticeable based on environment.

    # March 28, 2013 at 12:54 am

    If you look at the [FX docs](, you’ll find an option named `stopRepeat`. Just set it to `true`:

    // slider options
    // FX definitions
    // ‘class or ID’ : [ ‘predefined-FX’, ‘distance’, ‘time’, ‘easing’ ]
    // FX options
    stopRepeat : true // When true, the FX will not repeat when clicking on the current navigation tab.

    # March 29, 2013 at 5:01 pm


    Thanks that did the job! I am now, however, trying to figure out one addition issue. On the first rotation of slides there is small flicker that occurs during the Fx transition. It seems to occur only of the first rotation and goes away after the first repeat.

    [Example: ]( “slider”)

    Any ideas? I haven’t been able to figure it out so far.

    # April 2, 2013 at 12:46 pm

    Hi @src0010!

    Try fade mode instead – [demo](

    $(function () {
    mode: ‘fade’,
    autoPlay: true,
    delay: 2000,
    pauseOnHover: false,
    buildStartStop: false,
    buildArrows: false
    ‘.left .content-wrapper’:
    }, {
    timeIn: 300,
    timeOut: 350,
    stopRepeat: true

    # April 2, 2013 at 3:30 pm

    @Mottie, Looks like setting mode to ‘fade’ did the trick. You’ve been a huge help…Thanks!

Viewing 7 posts - 1 through 7 (of 7 total)

You must be logged in to reply to this topic.

There's a whole bunch of content on CSS-Tricks.

Search for Stuff   •   Browse the Archives

Get the Newsletter ... or get the RSS feed