owl-carousel

问题 I have a page with few owl carousels. I would like to be able to set some parameters for these owl carousels in HTML code (using a class or data attribute). Assuming I have two data attributes defined in my HTML, I have created following jQuery code: $(".owl-carousel").each(function( index ) { var items_no = $(this).data('slides'); var autoplay = $(this).data('autoplay'); $(".owl-carousel").owlCarousel({ items : items_no, autoplay: autoplay }); }); And as you may expect it is not working. The

问题 I want to change the default color background of the dots on inactive or active state. I use Owl Carousel Slider Here's the dots I want to change the color of the dots. I tried the css below but it is not working .owl-pagination .owl-page{ background-color: white; } .owl-pagination .owl-page .active { background-color: aqua; } 回答1: try .owl-pagination .owl-page span { background-color: white; } .owl-pagination .owl-page .active span { background-color: aqua; } 回答2: This is for Owl Carousel:

问题 I'm using Two owl carousel sliders with one navigation for my bootstrap website. In the below code prev and next is working perfectly. The problem that the ondrag and owl-dots functions are not working. When I click the dot and drag the first slider ( work-class1 ) the second slider should slide same like prev and next arrow. var o2 = $('#work-class2') o2.owlCarousel({ items: 2, singleItem: true, loop: false, margin: 10, dots: false, pagination: false, nav: false, touchDrag: true, slideBy: 2,

问题 I'm trying to use OwlCarousel version 2.0 together with Bootstrap 3 and Meteor. I create a template for the carousel like this: <template name="featuredCarousel"> <div class = "row"> <div class="owl-carousel"> <div class="item"><h4>1</h4></div> <div class="item"><h4>2</h4></div> <div class="item"><h4>3</h4></div> </div> </div> </template> I include this in my index.html file: <div class="container"> {{> featuredCarousel}} </div> Finally, I have a separate .js-file for instantiating the

问题 I am experiencing issue. The navigation components owl-nav and owl-dots are no longer wrapped with owl-controls. <div class="owl-nav disabled"> <div class="owl-prev">prev</div> <div class="owl-next">next</div> </div> <div class="owl-dots disabled"> <div class="owl-dot active"><span></span></div> <div class="owl-dot"><span></span></div> </div> Demos show: <div class="owl-controls"> <div class="owl-nav disabled"> <div class="owl-prev">prev</div> <div class="owl-next">next</div> </div> <div

问题 Right, I'm working on a site for a friend, and I'm trying to get a carousel working. However, seemingly, no matter what I try. Markup: http://pastebin.com/PjftpnJx Folder structure: The Owl CSS files had their extension changed to .less and are included inside the main LESS file which I compile into CSS, which means that the files are there. 回答1: Found your problem, you won't believe how simple. You just forgot to include the Owl Carousel stylesheet <link rel="stylesheet" href="owl-carousel

问题 It would be great if there was a simple way to move .owl-pagination to another div outside the primary owl wrapper. Wondering if there is a straightforward way to accomplish this? 回答1: It works with standard options: navContainer and dotsContainer html <!-- html custom containers --> <div id="customNav" class="owl-nav"></div> <div id="customDots" class="owl-dots"></div> javascript $('#owl-carousel').owlCarousel({ // move navContainer outside the primary owl wrapper navContainer: '#customNav',

问题 Im using Owl Carousel with Wordpress and it's loading dynamic content with the help of a WP loop. Here is the loop code: <?php $args = array( 'post_type' => 'properties', 'posts_per_page' => -1, 'paged' => $paged ); $the_query = new WP_Query($args); ?> <?php $i = 1; //added before to ensure it gets opened echo '<div class="item-wrapper">'; if (have_posts()): while ($the_query->have_posts()): $the_query->the_post(); ?> <div class="item"> <img class="img-responsive img-rounded" src="<?php the

问题 I am using carousel with lazy loading ,so that images load only on scroll, But problem is that all images except images inside carousel are not loading. I have also tried this solution. Carousel <div class="owl-carousel"> <div class="item"> <a href="/descriptive-essay-writer"><img src="/_/img/Descriptive-Essay.jpg" class="lazy" alt="Descriptive Essay"></a> <a href="/descriptive-essay-writer"><h4>Descriptive Essay</h4></a> <p>Our experienced descriptive essay writers paint a beautiful picture

问题 I have an issue with width of my bootstrap columns. Without Owl carousel everything works ok, but i don't know why it doesn't work with this plugin. These are just 5 similar blocks of code. Every block starts with .col-md-3 class. The result of this code: $(document).ready(function() { $(".team-members").owlCarousel({ autoPlay: 3000, items : 4, itemsDesktop : [1199,4], itemsDesktopSmall : [973,3] }); }); <section id="team"> <div class="container"> <h4>Our team</h4> <div class="owl-carousel