[Silk UI Web] Setting a JumpTo event on Carousel

[Silk UI Web] Setting a JumpTo event on Carousel

  
Forge Component
(61)
Published on 28 Mar (4 weeks ago) by OutSystems R&D
61 votes
Published on 28 Mar (4 weeks ago) by OutSystems R&D

I am trying to display a carousel that initialises showing a page containing the right most (last) slide.

I believe there maybe two approaches:

a) use RTL mode but this is not available on the Silk UI version of owl Carousel which is only v1.3.3.

or b) use either of the jumpTo or goTo public methods.

I would really appreciate understanding how to do this.  I had thought placing something like the script below in a javascript web block on the page would do the trick but it fails to trigger the event in the carousel element:

    var owl = $('#"+Carousel.Id+"');
    owl.owlCarousel({
        afterInit : afterInit
    });

    function afterInit(){
        owl.trigger('owl.jumpTo(this.owl.owlItems.length)');
    }

Are there any plans to update the Silk UI to include owl Carousel v2.2.1? Has anyone already done this?

Solution

I find OS Web to be an exercise in pure frustration most of the time.  Amazing stuff is implemented... and then amazingly undocumented and well hidden.  It boggles.

The Mobile version of the carousel is nicely implemented and nicely documented.  The Web version is a mess, undocumented, and confusing.

So... in combing through what OS is actually doing with this Owl implementation... it seems reasonable that your code, in some form, should be ok.  But, as you've found, it isn't.  Poking around further into what OS is doing, it seems that a Global variable is established for the Carousel... and guess what it's name is... "carousel".  Now... they couldn't tell you that... why would they!  It couldn't actually be documented somewhere... heaven forbid.

So... do to what you want to do is incredibly simple... but takes hours to figure out.  I'm not positive about the timing for the carousel being initialized... but let's say everything is in place by the time you want your carousel to be positioned at the last slide...

SyntaxEditor Code Snippet

"carousel.goTo(carousel.$owlItems.length-1);"

That's the Javascript... that's all you need.  Reference the Global var carousel... use the Owl method .goto and then grab the property of carousel... $owlItems, get the length minus one, and you've got the number of the last slide.

Yikes.


Solution

Thanks David for your reply - very helpful.  I used your suggestion at the end of an OnChange action where it worked nicely: 


It is disappointing to find the SilkUI is using a version of Carousel that is over 4 years old.