当前位置: 首页 > 知识库问答 >
问题:

猫头鹰旋转木马:跳转到具有特定id的幻灯片

黄扬
2023-03-14

我知道有可能通过当前位置-编号跳到猫头鹰旋转木马中的某个位置。如:

$('.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旋转木马在FancyBox中打开...

第二次编辑:

抱歉,规格改了,变得更难了。owl滑块以fancybox模式在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>

所以,如果我点击webiste上的href,owl旋转木马应该跳到第三个(匹配的)项目。

共有2个答案

苏华荣
2023-03-14

只是面临同样的问题所以我要解决它。可能对某人有用

        /**
         * 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;
        }
孙清野
2023-03-14

您可以按子类别获取元素,然后使用索引使其与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注入到链接中,而不是防止默认。

 类似资料:
  • 我有多个猫头鹰旋转木马设置在我的主页。我有第一个(关于免费送货的)设置为滑速10000。因为你可以看到所有的幻灯片都以相同的速度变化。 这有什么不起作用的原因吗?我做错什么了吗?

  • 本文向大家介绍jQuery旋转木马式幻灯片轮播特效,包括了jQuery旋转木马式幻灯片轮播特效的使用技巧和注意事项,需要的朋友参考一下 本文为大家分享anoSlide是一款超轻型响应式jQuery旋转木马幻灯片插件,它适合在PC端与移动端实现旋转木马幻灯片特效。具体内容如下 特点 响应式——适应任何视窗的宽度 混合内容 不需要CSS 轻量级(< 8 kb未压缩) 基于jQuery构建 集成图像预加

  • 我正在尝试在猫头鹰旋转木马上应用褪色效果,但它似乎不起作用。 正如您在这个fiddle-http://jsfiddle.net/lav911/fha6j/中看到的,我正在加载他们文档中提到的文件。 我是不是漏掉了什么?为什么不是褪色而是滑动?另外,请注意,即使在他们的网站上,淡化也不起作用。 后期编辑:在谷歌Chrome 35和火狐上似乎会褪色,但在谷歌Chrome 36上会滑动。奇怪。

  • 下面是我的WordPress和插件的详细信息。 WordPress详细信息: WordPress版本:4.9.8 WordPress jQuery 1.12.4 插件详细信息: owl-carousel jQuery 1.0.0 插件版本:2.1 使用过的WordPress版本:3.0.1或更高版本 测试范围:4.9.9 [tc-owl-carousel]短代码 谢谢你给我明确的指示。 下面是与o

  • 我有一些问题添加滑块lightbox到滑块,它没有打开弹出窗口。在remove itemSelector img之后,它打开弹出窗口,但是src未定义。有什么提示吗? JS: HTML

  • 所以基本上我想跟滑头做点这样的事...我想有正常的幻灯片,但事情是,是,我想有行动呼吁(按钮)在他们。这通常很容易将按钮与幻灯片一起放入,但有一个溢出:旋转式播放器上隐藏的样式无法取下,否则其他幻灯片会显示出来。我想知道如何才能做到这一点(按钮稍微往外走而不被切断)。 编辑:添加边框到旋转木马,这是真正的问题,我有...维护边框并使底部与边框重叠