Final (I hope) Carousel example question

[DaveyJJ]

I have the following code working properly (which, for a designer, is good progress) and I need to link to an internal image within the Carousel and load that ... let's say, image 4 of row 3.

I can make external links such as URLs and mailto etc open fine, but how do I load (and go directly to) a specific image?

html: [
     '<div>',
     '<img class="my-carousel-item-img" src="', category, '-', j, '.jpg" />',
     '<div id="external_link">',
     '<a href="http://www.google.com">Open external link</a>',
     '</div>',
     '<div id="internal_link">',
     '<a href="????????">Load image 4 of row 3</a>',
     '</div>',
     '</div>'
]

Thanks for any help.

[mitchellsimoens]

You want a link to scroll to a certain image or to go to another item of the carousel?

[DaveyJJ]

You want a link to scroll to a certain image or to go to another item of the carousel?

Go to another item of the carousel. Suppose you have 4 rows of 12 images, 48 images in total. From image 2, I might want a link that goes to image 27. Then if you swipe horizontally, you'd go to 26 or 28, and a vertical swipe would take you into row 2 or 4 the way it works now.

How you transition between 2 and 27 (just loading image 27 with a sudden appearance, for example) is fine for MVP.

[mitchellsimoens]

So basically you need to add a listener to the link and do a setActiveItem on the carousel to the appropriate item, you will also need to stop the event...

carousel.element.on({
    scope : carousel,
    click  : function(e, t) {
        var target = e.getTarget('a');

        if (target) {
            e.stopEvent();
            this.setActiveItem(...);
        }
    }
});

Just typing from memory but something like that.