owl-carousel

Applying angularjs ng-repeat to owl-carousel

由 家住魔仙堡 提交于 2019-11-28 23:01:50
问题 <div class="owl-carousel"> <div ng-repeat="items in itemlist"> <a href="series.html"><img ng-src="{{items.imageUrl}}" /></a> </div> <div> <a href="series.html"><img src="http://placehold.it/350x150" /></a> </div> </div> View carousel here: Owl-carousel2 I'm running into an issue where whenever the ng-repeat directive is applied to carousel the items are stacked vertically instead of being layout horizontally. If I leave out ng-repeat and use static items then it works as it should. Is there a

Owl Carousel not identifying elements of ng-repeat

由 此生再无相见时 提交于 2019-11-28 11:04:44
问题 I'm trying to get owl carousel to work in Angular. I want to markup like this in my view, since I have many galleries : <owl-carousel owl-options="owlOptions"> <div ng-repeat="image in gallery" class="item"> <p>hello</p> </div> </owl-carousel> Basically all the directive should be doing is initalizing the carousel. The directive works perfectly, unless I use an ng-repeat. I'm guessing the directive is loading before the ng-repeat is being processed. Does anyone have any ideas on how to solve

Owl Carousel Will Not Autoplay

由 。_饼干妹妹 提交于 2019-11-28 09:22:10
问题 I'm building a wordpress site with a JQuery carousel using the Owl Carousel 2 JQuery plugin. I've used this carousel before with success, but I'm stumped on this one and I need your help. I'm hoping others who may run into the same issue can reference this solution you all help with. The carousel will load, images are displaying, and most options that I've tried are working, but autoplay will not load the next image after 5 seconds. All files are in their proper place and loading correctly,

How to re-render a owl-carousel item?

由 大憨熊 提交于 2019-11-28 07:43:54
Well, I'm using a owl-carousel-2 plugin now. And I encounter the following problem: The markup code: <div class="owl-carousel" style="display: none;"> <div class="item"><img src="..." /></div> <div class="item"><img src="..." /></div> <!-- ... --> <div class="item"><img src="..." /></div> </div> <script> $(function() { var $owl = $('.owl-carousel'); $owl.owlCarousel(); // Doing many things here. $owl.show(); }); </script> The problem is: When I initialize with the $owl.owlCarousel(); statement, which under an hidden state, its size is not initialized. So when I show that control, the control

Owl Carousel Won't Autoplay

由 两盒软妹~` 提交于 2019-11-27 14:36:23
I'm using the Owl Carousel on my site. According to their documentation, this piece of JavaScript should work: <script> $("#intro").owlCarousel({ // Most important owl features //Autoplay autoPlay : 5000, stopOnHover : false )} </script> But for some reason it will not autoplay. Here is the HTML of the slider: <div id="intro" class="owl-carousel"> <div class="item first"> <div class="container"> <div class="row"> <div class="carousel-caption-left colour-white"> <h2>Title Text</h2> <h1>Sub title text here.</h1> <p>If you like you can even add a sentence or two here.</p> </div> </div> </div>

Show part of next and previous items with Owl Carousel 2.0

由 余生长醉 提交于 2019-11-27 14:36:12
问题 I'm using Owl Carousel 2.0. I would like to show one item, a half (or less) of the previous item (left side) and a half (or less) of the next item (right side). Just putting a part of them out on the right and on the left side: I've been trying using just CSS ( padding and margin negative with the owl-stage-outer ) but obviously Javascript override them. Here's my code so far: $('.owl-carousel').owlCarousel({ loop: true, margin: 10, nav: true, responsive: { 0: { items: 1 }, 600: { items: 3 }

How to use owl-carousel in Angular2?

由 风格不统一 提交于 2019-11-27 09:35:32
I am new to Angular2 and was trying to convert owl-carousel in Angularjs to Angular2. Below is the index.html file for the owl-carousel implementation: <!DOCTYPE html> <html ng-app="plunker"> <head> <meta charset="utf-8" /> <title>AngularJS Plunker</title> <script>document.write('<base href="' + document.location + '" />');</script> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/owl-carousel/1.3.3/owl.carousel.min.css" /> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/owl-carousel/1.3.3/owl.theme.min.css" /> <link rel="stylesheet" href="https://cdnjs

How to re-render a owl-carousel item?

由 泪湿孤枕 提交于 2019-11-27 05:46:09
问题 Well, I'm using a owl-carousel-2 plugin now. And I encounter the following problem: The markup code: <div class="owl-carousel" style="display: none;"> <div class="item"><img src="..." /></div> <div class="item"><img src="..." /></div> <!-- ... --> <div class="item"><img src="..." /></div> </div> <script> $(function() { var $owl = $('.owl-carousel'); $owl.owlCarousel(); // Doing many things here. $owl.show(); }); </script> The problem is: When I initialize with the $owl.owlCarousel();

How to reinitialize Owl Carousel after ajax call?

由 南笙酒味 提交于 2019-11-26 23:25:32
问题 I am trying to reinitialize owl carousel after a successful ajax call. The ajax call will change the data but the view should stay the same.I am having an issue where the view carousel structure will not reinitialize. I don't know where I did mistake. Ajax Request $(document).on('click', '.category_list', function() { var category_id = $(this).attr('data-id'); var _token = $('#_token').val(); var param = 'category_id=' + category_id + '&_token=' + _token; $.ajax({ type: "POST", datatype:

How do I add classes to items in Owl Carousel 2?

由 人盡茶涼 提交于 2019-11-26 22:51:37
问题 My goal is to make a carousel that looks like this: In case you don't know what you're looking at, there are 5 images/items but only the center one is displayed in its full size. The images next to the center one are smaller, and the outer ones smaller still. I've achieved this in the first version of Owl Carousel but it doesn't support looping, which makes this design ridiculous (can't reach the side images...). Here's how I did it: var owl = $("#owl-demo"); owl.owlCarousel({ pagination:
订阅 owl-carousel