I'm currently using jQuery.Cycle to cycle through a few child <div> tags. However, I want the default cycle fx to be fade, and when I click on the next or prev selectors, I want the cycle fx to temporarily change to scrollRight or scrollLeft depending on the selector clicked.
Is this possible?
jQuery code, if necessary:
$('#banner_content').cycle({
    fx: 'fade', // choose your transition type, ex: fade, scrollUp, shuffle, etc...
    timeout: 6500,
    speed: 2000,
    next: $("#right_arrow a"),
    prev: $("#left_arrow a"),
});
                Ok, I added my question on the jQuery Forum, and the creator responded with the following answer.
Here is my code that I developed for this:
var slideIndex = 0;
var nextIndex = 0;
var prevIndex = 0;
$('#banner_content').cycle({
    fx: 'fade',//fx: 'scrollHorz', // choose your transition type, ex: fade, scrollUp, shuffle, etc...
    timeout: 8000,
    speed: 1000,
    easingIn:20,
    easingOut:40,
    after: function(currSlideElement, nextSlideElement, options) {
        slideIndex = options.currSlide;
        nextIndex = slideIndex + 1;
        prevIndex = slideIndex -1;
        if (slideIndex == options.slideCount-1) {
            nextIndex = 0;
        }
        if (slideIndex == 0) {
            prevIndex = options.slideCount-1;
        }
    }
}); 
$("div.left_arrow a").click(function () {
    $('#banner_content').cycle(nextIndex, "scrollRight");
});
$("div.right_arrow a").click(function () {
    $('#banner_content').cycle(prevIndex, "scrollLeft");
});
                        If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With