Tag: owl carousel 2

猫头鹰旋转木马 – 只用一个圆点旋转木马滑动滑动多个旋转木马: 我有两个我想要使用的旋转木马，他们都有相同数量的物品所以它会很好，但我只想有一个导航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, } } }); }

多响应猫头鹰旋转木马: 我需要在某个页面中创建多个响应式猫头鹰轮播，我需要使用数据属性。我这样工作，但我无法响应我的旋转木马， jQuery的 var $carousel = $(‘.data-carousel[data-carousel]’); if ($carousel.length) { $carousel.each(function() { $(this).owlCarousel($(this).data(‘carousel’)); }); } HTML 1 2 3 4 现在我需要响应我的猫头鹰旋转木马，我喜欢这个…… HTML 1 2 3 4 但响应性的选择，不起作用。我在owl carousel文档中看到了这个： jQuery的 $(‘.owl-carousel’).owlCarousel({ loop:true, margin:10, responsiveClass:true, responsive:{ 0:{ items:1, nav:true }, 600:{ items:3, nav:false }, 1000:{ items:5, nav:true, loop:false } } }); 我需要在我的页面中创建一些动态和响应的轮播，我应该使用数据属性…

如何使用猫头鹰旋转木马2根据旋转木马中的物品数量更改选项？: 我正在一个项目中使用Owl Carousel 2，该项目具有动态内容，可以添加无限量的幻灯片。因此，可能存在仅存在三个幻灯片的实例或存在六个幻灯片的实例。我想要的function是，如果少于四张幻灯片（轮播一次显示四个项目），则添加mouseDrag: false和touchDrag: false选项。这是我的JS： $(‘.owl-carousel’).owlCarousel({ loop:false, margin:20, responsive : { // breakpoint from 0 up 0: { items: 1, mouseDrag:true, touchDrag:true }, // breakpoint from 480 up 500: { items: 2, mouseDrag:true, touchDrag:true }, // breakpoint from 768 up 740: { items: 3, mouseDrag:true, touchDrag:true }, // breakpoint from 1024 up […]

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搜索并检查插件网站，但找不到任何东西。

Owl Carousel 2 – autoHeight（多件商品）: 目前，Owl Carousel autoHeight仅在屏幕上显示1项。他们的计划是根据最高项目计算所有可见项目并更改高度。我通过调用可见项上的.active类来解决这个问题，并将不可见的项目放在一个很小的高度。是否已有更优雅的解决方案？ $(‘.owl-carousel’).owlCarousel({ loop: true, items: 3, margin: 1, autoHeight: true, }); 小提琴有任何想法吗？谢谢！

猫头鹰旋转木马，显示孩子绝对div，超过父母溢出隐藏div: 我正在使用猫头鹰旋转木马2，我正面临以下问题。我有一个名为owl-stage-outer父div ，它有overflow:hidden根据轮播的要求overflow:hidden 。我有另一个孩子div名称： ribbon （显示’New Arrival’和’Big Sale’）这是position: absolute现在我面临的问题，在旋转木马的第一项，function区因为overflow: hidden 参考图像我正在工作的链接我试过这个链接提供的解决方案，但它只适用于直接的孩子。提前致谢。

猫头鹰Carousal2与项目1和循环true: $(document).ready(function(){ $(‘.owl-carousel’).owlCarousel({ loop:true, margin:10, nav:true, items: 1 }) }); 1 控制台错误：TypeError：items [clones [（clones.length – 1）]]未定义。这个错误是由于只有一个项目div和属性循环为true和项目1。这种情况下的任何解决方案我知道这种情况不会发生，但如果有任何解决方案，请告诉我非常感谢。

点击的项目应位于猫头鹰旋转木马的中心位置: $(“.owl-carousel”).owlCarousel({ margin:10, dots:false, nav:true, responsive:{ 0:{ items:1 }, 600:{ items:3 }, 1000:{ items:5 } } }); 以上是我的猫头鹰旋转木马。现在我需要点击猫头鹰项目应该是中心。请任何我