Owlcarousel2: owlcarousel Fade Effect

[shantanuay]

I required a plugin for my project and i found OWL Carousel as best to fit my needs. But one thing that i am stuck with the animate fade effect.
http://owlcarousel.owlgraphic.com/demos/animate.html

In the demo it says fade effect, when trying to click on the dots its working fade effect but when swipe its sliding which should be similar to fade effect. Can anybody suggest same fade effect for dots click and the swipe.

[NPanayotov]

I think ( not sure) that you can't change the swipe effect. Because it's swiping. You can set the mouseDrag: false. And this will disable the mouse Drag for desktop and you can still use the swipe on mobile devices.

[mummybot]

This seems to be deliberate on the part of the plugin authors. One could argue that swipe behaviour should always be what a user expects. Whether you may agree or disagree with this or not, it is what Owl Carousel is programmed to do.

Our design team want fadeIn/fadeOut behaviour on swipe. To get around this I did the following:

• Stopped touchDrag and mouseDrag in the settings when initiating the carousel.
• Bind new touch swipe left and right events to the DOM element using your favourite method (I used Hammer JS).
• Trigger the next.owl.carousel and prev.owl.carousel Owl events based on swipe left and right.

The one gotcha is that the owl.animate plugin is currently listening to drag and dragged events even if touchDrag and mouseDrag are set to false. If it detects one of these events it stops the animate CSS from running. To get around this I added a drag.owl.carousel event listener to then trigger the translated.owl.carousel event.

$carouselObject = $(element);

$carouselObject.owlCarousel({
    items: 1,
    animateIn: 'fadeIn',
    touchDrag: false,
    mouseDrag: false
});

if (settings.touchDrag === false && settings.mouseDrag === false) {
    addSwipeEventsForAnimation(element, $carouselObject);
}

function addSwipeEventsForAnimation(node, $carouselObject) {
    var hamEvents = new Hammer(node, {});

    hamEvents.on("swiperight", function(){
        $carouselObject.trigger('prev.owl.carousel');
    });
    hamEvents.on("swipeleft", function(){
        $carouselObject.trigger('next.owl.carousel');
    });

    // Hack as even though touchDrag and mouseDrag are disabled, the drag event is still fired when a user swipes.
    // The drag event is listened to by owl.animate plugin and sets swapping to false (CSS3 animation).
    // By triggering the translated event it resets swapping to true.
    $carouselObject.on('drag.owl.carousel',function(){
        $carouselObject.trigger('translated.owl.carousel');
    });
}

I suspect the reason for not supporting drag is swiping elements works best for users when they are able to swipe and see movement of the element they are pressing. By providing the many custom animations from animation.css or even rolling your own, there is no easy way for owl.carousel to provide this partial visual feedback to users inline with those animations.

I anticipate that once you see swipe doing the fadeIn/Out you will be disappointed with the effect. You probably will want to get all fancy like and use the touch library to provide partial swipe feedback to users. Owl uses internal onDragStart, onDragMove and onDragEnd methods to show the partial translation of the slide as the user swipes with a snap to point. You could write some code to partially fade out the image as the user swipes more and on completion trigger the prev or next method.

It would be nice if Owl could work out what your animation is and using whatever keyframes you have set or even its total duration then partially perform the animation based on the user's swipe length. However as earlier mentioned I suspect that is not as simple as it sounds.

[mummybot]

Here is a fuller solution I mentioned in my earlier comment (using the same carousel settings as above). It detects the swipe left or right and based on the distance applies a style to the current slide image to fade it. On 100% fade it triggers the owl carousel prev or next events. Please note this will only work with carousels containing images.

// Owl carousel doesn't allow for swipe events to use the custom animations
// Manually add separate swipe events to trigger previous and next.
addSwipeEventsForAnimation: function(node, $carouselObject) {
    var Helpers = MiniF54.Helpers,
        settings = {
            direction: {
                LEFT: 'left',
                RIGHT: 'right'
            },
            triggerDistance: 200,
            panned: false
        },
        imgs = node.querySelectorAll('img');

    // Create a new Hammer JS touch event on each image as we are modifying the images.
    $carouselObject.hamEvents = [new Hammer(node, {})];
    for (var i=0;i<imgs.lenght;i++) {
        $carouselObject.hamEvents.push(new Hammer(imgs[i], {}));
    }

    function onMove(e, direction){
        var distance = (direction === settings.direction.RIGHT) ? e.deltaX : e.deltaX * -1;

        if (distance > settings.triggerDistance) {
            settings.panned = true;

            if (direction === settings.direction.RIGHT) {
                $carouselObject.trigger('prev.owl.carousel');
            } else {
                $carouselObject.trigger('next.owl.carousel');
            }

        } else {
            var amount = (100 - (distance / settings.triggerDistance * 100)) / 100;
            // This changes the opacity, but you can set the style to whatever effect you want.
            // I'd recommended to use animateIn transitions only as the swipe is effectively doing the animate out.
            e.target.style.opacity = amount;
        }
    }

    function panstart(e) {
        e.preventDefault();
        settings.panned = false;
    }
    function panleft(e) {
        e.preventDefault();
        if (!settings.panned) {
            onMove(e, settings.direction.LEFT);
        }
    }
    function panright(e) {
        e.preventDefault();
        if (!settings.panned) {
            onMove(e, settings.direction.RIGHT);
        }
    }
    // On completion of action set the style of the image back to its beginning state.
    function panend(e) {
        e.preventDefault();
        e.target.style.opacity = 1;
    }

    for (i=1;i<$carouselObject.hamEvents.length;i++){
        $carouselObject.hamEvents[i].on('panstart', panstart);
        $carouselObject.hamEvents[i].on('panleft', panleft);
        $carouselObject.hamEvents[i].on('panright', panright);
        $carouselObject.hamEvents[i].on('panend', panend);
    }

    // Hack as even though touchDrag and mouseDrag are disabled, the drag event is still fired when a user swipes.
    // The drag event is listened to by owl.animate plugin and sets swapping to false (CSS3 animation).
    // By triggering the translated event it resets swapping to true.
    $carouselObject.on('drag.owl.carousel',function(){
        $carouselObject.trigger('translated.owl.carousel');
    });
}

.carousel {
    .owl-item{
        img {
            // Indicate to desktop users that they can swipe the carousel.
            cursor: pointer;
            // Smooth the animation on webkit with hardware acceleration.
            -webkit-transform: translate3d(0, 0, 0);
        }
    }
}

One thing to remember is if you are calling destroy on the carousel, you will also need to call destroy on each of the HammerJS objects you have created.

EDIT: Had to add preventDefault to pan events as Firefox was dragging the images for copy/move rather than accepting the pan event.

[greg5green]

This seems to be deliberate on the part of the plugin authors. One could argue that swipe behaviour should always be what a user expects. Whether you may agree or disagree with this or not, it is what Owl Carousel is programmed to do.

As a maintainer, this is our stance as well. It would be a very weird effect to drag, but not see it move but then it fades out. If you require something else, check out the solutions above. Thanks for elaborating @mummybot and @NPanayotov with your input.

[EthanNYT]

There should be a separation of concerns here. Inputs/tiggers (dots, nav, swipe, drag) and outputs/transitions (slide, fade out, etc). At the very least it should be configurable. The authors may not agree but the comments here indicate it would be useful.

For those looking for an alternative without writing a lot of code, Slick Carousel offers this behavior (fade transitions triggered by swiping) out of the box.