Owl carousel: jump to a slide with an certain id

Question

I know that there is the possibility to jump to a certain position in the owl carousel by current position-number. Like:

$('.jumpTo').click(function(){
  carousel.trigger('owl.jumpTo', 3)
});

Would it be possible to jump to matching ID? Let's assume that I have a site with thumbnails and the click on one of them opens a modal with the owl carousel beeing at the right/matching position. Something like:

var myattr = $(this).attr('subcategory');
$('.jumpTo').click(function(){
  carousel.trigger('owl.jumpTo', '[subcategory="' + myattr + '"]')
});

Thanks in advance!

EDIT:

An hash-URL solutio would also be great, but: the owl carousel opens up in an fancybox...

SECOND EDIT:

Sorry, the specifications was changed and it gets more difficult. The owl slider opens up in an iframe in an fancybox modal. Any ideas how to communicate the data into it?!

THIRD EDIT:

code from the website:

<div id="theid" class="joinlight breit-quarter" subcategory="test">
        <div class="breit-quarter-inside">
        <a id="content_1_phcontent_1_rptPictures_ctl00_lnkImage" class="quarterthumb fancybox fancybox.iframe " href="extern1.html"></a>
        <p>Quartier Reiterstaffel: Dies ist ein Testtext</p>
        <p>&nbsp;</p>
        <p><a id="content_1_phcontent_1_rptPictures_ctl00_lnkDownloadJPG" class="jobTitle" href="http://placehold.it/400x300">Download JPG</a></p>
        <p></p>
        </div>
    </div>

Code from the iframe:

<div id="wrap">
            <div id="wrap_small">
            <div id="sync2" class="owl-retro-carousel">
              <div class="item"><img src="http://placehold.it/80x60" /></div>
              <div class="item"><img src="http://placehold.it/80x60" /></div>
              <div class="item"><img src="http://placehold.it/80x60" /></div>

            </div>
            </div>
        <div id="wrap_big">
        <div id="sync1" class="owl-retro-carousel">
              <div class="item"><img src="http://placehold.it/500x500" /><p>Room shot at the Delta Bow Valley during the speaker presentations</p></div>
              <div class="item"><img src="http://placehold.it/500x500" /><p>Derrick Rozdeba, Bayer CropScience, presenting to delegate teams on how to present their ideas</p></div>
              <div class="item" subcategory="test"><img src="http://placehold.it/500x500" /><p>Team presentations on Friday</p></div>

            </div>
            </div>
        </div>

So, if i click on the href on the webiste the owl carousel should jump to the third(matching) item.

Solution 1

You can get the element by subcategory and then use the index to make it compatible with owl like this:

var myattr = $(this).attr('subcategory');
$('.jumpTo').click(function(){
   var owlNumber = $('.owl').find('[subcategory="' + myattr + '"]').index();
   carousel.trigger('owl.jumpTo', owlNumber)
});

Edit You can use fancybox callback API for this something like this should work:

$('fancybox.iframe').click(function (event) {
    event.preventDefault();
    var category = $(this).attr('subcategory');
    $('fancybox.iframe').fancybox({
        afterLoad: function() {
            $('.owl-retro-carousel').owlCarousel();
            if(category !== undefined) {
                var owlNumber = $('.owl').find('[subcategory="' + myattr + '"]').index();
                carousel.trigger('owl.jumpTo', owlNumber);
            }
        }
    }).trigger('click');
});

This code should be working in your particular case, but you might consider to inject fancybox.iframe into the link instead of preventing default.

Solution 2

Just faced the same issue so I got to solve it. It may be useful for someone

        /**
         * Get owl carousel slider number for an image with specific class
         *
         * @param cls
         * @returns {*}
         */
        function findOwlNumberForSlideByClass(cls) {
            const slides = $('#slider-card').find('.owl-item:not(.cloned)');
            let index;
            (slides).each((i, slide) => {
                if ($(slide).find(cls).length) {
                    index = i;
                }
            });
            return index;
        }

Comments

[manuelJoaquim]

Looks good, but as i edited, the communication between the two elements got trickier... :-/

[manuelJoaquim]

i am not shure... the click ($('.jumpTo').click) would come from the website itself and the rest is on the iframe. this works?

[Adrian Forsius]

Please provide code or pseudo code for what you are trying to do