2

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

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

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

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

提前致谢！

编辑：

哈希 URL 解决方案也很棒，但是：猫头鹰轮播在一个花哨的盒子中打开......

第二次编辑：

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

第三次编辑：

来自网站的代码：

<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 的代码：

<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，猫头鹰轮播应该跳转到第三个（匹配的）项目。

4

2 回答 2

2

您可以按子类别获取元素，然后使用索引使其与 owl 兼容，如下所示：

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

编辑您可以为此使用fancybox回调API，这样的东西应该可以工作：

$('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 注入链接而不是阻止默认值。

于 2014-10-06T13:13:25.777 回答
2

刚遇到同样的问题，所以我必须解决它。它可能对某人有用

        /**
         * 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;
        }
于 2018-06-04T06:56:53.097 回答