Tag: carousel

Bootstrap轮播 – 播放YouTubevideo时暂停: 我的Bootstrap轮播中有一些嵌入式YouTubevideo。默认情况下，轮播会自动前进，但我想在播放video时暂停。是否有检测video播放时间的技巧？我想在不使用YouTube API的情况下这样做（每个轮播都有任意数量的video，我不想创建每个video的实例）。编辑：最终设计我在video上创建了重叠： .video_mask{ position:absolute; top:0; left:0; width:100%; height:275px; z-index:25; opacity:0; } 当我点击蒙版时，我将相应的iframe设置为自动播放，隐藏蒙版，并暂停轮播： $(‘.video_mask’).click(function(){ iframe = $(this).closest(‘.item’).find(‘iframe’); iframe_source = iframe.attr(‘src’); iframe_source = iframe_source + “?autoplay=1” iframe.attr(‘src’, iframe_source); // hide the mask $(this).toggle(); // stop the slideshow $(‘.projectOverviewCarousel’).carousel(‘pause’); }); 当用户点击轮播控件时，它会重置所有蒙版和iframeurl： $(‘.projectOverviewCarousel’).on(‘slide’, function(){ var iframeID = getID($(this).find(‘iframe’).attr(“id”)); // stop iframe from playing if(iframeID […]

使用jQuery的旋转木马: 我知道那里有可用的插件，但是我正在尝试制作一个，但在此之前，我正在努力理解将其作为无限/圆形旋转木马的概念。到目前为止，这是我的jsfiddle .. http://jsfiddle.net/hbk35/KPKyz/3/ HTML： 0 1 2 3 4 5 6 7 left right JS： var container = $(“#carousel_wrapper”); var runner = container.find(‘ul’); var liWidth = runner.find(‘li:first’).outerWidth(); var itemsPerPage = 3; var noofitems = runner.find(‘li’).length; runner.width(noofitems * liWidth); container.width(itemsPerPage*liWidth); $(‘#right’).on(‘click’,function(){ runner.animate({scrollLeft: -liWidth},1000); }); $(‘#left’).on(‘click’,function(){ runner.animate({scrollLeft: liWidth},1000); }); CSS： div#carousel_wrapper{ overflow:hidden; position:relative; } ul { […]

猫头鹰Carousel 2随机function: 有没有办法在猫头鹰旋转木马2中制作一个王随机function。我需要页面上的幻灯片随机加载。在旧的Owl Carousel版本之前，我这样做了： $(document).ready(function () { //Sort random function function random(owlSelector) { owlSelector.children().sort(function () { return Math.round(Math.random()) – 0.5; }).each(function () { $(this).appendTo(owlSelector); }); } $(“.feedback”).owlCarousel({ autoPlay: 5000, slideSpeed: 200, items: 1, itemsDesktop: [1199, 1], itemsDesktopSmall: [979, 1], itemsTablet: [768, 1], itemsMobile: [479, 1], autoHeight: true, //Call beforeInit callback, elem parameter point to $(“.feedback”) […]

如何在点击jquery时将轮播项目移动到中间: 如何将旋转木马中心设为我点击中间的项目？我到处寻找答案，但他们不是直接答案……有人可以帮助我吗？这就是我到目前为止所做的： http ： //jsfiddle.net/sp9Jv/ HTML： prev next Un Deux Trois Quatre Cinq Six Sept Huit JavaScript的： var carousel = $(‘#carousel’), prev = carousel.find(‘.prev’), next = carousel.find(‘.next’), viewport = carousel.find(‘.viewport’), item = viewport.find(‘li’), itemWidth = item.outerWidth(true), itemNum = item.length, itemList = viewport.find(‘ul’); itemList.width(itemWidth * itemNum); var moveCarousel = function(dir) { itemList.animate({ left: ‘-=’ + […]

如何在旋转木马div之外放置Bootstrap Carousel图像标题？: 如果在这里任何地方都有这个问题，请道歉。我尝试搜索，但只找到与轮播代码中的样式和定位标题相关的主题… 所以，我有一个包含三列的布局：左列包含与每个页面/项目相关的一般信息。中间列包含带图像的Bootstrap 3轮播。右栏是我计划在中心Carousel中显示与图像相关的所有标题的地方。我无法弄清楚如何让标题在右列中运行。为了澄清，字幕将随每个轮播幻灯片而改变，就像它们在默认轮播设置中一样。我基本上想要从图像移动标题，并进入右列。我使用Kirby（www.getkirby.com）作为我的CMS，我使用foreach循环来获取旋转木马中的图像等代码。这是我当前的代码，包括标题部分（我试图移动……） children()->first() ?> hasImages()): ?> images() as $image): $n++; ?> <div class="item”> <img style="display:block; margin-left: auto; margin-right: auto;" src="https://stackoverflow.com/questions/20437925/how-to-place-bootstrap-carousel-image-captions-outside-the-carousel-div/url() ?>” alt=”title()) ?>” class=”img-responsive”> https://stackoverflow.com/questions/20437925/how-to-place-bootstrap-carousel-image-captions-outside-the-carousel-div/img_title() ?> THIS IS WHERE I AM TRYING TO PUT THE CAROUSEL CAPTIONS… 我已经尽了最大努力，但我完全没有想法。我想也许我可以做一些像使标题变量的东西： img_title() ?> 但这在旋转木马区域以外不起作用。我猜它是不会在foreach循环之外工作的？无论如何，如果有人有任何建议我会非常感激。我正在学习PHP，但我不知道任何javascript，所以我希望有一个解决方案。 […]

带有动态项目的Bootstrap Carousel不会滑动: 我正在使用股票引导转盘： …. 通过单击旋转木马内的锚标签，将新的.item注入.carousel-inner 。在注入.item （工作正常）之后，旋转木马应该滑到那个.item 。然而，没有任何反应。 …. …. …. 即使我使用$(“#main-navigation-carousel”).carousel(1); 在浏览器控制台中没有任何反应如果我在服务器上的代码中添加项目一切正常。

猫头鹰旋转木马不会自动播放: 我正在使用Owl Carousel 2 JQuery插件构建一个带有JQuery轮播的wordpress网站。我之前已经成功使用过这个旋转木马，但是我很难过这个，我需要你的帮助。我希望其他可能遇到同样问题的人可以参考这个你帮忙的解决方案。旋转木马将加载，图像正在显示，我尝试过的大多数选项都在工作，但自动播放不会在5秒后加载下一张图像。正如使用Firebug网络检查器validation的那样，所有文件都在正确的位置并正确加载。感谢您的帮助/建议！ customjs.js： $(document).ready(function(){ var owl = $(“.owl-carousel”); owl.owlCarousel({ items: 1, autoplay: true, autoplayTimeout: 5000, autoplayHoverPause: true }); }); HTML：我也试过追加owl.trigger(‘owl.play’,6000); 在document.ready函数内根据这个stackoverflow线程的建议无济于事。

从webpack导入owl.carousel: 我是F2E世界的新手。我刚刚使用create-react-app创建了一个Web应用程序。（ https://github.com/facebookincubator/create-react-app ）我想将owl.carousel导入到我的项目中，以便我遵循NPM（ https://www.npmjs.com/package/owl.carousel ）的指南，其语法是： import $ from ‘jquery’; import ‘imports?jQuery=jquery!owl.carousel’; 但调试器控制台指示错误： Unexpected ‘!’ in ‘imports?jQuery=jquery!owl.carousel’. Do not use import syntax to configure webpack loaders import/no-webpack-loader-syntax 我尝试了另一种语法： import owlCarousel from ‘owl.carousel’ 而错误将是： Uncaught TypeError: Cannot read property ‘fn’ of undefined 有人可以帮我弄清楚发生了什么吗？谢谢。更新：我的webpack加载器设置： loaders: [ // Process JS with Babel. { test: […]

如何在Owl Carousel 2中为项添加类？: 我的目标是制作一个看起来像这样的旋转木马：如果你不知道你在看什么，有5个图像/项目，但只有中心的一个以完整尺寸显示。中心旁边的图像较小，外部图像较小。我在Owl Carousel的第一个版本中实现了这个，但是它不支持循环，这使得这个设计很荒谬（无法到达侧面图像……）。我是这样做的： var owl = $(“#owl-demo”); owl.owlCarousel({ pagination: false, lazyLoad: true, itemsCustom: [ [0, 3], [900, 5], [1400, 7], ], afterAction: function(el){ .$owlItems .removeClass(‘active’) //what I call the center class .removeClass(‘passive’) //what I call the next-to-center class this .$owlItems .eq(this.currentItem + 2) //+ 2 is the center with 5 items .addClass(‘active’) […]

如何在Slick Carousel上更改幻灯片的宽度和高度？: http://kenwheeler.github.io/slick/ 一位朋友建议我使用Ken Wheeler的Slick旋转木马，我决定尝试一下。我遇到了一些问题。首先，幻灯片不会像他们应该那样“相互叠加”。它们垂直堆叠。当第一张幻灯片淡入时，它处于正确的位置，但是，当第二张幻灯片淡入时，它位于第一张幻灯片的下方。另请注意，在第一张幻灯片上，右边框被切除，在第二张幻灯片上，除了左边框之外的所有内容都被剪掉了。第二个问题是我似乎无法改变幻灯片的宽度或高度。它们都是相同的尺寸。（它们在我的css文件中的“精选”类中设置。）我究竟做错了什么？ BaseCMD :: Home Top Stories $(document).ready(function(){ $(‘#featured-articles’).slick({ arrows: true, autoplay: true, autoplaySpeed: 3000, dots: true, draggable: false, fade: true, infinite: false, responsive: [ { breakpoint: 620, settings: { arrows: true } }, { breakpoint: 345, settings: { arrows: true } } ] }); […]