Owl carousel:跳转到具有特定 id 的幻灯片 [英] Owl carousel: jump to a slide with an certain id

问题描述

我知道有可能通过当前位置编号跳转到猫头鹰轮播中的某个位置.喜欢:

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)
});

是否可以跳转到匹配的 ID?假设我有一个带有缩略图的站点，单击其中一个会打开一个模式，其中猫头鹰轮播在正确/匹配的位置蜂鸣.比如:

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 + '"]')
});

提前致谢！

hash-URL 解决方案也很好，但是:猫头鹰轮播在一个花哨的盒子中打开...

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

第二次

抱歉，规格已更改，变得更加困难.owl 滑块以花式框模式在 iframe 中打开.任何想法如何将数据传达给它?！

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?!

第三次

来自网站的代码:

<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>

来自 iframe 的代码:

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>

所以，如果我点击网站上的 href，猫头鹰轮播应该会跳转到第三个(匹配的)项目.

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

推荐答案

可以通过子类获取元素，然后使用索引使其与owl兼容，如下所示:

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)
});

编辑你可以使用fancybox callback API 这样的东西应该可以工作:

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');
});

此代码应该在您的特定情况下工作，但您可能会考虑将 fancybox.iframe 注入链接而不是阻止默认.

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

这篇关于Owl carousel:跳转到具有特定 id 的幻灯片的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！