owl-carousel

I am using owl carousel and it works perfectly except it does not support circular/infinite scrolling. I did search for ideas on google and stackoverflow with no luck. Has anyone implemented circular/infinite scrolling in owl carousel? Owl Carousel does have the loop: true configuration setting. But, there's a few problems I don't like: Owl doesn't goto the first slide when at the end, when dragging (instead of clicking on navigation buttons) Owl rewinds to the first slide, it doesn't wrap around infinitely. This is a big difference, and not nearly as pleasing as a properly circular /

Is there a way in Owl Carousel 2 make a king random function. I need the slides on the page to load randomly. Before in the older Owl Carousel version I did it this way: $(document).ready(function () { //Sort random function function random(owlSelector) { owlSelector.children().sort(function () { return Math.round(Math.random()) - 0.5; }).each(function () { $(this).appendTo(owlSelector); }); } $(".feedback").owlCarousel({ autoPlay: 5000, slideSpeed: 200, items: 1, itemsDesktop: [1199, 1], itemsDesktopSmall: [979, 1], itemsTablet: [768, 1], itemsMobile: [479, 1], autoHeight: true, //Call

<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 directive I can write and apply to owl-carousel to maintain the layout? Also what is about ng-repeat

I'm using OWL Carousel , trying to add class .border-red to <div class="item"> after lazyLoad, means call this function after lazyLoad afterLazyLoad Example : $(".item").addClass("border-red"); when lazy loaded. Means add class function execute after OWLCarousel lazyLoaded. JS $(document).ready(function() { $("#owl-demo").owlCarousel({ items : 4, lazyLoad : true, navigation : true }); }); HTML <div id="owl-demo" class="owl-carousel"> <div class="item"><img class="lazyOwl" data-src="assets/owl1.jpg" alt="Lazy Owl Image"></div> <div class="item"><img class="lazyOwl" data-src="assets/owl1.jpg"

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: "json", url: "/master/sub_category", data: param, success: function(result) { $('#test').html(result); var

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 } } }) .owl-carousel .item h4 { color: #FFF; font-weight: 400; margin-top: 0em; } .owl-carousel .item {