Owl Carousel "Synced" Infinite Loop

Question

I found this code on the internet but the problem is it is not infinite loop, what it does is if the last item displayed it rewinds back to first item. Is it possible to make it infinite?

Because if you have a hundred items on that carousel it might slow someone else device because of that.

Here is the synced demo http://owlgraphic.com/owlcarousel/demos/sync.html

Thanks

=============================

Code Below

$(document).ready(function() {

          var sync1 = $("#sync1");
          var sync2 = $("#sync2");

          sync1.owlCarousel({
            singleItem : true,
            slideSpeed : 1000,
            navigation: true,
            pagination:false,
            afterAction : syncPosition,
            responsiveRefreshRate : 200,
            autoPlay: 3000,
          });

          sync2.owlCarousel({
            items : 15,
            itemsDesktop      : [1199,10],
            itemsDesktopSmall     : [979,10],
            itemsTablet       : [768,8],
            itemsMobile       : [479,4],
            pagination:false,
            responsiveRefreshRate : 100,
            afterInit : function(el){
              el.find(".owl-item").eq(0).addClass("synced");
            }
          });



          function syncPosition(el){
            var current = this.currentItem;
            $("#sync2")
              .find(".owl-item")
              .removeClass("synced")
              .eq(current)
              .addClass("synced")

            if($("#sync2").data("owlCarousel") !== undefined){
              center(current)
            }


          }

          $("#sync2").on("click", ".owl-item", function(e){
            e.preventDefault();
            var number = $(this).data("owlItem");
            sync1.trigger("owl.goTo",number);
          });

          function center(number){
            var sync2visible = sync2.data("owlCarousel").owl.visibleItems;

            var num = number;
            var found = false;
            for(var i in sync2visible){
              if(num === sync2visible[i]){
                var found = true;
              }
            }

            if(found===false){
              if(num>sync2visible[sync2visible.length-1]){
                sync2.trigger("owl.goTo", num - sync2visible.length+2)
              }else{
                if(num - 1 === -1){
                  num = 0;
                }
                sync2.trigger("owl.goTo", num);
              }
            } else if(num === sync2visible[sync2visible.length-1]){
              sync2.trigger("owl.goTo", sync2visible[1])
            } else if(num === sync2visible[0]){
              sync2.trigger("owl.goTo", num-1)
            }
          }

        });

Your question is not very clear, but try to use this: http://stackoverflow.com/questions/20345522/is-it-possible-to-implement-a-circular-infinite-carousel-using-owl-carousel?rq=1. — Madalina Taina, Aug 14 '16 at 05:22
Thanks @MadalinaTaina, I mean when the last thumbnail is selected instead of looping the carousel what it does is scroll to the first thumbnail. — Bernie Carpio, Aug 14 '16 at 05:47

Madalina Taina · Answer 1 · 2016-08-14T06:48:53.960

0

Please use the last version of the carousel and use loop:true: http://www.owlcarousel.owlgraphic.com/demos/basic.html

$('.owl-carousel').owlCarousel({
    loop:true,
    margin:10,
    nav:true,
    responsive:{
        0:{
            items:1
        },
        600:{
            items:3
        },
        1000:{
            items:5
        }
    }
})

html:

<div class="owl-carousel">
    <div class="item">
        <img src="https://static.pexels.com/photos/136301/pexels-photo-136301-medium.jpeg" alt="">
    </div>
    <div class="item"><h4>2</h4></div>
    <div class="item"><h4>3</h4></div>
    <div class="item"><h4>4</h4></div>
    <div class="item"><h4>5</h4></div>
    <div class="item"><h4>6</h4></div>
</div>

edited Aug 14 '16 at 06:48

answered Aug 14 '16 at 05:59

Madalina Taina

1,968
20
26

Thanks, but for the sync demo, where there is a thumbnail and image, seems like there is no solution to that? – Bernie Carpio Aug 14 '16 at 06:25
@ChengeTheRules Put all your code here and I will help you with that. I really don't understand what is not working for you. Just add images... – Madalina Taina Aug 14 '16 at 06:41
when you reached the last slide and click next it rewinds back to the first one rather than continues loop :) Thanks again :) – Bernie Carpio Aug 14 '16 at 07:19

Owl Carousel "Synced" Infinite Loop

1 Answers1