Tag: owl carousel

为owlcarousel制作的旋转木马创建拼贴画

我正在使用一个名为owlcarousel的插件来创建一个旋转木马。 旋转木马和拼贴画已经制作完成。 该作品已在Google Chrome，Safari，Opera和Firefox上进行了测试。 除了Firefox之外，所有这些都可以正常工作。 当旋转木马工作正常时，显示如下： 在Firefox上，它看起来是这样的： 现在，这是关于轮播（HTML）的代码的一部分： (function($){ $(‘.carousel-featured-sellers’).owlCarousel({ items: 3, loop:true, margin:15, nav:true, navText: [“”,””], dots: true, responsive:{ 0:{ items:1 }, 430:{ items:2 }, 800:{ items:3 }, 1400:{ items:4 }, 1800:{ items:6 }, 2400:{ items:7 }, 3000:{ items:9 } } }) })(jQuery); 关于样式（CSS）的部分： .featured-sellers-collage .div1{ width: 100%; } .featured-sellers-collage .div1 p { margin-bottom: […]

ajax加载后猫头鹰旋转木马没有工作

我使用jquery 1.11和这个代码到侧边栏中的ajax加载wordpresspost内容。 一切都很好，但猫头鹰旋转木马的jqueryfunction不起作用，并且邮件内容中的旋转木马没有显示任何内容。 ajaxify代码加载post内容： $(document).ready(function(){ $.ajaxSetup({cache:false}); $(“.post-link”).click(function(){ var post_link = $(this).attr(“href”)+’ #content’; $(“#single-post-container”).html(“loading …”); $(“#single-post-container”).load(post_link); return false; }); }); 有没有办法解决这个问题和冲突？ 最好的祝福。

猫头鹰旋转木马 – 只用一个圆点旋转木马滑动滑动多个旋转木马

我有两个我想要使用的旋转木马，他们都有相同数量的物品所以它会很好，但我只想有一个导航dots并能够触发具有相同属性的多个dots 。 $(‘.div_main .owl-dots’).each(function(index) { $(this).attr(‘data-index’,’dot-‘+index); }); $(‘.owl-dots[data-index=”dot-0″] button’).each(function(index) { $(this).attr(‘data-index’,’dot-‘+index); }); $(‘.owl-dots[data-index=”dot-1″] button’).each(function(index) { $(this).attr(‘data-index’,’dot-‘+index); }); $(‘.div_main .owl-dot’).click(function(e) { e.preventDefault(); var idx = $(this).data(‘index’); $(‘.div_main’).each(function() { $(this).find(‘button.owl-dot’).eq(0).attr(‘data-index’,idx).click(); }); }); 第一个函数是获取所有owl-dots并添加index属性以了解哪个是。 第二个和第三个是使它们相同，就像这个button有data-index=”dot-0″ ，其他的owl.dots也是button[data-index=”dot-0″]所以这次，我要么触发其中一个而生病，只是找到具有相同data-index的另一个button ，但它会导致错误。 Uncaught RangeError: Maximum call stack size exceeded 我认为我的第四个function有问题。 或者是否有任何一个dots会触发owl-carousel其他dots ？

在初始加载时遇到猫头鹰轮播宽度问题

我正在研究owl-carousel 。 目前我有一个问题，我的滑块宽度表现非常糟糕。 当我加载/刷新网站时， owl-carousel在宽度上有一些值，但是下一张幻灯片的一部分是可见的（我想避免这种情况）。 在初始加载后，当我调整窗口大小（切换最大化，或通过拖动更改宽度或高度）时，它将宽度设置为我想要的正确值。 我不明白为什么会这样。 我想在初始负荷中防止这种习惯。 这是我的jQuery。 function newsSlider() { $(‘.news-slider .owl-carousel’).owlCarousel({ autoplay: true, autoplayHoverPause: true, dots: true, loop: true, margin: 5, items: 3, responsive: { 0: { items: 1, }, 768: { items: 2, }, 992: { items: 3, } } }); }

猫头鹰旋转木马只显示一次 – 从第二次开始无法看到猫头鹰旋转木马，没有页面刷新

我正在使用owl carousel插件来显示图像滑块。 这是代码 function imageSliderSettings() { jQuery(“.image-slider”).each(function () { var id = jQuery(this).attr(‘id’); var auto_value = window[id + ‘_auto’]; var hover_pause = window[id + ‘_hover’]; var speed_value = window[id + ‘_speed’]; var items_value = window[id + ‘_items’]; auto_value = (auto_value === ‘true’) ? true : false; hover_pause = (hover_pause === ‘true’) ? true : false; […]

Owl Carousel – Magento产品

我设法让猫头鹰旋转木马在我的Magento主页上使用div的图像完美地工作。 我的目标是让它与产品一起摆动，但我正在努力。 我想显示特定类别的产品并使用Owl Carousel在主页上显示它们，但我通常使用带有以下代码的cms块将产品调用到主页： {{block type=”catalog/product_list” category_id=”112″ column_count=”4″ template=”catalog/product/list.phtml”}} 这个显而易见的不起作用 – 产品展示但是我认为由于模板的原因，它们有自己的布局。 有没有人对我可以使用什么php或cms块从cateogry调用produts有任何想法，所以它适用于猫头鹰旋转木马。 提前致谢。

OwlCarousel预装图像在背景中

我正在使用带有lazyload选项的owlcarousel 2，我希望在用户看到旋转木马的第一张图像时开始在后台预加载下一张幻灯片图像，这样用户就看不到加载器并在下一张幻灯片中直接看到加载的图像 这是我的HTML代码 <img class="lazyOwl" data-src="” alt=””/> 这是我的javascript代码 $(document).ready(function(){ $(“#inner-gallery”).owlCarousel({ navigation : true, // Show next and prev buttons autoPlay : false, slideSpeed : 300, lazyLoad:true, paginationSpeed : 400, singleItem:true, autoHeight : true, navigationText : [“”, “”], }); });

owl carousel slide n by n

使用猫头鹰旋转木马，并尝试将物品五乘五，现在我有5个项目，我想当我按下一个或上一个按钮它移动到下一个五项，目前它移动到下一个项目，是否可能？ $(‘.owl-carousel’).owlCarousel({ loop:true, items:5, margin:10, nav:true }) 演示 我google搜索并检查插件网站，但找不到任何东西。

jQuery Owl Carousel 2隐藏导航

我正在构建一个带有’Owl Carousel 2’的漂亮内容滑块，只有当只有一个或多个项目可见时才可以隐藏导航按钮吗？ 当只有一个项目或两个项目可见时，他们会在div.item上附加第二个CSS类？ 喜欢：当有一个项目时：类“第一项”，当有两个框时：class =“item two”当有超过2时，那么它将只有class =“item”。 JS： jQuery(“#sliderwhat”).owlCarousel({ loop : true, nav : true }); HTML： Personal guide / Amsterdam Here some text bla bla bla.

Owl Carousel 2：过滤项目，但使用Javascript保持排序顺序

我目前正在使用Owl Carousel 2并将其与此过滤示例相结合以创建filter菜单，当单击filter菜单列表中的标题时，旋转木马中的所有其他项目都将消失。 这很有效，除了当点击SHOW并且所有项目都返回到轮播时，它们不是按照它们开始的顺序。 Owl Carousel 2 http://www.owlcarousel.owlgraphic.com/docs/api-options.html 过滤http://www.xcast3d.com/spotlight/bootstrap-carousel-filter/ 我需要它们来保持排序顺序。 也许有一种更好的方法来过滤它们只需使用css display：none？ 但我不知道怎么写这个。 也许有人可以帮我改变这个脚本，或者想一个更好的过滤解决方案来保持秩序。 非常感谢