Grow your CSS skills. Land your dream job.

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):

    _http://dl.dropbox.com/u/12310886/Work/anythingslider/slide_fade.html_

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

    _http://dl.dropbox.com/u/12310886/Work/anythingslider/slide_left.html_
    _http://dl.dropbox.com/u/12310886/Work/anythingslider/slide_right.html_

    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](http://stackoverflow.com/a/15669573/145346) worked out for you.

    # March 27, 2013 at 8:06 pm

    @Mottie,

    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: http://dl.dropbox.com/u/12310886/Work/anythingslider/slide_left.html

    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](https://github.com/CSS-Tricks/AnythingSlider/wiki/FX), you’ll find an option named `stopRepeat`. Just set it to `true`:

    $(‘#slider’)
    .anythingSlider({
    // slider options
    })
    .anythingSliderFx({
    // 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

    @Mottie,

    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: ](http://dl.dropbox.com/u/12310886/Work/anythingslider/slide_left.html “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](http://jsfiddle.net/Mottie/ycUB6/5148/):

    $(function () {
    $(‘#slider’).anythingSlider({
    mode: ‘fade’,
    autoPlay: true,
    delay: 2000,
    pauseOnHover: false,
    buildStartStop: false,
    buildArrows: false
    }).anythingSliderFx({
    ‘.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.

*May or may not contain any actual "CSS" or "Tricks".