Home › Forums › JavaScript › AnythingSlider FX
- This topic is empty.
-
AuthorPosts
-
March 27, 2013 at 1:17 pm #43712src0010Participant
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 #129951MottieMemberHey 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 #129976src0010ParticipantOption #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 #129992MottieMemberIf 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 #130166src0010ParticipantThanks 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 #130427MottieMemberHi @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 #130473 -
AuthorPosts
- The forum ‘JavaScript’ is closed to new topics and replies.