Tag: carousel

jQuery Carousel Stuck（Twitter Bootstrap）: 我在这里实现了Twitter Bootstrap的Carousel jQuery插件：http： //zarin.me/circlefive/dashboard.html （参见响应标签）旋转木马通常起作用，但偶尔会卡住。当您与其他选项卡交互然后使用响应选项卡时，尤其会发生这种情况。我认为这与标签有关.. 有谁知道为什么旋转木马卡住了？谢谢！

当旋转木马只有1张幻灯片时，猫头鹰旋转木马仍会过渡: 我想知道是否有人能帮忙解决这个问题。我在CMS中使用旋转木马，并希望客户有时只有1张幻灯片，如果他们愿意的话。但是，如果只有1张幻灯片，则仍会出现淡入淡出过渡，因此它基本上会过渡到自身。当只有一张幻灯片时，有没有办法阻止旋转木马过渡？令我感到惊讶的是，这不是一个内置function，因为它与我使用过的其他旋转木马一样。 #owl-demo .item img{ display: block; width: 100%; height: auto; } $(document).ready(function() { $(“#owl-demo”).owlCarousel({ navigation: false, stopOnHover: true, paginationSpeed: 1000, autoPlay: 5000, goToFirstSpeed: 2000, autoHeight : true, transitionStyle:”fade”, singleItem: true // “singleItem:true” is a shortcut for: // items : 1, // itemsDesktop : false, // itemsDesktopSmall : false, // itemsTablet: false, […]

Bootstrap API轮播连续: 我一直在使用Bootstrap API，我一直在研究旋转木马。我希望在页面上以一个恒定的动作“漂移”一些图像，下一个图像从右侧开始并在页面上缓慢移动，当一个图像离开页面时，从右侧开始下一个图像。我不希望图像永远停止。我试过使用一些选项，如interval ， pause和wrap但无济于事。有没有办法用默认的轮播来实现这个目的？ <img src="https://stackoverflow.com/questions/23276481/bootstrap-api-carousel-continuous//public_html/img/phone_slide.png” alt=”” /> <img src="https://stackoverflow.com/questions/23276481/bootstrap-api-carousel-continuous//public_html/img/phone_slide.png” alt=”” /> $(document).ready(function(){ $(‘.carousel’).carousel({interval: 500}); });

使用JQuery事件在Bootstrap幻灯片操作后显示文本: 我想在Bootstrap中为每个图像（我有三个幻灯片）完成幻灯片操作后，在链接下方显示一个链接。我试图使用slid.bs.carousel方法，它不起作用。这是我正在使用的JQuery，如果您有任何建议，请告诉我 – 包含轮播的div是#sticksCarousel（而不是默认的’#myCarousel’） $(‘#sticksCarousel’).on(‘slid.bs.carousel’, function() { alert(“BALLS”); }); 谢谢！编辑：这是我对旋转木马的HTML … HEY! $(‘.carousel’).carousel({ interval: 4000 }) $(‘#sticksCarousel’).on(‘slid.bs.carousel’, function() { alert(“BALLS”); }); 基本上我要做的是在每次旋转木马幻灯片操作完成时，在id“sticksCarouselMessage”下获取段落，现在它只是设置为’HEY’。我正在使用javascript警报function作为测试，以查看引导方法slid.bs.carousel是否正在我的网站上工作，现在它不是。更新：这里我对所有HTML内容所做的更改……它仍然不起作用 Untitled Document body { background:url(img/body_bg.png) repeat; } .sticksNav { height:70px; } .headerImg{ margin-bottom:20px; } $(document ).ready.(function() { $(‘.carousel’).carousel({ interval: 4000 }); $(‘#sticksCarousel’).on(‘slid.bs.carousel’, function() { $(“#sticksCarouselMessage”).text(“It worked!”); }); }); […]

暂停Bootstrap轮播播放video时: 我有多个video和图像幻灯片。 Carousel设置为加载时自动播放。但是当有人播放video并将鼠标移出侧面时，它会一直滑动（如预期的那样）。如何跟踪video播放和暂停的时间？我搜索了SO，但没有找到类似的问题。网站管理员稍后会添加video，因此可能是iframe或html5video。所以，我需要一个既适用于两者的解决方案。

Bootstrap轮播分页/幻灯片编号问题: 我和许多其他人一样，想要使用Bootstrap轮播来运行可点击和可样式的分页，所以我不必在引导程序的顶部运行额外的jquery插件（例如，innerfade）。我有一个镜头使用这个问题（并回答） Bootstrap Carousel Number活跃图标，但到目前为止没有骰子，我看不出我在这里做错了什么。这是我摆弄的http://jsfiddle.net/adriatiq/V4SBt/ （奇怪的是，小提琴中的分页工作而不是本地的）。如您所见，随着幻灯片的进展，编号不会跳过。请原谅我可悲的js技巧。

Owl Carousel 2 – 字幕div（img title＆alt标签）: 我正在寻找一种在div （ .image-caption ）中显示img title和alt标签的方法。到目前为止这是我的代码： owl.on(‘changed.owl.carousel’, function(event) { var comment = $(this).find(‘img’).attr(‘alt’); var title = $(this).find(‘img’).attr(‘title’); if(comment) $(‘#desktop .image-caption’).html(”+title+”+comment+”); }) 有任何想法吗？谢谢！

如何在Bootstrap 3 Carousel中输出当前幻灯片编号？: 我想使用Bootstrap 3的Carousel插件输出当前的幻灯片编号。理想情况下，我希望将此文本作为旋转木马div下方的文本。例如： [CAROUSEL HERE] 3的9 我可以使用CMS中的函数输出图像总数（例如上面示例中的9），但我无法弄清楚如何获取活动幻灯片（例如上面示例中的3）。我已经搜遍了所有并且找到了一个似乎就是这样做的线程：如何获取旋转木马的总数和当前幻灯片数不幸的是，我认为上述线程中的解决方案在Bootstrap版本3中不起作用。或者我可能只是弄乱了一些东西。有谁知道这是否可能？我真的希望它是！任何帮助或建议将不胜感激。谢谢！

如何修改移动和标签的bootstrap轮播: 我正在使用一个bootstrap滑块。在桌面上，它有三个幻灯片，每个幻灯片有4个磁贴在标签上，它们必须是4张幻灯片，每张3张在移动设备上，需要有12个不同的幻灯片我正在考虑实现这一目标的最有效和最优化的方法。选项1 – 创建3组不同的滑块。一次只能看到一个选项2 – 使用jquery检测屏幕宽度，并以编程方式将额外的图块添加为幻灯片，隐藏额外的图块。我想这会非常复杂。如果有更好的方法来实现这一点，请提供帮助。

在它的幻灯片结尾处停止Twitter Bootstrap Carousel: Bootstrap旋转木马是一个奇怪的野兽。我已经尝试调整$ next以防止无限循环，但最终要么打破它，要么阻止幻灯片在到达结尾时向后移动。我希望旋转木马只能在列表中滑动而不是无限循环。任何帮助，将不胜感激。 $next = $next.length ? $next : this.$element.find(‘.item’)[fallback]() if ($next.hasClass(‘active’)) return if ($.support.transition && this.$element.hasClass(‘slide’)) { this.$element.trigger(e) if (e.isDefaultPrevented()) return $next.addClass(type) $next[0].offsetWidth // force reflow $active.addClass(direction) $next.addClass(direction) this.$element.one($.support.transition.end, function() { $next.removeClass([type, direction].join(‘ ‘)).addClass(‘active’) $active.removeClass([‘active’, direction].join(‘ ‘)) that.sliding = false setTimeout(function() { that.$element.trigger(‘slid’) }, 0) }) } else { this.$element.trigger(e) if (e.isDefaultPrevented()) […]