owl-carousel

问题 I am working on owl-carousel . Currently I have a problem that my slider width is acting really bad. When I load/refresh the website, owl-carousel has some value in width, but a part of the next slide is visible (I want to avoid that). At the same time after the initial load when I resize the window (toggle maximize, or change the width or height by dragging) it sets the width to the correct value as I wanted. I don't understand why it's happening. I want to prevent that habit in the initial

问题 I have two carousels that I wanted to used, they both have the same amount of items so it will be fine, BUT I want only to have one navigation dots and be able to trigger multiple dots with the same attributes. $('.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

问题 I'm using Fancybox v3.5.4 and Owl carousel v2.3.4 with lazyLoad option When we click on a photo, Fancybox makes the photo pop up. Then if we click on "Next" few times to get the next photos on Fancybox and then close it, the photos on the owl carousel have disappeared. It seems that the carousel has changed its background position and displays photos not loaded yet because of the lazyLoad option. Does anyone understand what is going on here? I spent lot of time on this.. Thank you You can see

问题 I am using owl carosual2 slider with thumbnail. If any user clicks on the thumbnail then the slider will slide. Now my issue is, I am not able to use more than one slider on my single page properly. I mean if I click on the first slider thumbnail then it automatically slides the second slider thumbnail. I found thumbnail code from here http://jsfiddle.net/moyarich/mmtLcz6u/13/ var sync1 = $(".slider"); var sync2 = $(".navigation-thumbs"); var thumbnailItemClass = '.owl-item'; var slides =

问题 I am trying to init an owl-carousel that is using two ng-repeats to populate it. One containing video urls and the other images. <div class="col-xs-6 col-sm-6 col-md-7 full-screen" ng-if="showCarousel"> <owl-carousel id="owl-carousel-{{prefix}}-{{item.id}}" class="owl-carousel" data-options="{responsive: true, mouseDrag: false, lazyLoad: true, video: true, items: 4, itemsDesktop: [1199, 3], itemsDesktopSmall: [992,2], itemsMobile: [479,1]}"> <div ng-repeat="video in item.videos track by

问题 I'm creating a page that loads external content via ajax. $(".link").click(function(e) { e.preventDefault() $("#ajax-container")load("external-file.php"); }); This works but the content in the external files contain a Owl Carousel, which appear in the loaded html, but do not (re)initialise. According to the Owl docs, and the simialr post here (How to reinitialize Owl Carousel after ajax call) I need to destroy and then reinitiate the carousel. This works perfectly when attached to an

问题 Using owl carousel and trying to slide items five by five, now i have 5 items, i want when i push next or prev button it move to next five item, currently it move to next item, is it possible? $('.owl-carousel').owlCarousel({ loop:true, items:5, margin:10, nav:true }) Demo i googled and checked plugin website but couldn't find anything. 回答1: Use the slideBy options in the owlCarousel config: $('.owl-carousel').owlCarousel({ loop:true, items: 5, margin:10, slideBy: 5, // slide 5 items nav:true

问题 I am building a nice content slider with the 'Owl Carousel 2' only is it possible to hide the nav buttons when there is only one or times items visible? And when there is only one item or two items visible that they get a second CSS class attached on the div.item? like: when there is one item: class"item one" and when there are two boxes: class="item two" when there are more then 2 then it's will be only class="item". JS: jQuery("#sliderwhat").owlCarousel({ loop : true, nav : true }); HTML:

问题 I an trying to use the owl carousel in my new project. I seem to be having an issue with it. So far only the HTML and CSS is working. I am somehow doing something wrong with the Script. Could someone possibly lend me a hand and take a look and point me in the right direction where I am messing up? Here is a link to the website. The Owl Carousel is close to the bottom of the website. You will see two "partners" sections. The top is just the demo HTML, and the bottom is what I am trying to use

问题 How can i add space between owl item. add margin or padding between items. this is need to be responsive.can i add some gutter in to the jquery. function newsCarousel(){ $("#carousel").owlCarousel({ items : 4, itemsCustom : false, itemsDesktop : [1199,4], itemsDesktopSmall : [980,2], itemsTablet: [768,1], itemsTabletSmall: false, itemsMobile : [479,1], singleItem : false, itemsScaleUp : false, mouseDrag : true, //Basic Speeds slideSpeed : 200, paginationSpeed : 800, rewindSpeed : 1000, /