Tag: carousel

禁用特定视口宽度的猫头鹰轮播: 我目前正在使用Owl Carousel在桌面/笔记本电脑大小的设备上展示一个画廊。但是在较小的设备上，我想禁用插件并将每个图像堆叠在一起。这可能吗？我知道你可以调整猫头鹰旋转木马在某些断点处在屏幕上显示一定数量的图像。但我希望能够完全关闭它，删除所有的div等。这是我目前正在使用的笔： http ： //codepen.io/abbasinho/pen/razXdN HTML： CSS： #carousel { width: 100%; height: 500px; } .carousel-item { width: 100%; height: 500px; background-size: cover; background-repeat: no-repeat; background-position: center center; } jQuery的： $(“#carousel”).owlCarousel({ navigation : true, slideSpeed : 300, paginationSpeed : 400, singleItem: true }); 感谢任何帮助！

猫头鹰旋转木马与jQuery UI Draggable: 我试图让我的猫头鹰旋转木马中的元素可拖动但它似乎没有工作。这是我的设置： HTML： JS / jQuery： jQuery(function(){ //init carousel $(“.owl-carousel”).owlCarousel({ autoPlay:false, rewindSpeed:500, navigation:false, pagination:false, slideSpeed:1500, mouseDrag:false }); //set up draggable jQuery( ‘.my-owl-item’ ).draggable({ start: function( event, ui ) {console.log(‘dragging’);}, helper : ‘clone’ }); }); 我已禁用鼠标拖动旋转木马，因为我可能是原因。正在触发可拖动的启动function – 它按预期将调试消息输出到控制台。该元素也被克隆。所以一切似乎都有效，除非我无法拖动它！任何帮助非常感谢。

在同位素（砖石）网格中使用带有背景图像的Slick Carousel – 幻灯片的高度变为1px: 我正在使用同位素来生成块的动态网格。有些街区内可以有旋转木马。我正在使用Slick Carousel（ http://kenwheeler.github.io/slick/ ）来做到这一点。这是一个例子> http://jsfiddle.net/9dja3omp/1/ $(function () { var $container = $(‘.grid’).imagesLoaded( function() { $container.isotope({ itemSelector: ‘.block’, gutter: 0, transitionDuration: 0 }); }); setTimeout(function(){ var carousel = $(“.carousel__container”); carousel.slick({ speed: 700, arrows: false, adaptiveHeight: true }); console.log(“load carousel”); }, 3000); }); 在我初始化同位素后，我初始化旋转木马，然后它将幻灯片的高度更改为1px。我怎么解决这个问题？

如何创建自定义jquery轮播？: 嗨，我想为我的php Web应用程序创建一个简单的jquery轮播。我正在使用php5和mysql。如何创造任何身体可以帮助我？

Bootstrap 4 Carousel Show 2 Slides Advance 1: 我试图在Bootstrap 4旋转木马上显示两张幻灯片，而在点击下一张或上一张时只前进1张。它现在正在做，但是当它这样做时，它不会顺利滑过。该项目稍微消失，再次出现在另一侧。以下是我试图让它滑动的方式： https ： //www.bootply.com/wYydqqLLWR 这是我在Bootply上的代码（用ZimSystem中的数字更新）： https ：//www.bootply.com/9YTnuqUPMs

将自动播放添加到此jQuery Carousel: 我使用jQuery创建了一个轮播，我想为它添加自动播放function。这是我现有的JS： $(document).ready(function (){ $(‘#button a’).click(function(){ var integer = $(this).attr(‘rel’); $(‘#myslide .cover’).animate({left:-705*(parseInt(integer)-1)}) $(‘#button a’).each(function(){ $(this).removeClass(‘active’); if($(this).hasClass(‘button’+integer)){ $(this).addClass(‘active’)} }); }); }); 这是一个工作小提琴。问题：我不知道从哪里开始自动播放。有什么建议？

在Slick Slider中更改幻灯片之前检查条件: 我正在使用这个流行的旋转木马（ http://kenwheeler.github.io/slick/ ）。我已在每张幻灯片中放置了某些元素。在移动到下一张幻灯片之前，用户必须至少选择其中一个元素。但是我无法弄清楚如何通过在选择元素之前单击“下一个”箭头来防止用户手动移动到下一张幻灯片。我知道’下一个/上一个’箭头可以被禁用，但我不想这样做，因为用户可能想要回到上一张幻灯片来更改他的选项。我知道一个选项是禁用默认箭头并引入我自己的上一个/下一个箭头，然后将滑动更改function与条件检查绑定在一起。但是如果这个滑块中有一些内置选项（我无法弄清楚）会很好，因为它可以最大限度地减少我的努力。

禁用拖动“Owl carousel”中的特定元素（Item） – jquery: 我在我的小项目中使用“OWL Carousel”jQuery插件（ http://www.owlgraphic.com/owlcarousel/ ）。我创建了可通过此插件拖动的小脚本。现在我想禁用特定元素（Item）中的拖动…但我不知道该怎么做。 HTML： Item-1.1 Item-1.2 NOT Draggble Item-1.3 Item-2.1 Item-2.2 NOT Draggble Item-2.3 Item-3.1 Item-3.2 NOT Draggble Item-3.3 CSS： div.wrap { width: 990px; min-height: 360px; padding: 5px; border: 2px solid #666; margin: 10px auto; } div.item { float: left; border: 1px solid #ddd; width: 324px; margin: 1px; min-height: 360px; } JS： […]

在OWL Carousel中滑动2项: 我正在为我的滑块使用OWL Carousel 。我想要做的是在单击下一个上一个时滑动2个项目。因此它在每次传输时仍会显示第二项。我试图用CSS来解决它，但没有成功。这是我的基本设置 $(“#owl-demo”).owlCarousel({ navigation : true, // Show next and prev buttons slideSpeed : 600, paginationSpeed : 400, singleItem:true, // “singleItem:true” is a shortcut for: // items : 2 // itemsDesktop : false, // itemsDesktopSmall : false, // itemsTablet: false, // itemsMobile : false }）; 任何帮助非常感谢。提前致谢。

OWL Carousel图像最初尺寸不合适: 我正在使用OWL Carousel并且我已对其进行编码，因此将显示一个图像，然后每隔15秒将下一个图像滑入。我已将宽度设置为屏幕的100％，因此在理论上对js进行了适当编码应该有一个图像一次全尺寸….但是会发生什么是它显示所有的图像相当小，然后如果我调整屏幕甚至1像素，它捕捉它应该如何….. 有关如何避免必须调整屏幕大小以使图像全尺寸的任何想法？这是我的HTML 这是我的js var owl = $(‘.owl-carousel’); owl.owlCarousel({ singleItem: true, items:1, loop:true, margin:10, autoplay:true, autoplayTimeout:15000, autoplayHoverPause:true }); $(‘.play’).on(‘click’,function(){ owl.trigger(‘autoplay.play.owl’,[1000]) }) $(‘.stop’).on(‘click’,function(){ owl.trigger(‘autoplay.stop.owl’) })