Make OwlCarousel rotate image continously

I am using WP and I want to make my carousel here to slide continously after the last item instead of repating itself. Is there a way to do that?

enter image description here

Read More

You can check the website here: http://desertcinema.com/#work

Here’s my code under carousel.js

$(document).ready(function() {

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

  sync1.owlCarousel({
    singleItem : true,
    slideSpeed : 1000,
    transitionStyle : "fade",
    navigation: false,
    pagination:false,
    afterAction : syncPosition,
    responsiveRefreshRate : 200,
      afterInit : progressBar,
      afterMove : moved,
      startDragging : pauseOnDragging
  });


  var time = 5; // time in seconds

  var $progressBar,
      $bar, 
      $elem, 
      isPause, 
      tick,
      percentTime;


    //Init progressBar where elem is $("#owl-demo")
    function progressBar(elem){
      $elem = elem;
      //build progress bar elements
      buildProgressBar();
      //start counting
      start();
    }

    //create div#progressBar and div#bar then prepend to $("#owl-demo")
    function buildProgressBar(){
      $progressBar = $("<div>",{
        id:"progressBar"
      });
      $bar = $("<div>",{
        id:"bar"
      });
      $progressBar.append($bar).prependTo($elem);
    }

    function start() {
      //reset timer
      percentTime = 0;
      isPause = false;
      //run interval every 0.01 second
      tick = setInterval(interval, 10);
    };

    function interval() {
      if(isPause === false){
        percentTime += 1 / time;
        $bar.css({
           width: percentTime+"%"
         });
        //if percentTime is equal or greater than 100
        if(percentTime >= 100){
          //slide to next item 
          $elem.trigger('owl.next')
        }
      }
    }

    //pause while dragging 
    function pauseOnDragging(){
      isPause = true;
    }

    //moved callback
    function moved(){
      //clear interval
      clearTimeout(tick);
      //start again
      start();
    }

Is there a way to make the images rotate continuously?

Related posts

1 comment

  1. Add loop:true to carousel options. More info in docs. Change

      sync1.owlCarousel({
        singleItem : true,
        slideSpeed : 1000,
        transitionStyle : "fade",
        navigation: false,
        pagination:false,
        afterAction : syncPosition,
        responsiveRefreshRate : 200,
          afterInit : progressBar,
          afterMove : moved,
          startDragging : pauseOnDragging
      });
    

    to

      sync1.owlCarousel({
        singleItem : true,
        slideSpeed : 1000,
        transitionStyle : "fade",
        navigation: false,
        pagination:false,
        afterAction : syncPosition,
        responsiveRefreshRate : 200,
          afterInit : progressBar,
          afterMove : moved,
          startDragging : pauseOnDragging,
        loop: true //added loop
      });
    

Comments are closed.