Forums

The forums ran from 2008-2020 and are now closed and viewable here as an archive.

Home Forums JavaScript AnythingSlider FX

  • This topic is empty.
Viewing 7 posts - 1 through 7 (of 7 total)
  • Author
    Posts
  • #43712
    src0010
    Participant

    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!

    #129951
    Mottie
    Member

    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.

    #129976
    src0010
    Participant

    @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.

    #129992
    Mottie
    Member

    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.
    });

    #130166
    src0010
    Participant

    @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.

    #130427
    Mottie
    Member

    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
    });
    });

    #130473
    src0010
    Participant

    @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)
  • The forum ‘JavaScript’ is closed to new topics and replies.