我知道有可能通过当前位置-编号跳到猫头鹰旋转木马中的某个位置。如:
$('.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> </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旋转木马应该跳到第三个(匹配的)项目。
只是面临同样的问题所以我要解决它。可能对某人有用
/**
* 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;
}
您可以按子类别获取元素,然后使用索引使其与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
所以基本上我想跟滑头做点这样的事...我想有正常的幻灯片,但事情是,是,我想有行动呼吁(按钮)在他们。这通常很容易将按钮与幻灯片一起放入,但有一个溢出:旋转式播放器上隐藏的样式无法取下,否则其他幻灯片会显示出来。我想知道如何才能做到这一点(按钮稍微往外走而不被切断)。 编辑:添加边框到旋转木马,这是真正的问题,我有...维护边框并使底部与边框重叠