owl-carousel

来源： https://stackoverflow.com/questions/21838500/owl-carousel-video-autoplay-dosent-work

问题 I would like to enhance the dots in owl carousel with a 'aria-label' which includes the current image displayed. The final code should look like this: <div class="owl-dot" aria-label="1><span></span></div> <div class="owl-dot" aria-label="2"><span></span></div> <div class="owl-dot" aria-label="3"><span></span></div> I'm trying to reach this with a attr method $('.owl-carousel .owl-dot').attr('aria-label', '+currentIndex.lenght+'); but I'm simply not able to achieve the current image number

问题 I would like to enhance the dots in owl carousel with a 'aria-label' which includes the current image displayed. The final code should look like this: <div class="owl-dot" aria-label="1><span></span></div> <div class="owl-dot" aria-label="2"><span></span></div> <div class="owl-dot" aria-label="3"><span></span></div> I'm trying to reach this with a attr method $('.owl-carousel .owl-dot').attr('aria-label', '+currentIndex.lenght+'); but I'm simply not able to achieve the current image number

问题 While building the carousel I realized that an owl add's cloned duplicate items. My owl config looks like this. How do i stop this from happening. owlDfe.owlCarousel({ loop: false, autoWidth:false, nav:false, responsiveClass:true, responsive:{ 0:{ items:sizes.mobile_portrait }, 568:{ items:sizes.mobile_landscape }, 768:{ items:sizes.ipad }, 800:{ items:sizes.desktop }, 1000:{ items:sizes.desktop, } } }); 回答1: I had this issue - I found that setting the loop option to false resolved it for me.

问题 How is it possible to replace/rebuild owl carousel items with a new one? Description In many cases, like when you are getting new data from a database you would to add new data in your carousel, but in this example I try to replace all items with a new one. $('.owl-carousel').owlCarousel({ loop:true, margin:10, nav:true }); <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.2.1/owl

问题 How is it possible to replace/rebuild owl carousel items with a new one? Description In many cases, like when you are getting new data from a database you would to add new data in your carousel, but in this example I try to replace all items with a new one. $('.owl-carousel').owlCarousel({ loop:true, margin:10, nav:true }); <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.2.1/owl

问题 How is it possible to replace/rebuild owl carousel items with a new one? Description In many cases, like when you are getting new data from a database you would to add new data in your carousel, but in this example I try to replace all items with a new one. $('.owl-carousel').owlCarousel({ loop:true, margin:10, nav:true }); <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.2.1/owl

问题 I have an example here: VideoSlide Example My problem is that nothing displays. I've effectively copied the code from the Owl site, but I'm getting nothing displayed. Originally, I'd encoded it in a bigger site, this is the cut down version with only that applicable to the carousel. I've got the carousel working with images, but the videos elude me, if anything, videos look like they should be simpler! I have taken the latest Owl JS and CSS for version 2. I have not amended the JS or CSS, it

问题 I'm currently using Owl Carousel 2.0.0-beta.2.4 in development to keep the carousel centered and loop the items which works nicely. For some reason the cloned items that Owl generates when setting loop: true doesn't seem to fire on click. You will see in the example I've put together below that every other item alerts the click when fired but if the item has been cloned it doesn't seem to register the click event. JSFiddle HTML: <div id="multiple-carousel" class="carousel-style owl-carousel">

问题 I am using owl carousel and trying to modify the .owl-nav buttons so that they appear on the sides of the carousel only if a user is hovering over the slider. I've written the following CSS but the problem is that .owl-nav is blocking the slider items and preventing users from clicking on them. Is there a way for me to move .owl-nav behind .owl-staging-outer while still being able to show the nav menu items only when the user hovers over the slider? .wrapper { position: relative; } .owl-nav {