Owl carousel Jump to a particular Item with no scroll

Question

I have a owl carousel setup. Where I am trying to jump to particular items. Here is a fiddle.

I am using owl.goTo to directly jump to an item.

  $('.goTo').click(function() {
    carousel.trigger('owl.goTo', owl.currentItem + 5)
  });

But how owl carousel does this is it scrolls through all other items to go to the target. For example if my current item is 2 and if I jump then in order to go to 7 it scrolls through 3, 4, 5 and 6th item.

What I am rather expecting is to modify the code so that it does not scroll through all the items but just shows the next one.

I guess owl carousel does not provide this option out of the box. But if it does then please let me know, it will be great.

So, if any one have done such task in the past, please help.

Note: I know fade effect will show direct transition but what I am looking for is a scrolling transition.

Also, if there is an alternate to owl carousel that provides such feature out of the box, it will be great to know.

you can use fade effect, so you cant see the transition every page. — mmativ, Nov 08 '16 at 05:18
Yes, I have mentioned that in my question. That fade will do the job, but what I am looking for is a scroll transition. — Mark Wilson, Nov 08 '16 at 05:19
try to check this documentation https://web.archive.org/web/20161125231330/http://www.owlgraphic.com/owlcarousel/demos/manipulations.html — mmativ, Nov 08 '16 at 05:25
Yes. I am checking it. I don't think that is going to help to scroll the desired element next — Mark Wilson, Nov 08 '16 at 05:32
you dont need to scroll, you `reinit` your slider and set new active slide — mmativ, Nov 08 '16 at 05:41

score -1 · Answer 1 · answered Aug 23 '18 at 05:09

In order to scroll/slide directly to desired page define these type of animations in the OwlSlider 2 options.

animateOut: 'fadeOutLeft',
animateIn: 'fadeInRight'

You will also need to integrate https://daneden.github.io/animate.css/ or simply add these CSS rules:

@-webkit-keyframes fadeInRight {
    from {
        opacity: 0;
        -webkit-transform: translate3d(100%, 0, 0);
        transform: translate3d(100%, 0, 0);
    }

    to {
        opacity: 1;
        -webkit-transform: translate3d(0, 0, 0);
        transform: translate3d(0, 0, 0);
    }
}

@keyframes fadeInRight {
    from {
        opacity: 0;
        -webkit-transform: translate3d(100%, 0, 0);
        transform: translate3d(100%, 0, 0);
    }

    to {
        opacity: 1;
        -webkit-transform: translate3d(0, 0, 0);
        transform: translate3d(0, 0, 0);
    }
}

.fadeInRight {
    -webkit-animation-name: fadeInRight;
    animation-name: fadeInRight;
}

@-webkit-keyframes fadeOutLeft {
    from {
        opacity: 1;
    }

    to {
        opacity: 0;
        -webkit-transform: translate3d(-100%, 0, 0);
        transform: translate3d(-100%, 0, 0);
    }
}

@keyframes fadeOutLeft {
    from {
        opacity: 1;
    }

    to {
        opacity: 0;
        -webkit-transform: translate3d(-100%, 0, 0);
        transform: translate3d(-100%, 0, 0);
    }
}

.fadeOutLeft {
    -webkit-animation-name: fadeOutLeft;
    animation-name: fadeOutLeft;
}

Owl carousel Jump to a particular Item with no scroll

1 Answers1