owl-carousel | 易学教程

Pause HTML5 video in Owl Carousel on slide

阅读更多关于 Pause HTML5 video in Owl Carousel on slide

问题 Im using Owl Carousel 2.0.0-beta.2.4 and in one slide I have a HTML5 video. What I want to do is when I change slide I want the video to be paused or stopped if pause is not possible. The slide can be changed by drag, touch, next and prev buttons and by keyboard arrows. My script looks like this right now: $('.owl-carousel').owlCarousel({ items: 1, animateOut: 'fadeOut', animateIn: 'fadeIn', URLhashListener: true, startPosition: 'URLHash', nav: true, autoHeight : true, video:true, }); var owl

Owl carousel 2 dynamic content JSON

阅读更多关于 Owl carousel 2 dynamic content JSON

问题 I have a problem with displaying dynamic content with Owl carousel 2 using JSON/AJAX. I get no error messages in console, but cant get the carousel to work. I only see a blank page. I am able to append the image url's fetched from JSON file with jquery.append, but they wont be shown in the carousel that way. Displays are set to "block". Any tips what am i missing? index.html - <html> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title

owl carousel - Set different items number for each of many sliders placed on the same page

阅读更多关于 owl carousel - Set different items number for each of many sliders placed on the same page

问题 I have a page with multiple sliders that are created with owl carousel. I would like to define different number of visible items for each slider. The perfect solution would be to define number of visible items in HTML (as a class or data). I am just starting using jQuery so I only managed to pass a value using data attribute like this: <div class="owl-carousel" data-itemsnumber="5">...</div> Then I applied this value to a variable in JS and add this variable in settings instead of items

Owl Carousel, show child absolute div, over parent overflow hidden div

阅读更多关于 Owl Carousel, show child absolute div, over parent overflow hidden div

问题 I am using owl carousel 2, I am facing following problem. I have parent div with a name owl-stage-outer , it has overflow:hidden as per requirement of the carousel. I have another child div name: ribbon (showing 'New Arrival' and 'Big Sale') which is position: absolute Now the problem which I am facing, on first item of carousel, ribbon is hiding because of overflow: hidden reference image Link on which I am working I have tried solution provided in this link, but it will only work on

Owl-Carousel, scroll two items at a time

阅读更多关于 Owl-Carousel, scroll two items at a time

问题 I am working on a slider with Owl-Carousel 2 (beta), but there is a lot that doesn't work well. I want the owlCarousel to work like this: It should scroll 2 items at a time, showing 2 items at a time. So: [0,1] slide [2,3] slide [4,5] On mobile, it should show one picture and scroll by 1 picture at a time. owl = $('.owl-carousel') owl.owlCarousel({ center: true, loop: false, margin: 20, items: 2, responsive: { 0: { items: 1, navigation: true, nav: true }, 640: { items: 2, navigation: true,

Animation on multiple slide owl carousel

阅读更多关于 Animation on multiple slide owl carousel

问题 Is there any feature about animation on multiple slide item? I have tried its fine on single slide but not working on multiple item slide. You can use JSFiddle or below code to debug. $('.loop-test').owlCarousel({ center: true, items: 2, loop: true, margin: 10, animateOut: 'slideOutDown', animateIn: 'flipInX', dots: true }); <link href="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.2.0/assets/owl.theme.green.css" rel="stylesheet" /> <link href="https://cdnjs.cloudflare.com/ajax/libs

Owl Carousel width issues when first load

阅读更多关于 Owl Carousel width issues when first load

i'm using owl carousel. this is my script: $("#owl-demo").owlCarousel({ items : 3 }); i want the container show 3 images. But, here is the picture when first load but when i resize the browser, although just a little bit, size of images change to actual size and setting that i want So, the problem is images preview when i load browser for the first time. Why this is happening? i think the issues about size of my browser I fixed this problem when I measured the width of the owl-stage container in a working state. And then set the values in the styles like: #photo-gallery .owl-stage { min-width:

Can not add dynamically items to Owl Carousel in Javascript

阅读更多关于 Can not add dynamically items to Owl Carousel in Javascript

I'm trying to dynamically add items to an Owl carousel. Here is how I'm doing it: HTML <div id="avatar-carousel" class="owl-carousel lesson-carousel"> <div class="item item-logo"> <div class="product-item"> <div class="carousel-thumb" style="height: 77px!important;width: 70px;" > <img src="http://placehold.it/140x100" alt=""> </div> </div> </div>  </div> <button id="click"> click </button> JS $("#avatar-carousel").owlCarousel({ items: 5 }); $("#click").click(function(){ $('#avatar-carousel').trigger('add.owl.carousel', ['<div class="item"><p>' + 'hh' + '</p></div>'])

Owl Carousel, show child absolute div, over parent overflow hidden div

阅读更多关于 Owl Carousel, show child absolute div, over parent overflow hidden div

I am using owl carousel 2, I am facing following problem. I have parent div with a name owl-stage-outer , it has overflow:hidden as per requirement of the carousel. I have another child div name: ribbon (showing 'New Arrival' and 'Big Sale') which is position: absolute Now the problem which I am facing, on first item of carousel, ribbon is hiding because of overflow: hidden reference image Link on which I am working I have tried solution provided in this link , but it will only work on immediate child. Thanks in Advance. You can add this margin-left: 25px; its works. <div class="owl-item

Owl Carousel Outer Arrow Navigation

阅读更多关于 Owl Carousel Outer Arrow Navigation

问题 I'm trying to implement the Owl Carousel with Lazyload images for a portfolio site and am having issues with positioning my navigation buttons. Ideally i'd like to add these on the outside of the carousel positioned halfway up the image. I have seen a couple of examples where this is operational but just cannot fathom it out. Can someone please help? I have added a JSfiddle here: http://jsfiddle.net/iameuanmackay/448htq9b/ The code i'm using is: <div class="col-xs-8 col-xs-push-2 col-md-push