Synced Carousels

JavaScript
1

Hi there,

I’m working with Owl Carousel to get multiple galleries on one page and have hit a problem with Owl’s supplied jQuery. All I would like to do is duplicate the sliders so that I have two sets of synced galleries - a duplicate of the demo on the following page in other words:
http://owlgraphic.com/owlcarousel/demos/sync.html

So far I have managed to get two carousels appearing on the page with the following code and the small and large items syncing correctly. However, when selecting a small item on carousel 1 it is highlighting the button number on carousel 2’s small items instead of carousel 1. Carousel 2 is working as expected without any problems.

All I have done is simply duplicated sync1 and sync2’s HTML, CSS and jQuery from the Owl demo and changed the references from sync1 to sync3 and sync2 to sync4 in all instances.

Any suggestions? I’m scratching my head trying to figure out what I’m missing?! :goof:


<script type="text/javascript" src="http://code.jquery.com/jquery-1.7.min.js"></script>
<script type="text/javascript" src="http://owlgraphic.com/owlcarousel/owl-carousel/owl.carousel.js"></script>
<script>
$(document).ready(function() {
 
  var sync1 = $("#sync1");
  var sync2 = $("#sync2");
 
  sync1.owlCarousel({
    singleItem : true,
    slideSpeed : 1000,
    navigation: true,
    pagination:false,
    afterAction : syncPosition,
    responsiveRefreshRate : 200,
  });
 
  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)
    }
    
  }
  
  
  /* carousel two */
  var sync3 = $("#sync3");
  var sync4 = $("#sync4");
 
  sync3.owlCarousel({
    singleItem : true,
    slideSpeed : 1000,
    navigation: true,
    pagination:false,
    afterAction : syncPosition,
    responsiveRefreshRate : 200,
  });
 
  sync4.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;
    $("#sync4")
      .find(".owl-item")
      .removeClass("synced")
      .eq(current)
      .addClass("synced")
    if($("#sync4").data("owlCarousel") !== undefined){
      center(current)
    }
  }
 
  $("#sync4").on("click", ".owl-item", function(e){
    e.preventDefault();
    var number = $(this).data("owlItem");
    sync3.trigger("owl.goTo",number);
  });
 
  function center(number){
    var sync4visible = sync4.data("owlCarousel").owl.visibleItems;
    var num = number;
    var found = false;
    for(var i in sync4visible){
      if(num === sync4visible[i]){
        var found = true;
      }
    }
 
    if(found===false){
      if(num>sync4visible[sync4visible.length-1]){
        sync4.trigger("owl.goTo", num - sync4visible.length+2)
      }else{
        if(num - 1 === -1){
          num = 0;
        }
        sync4.trigger("owl.goTo", num);
      }
    } else if(num === sync4visible[sync4visible.length-1]){
      sync4.trigger("owl.goTo", sync4visible[1])
    } else if(num === sync4visible[0]){
      sync4.trigger("owl.goTo", num-1)
    }
    
  }
 
});
</script>
<link rel="stylesheet" type="text/css" href="http://owlgraphic.com/owlcarousel/owl-carousel/owl.carousel.css">
<style>
#sync1 .item{
    background: #0c83e7;
    padding: 80px 0px;
    margin: 5px;
    color: #FFF;
    -webkit-border-radius: 3px;
    -moz-border-radius: 3px;
    border-radius: 3px;
    text-align: center;
}
#sync2 .item{
    background: #C9C9C9;
    padding: 10px 0px;
    margin: 5px;
    color: #FFF;
    -webkit-border-radius: 3px;
    -moz-border-radius: 3px;
    border-radius: 3px;
    text-align: center;
    cursor: pointer;
}
#sync2 .item h1{
  font-size: 18px;
}
#sync2 .synced .item{
  background: #0c83e7;
}



/*carousel 2 */
#sync3 .item{
    background: #0c83e7;
    padding: 80px 0px;
    margin: 5px;
    color: #FFF;
    -webkit-border-radius: 3px;
    -moz-border-radius: 3px;
    border-radius: 3px;
    text-align: center;
}
#sync4 .item{
    background: #C9C9C9;
    padding: 10px 0px;
    margin: 5px;
    color: #FFF;
    -webkit-border-radius: 3px;
    -moz-border-radius: 3px;
    border-radius: 3px;
    text-align: center;
    cursor: pointer;
}
#sync4 .item h1{
  font-size: 18px;
}
#sync4 .synced .item{
  background: #0c83e7;
}
</style>
<div id="sync1" class="owl-carousel">
  <div class="item"><h1>1</h1></div>
  <div class="item"><h1>2</h1></div>
  <div class="item"><h1>3</h1></div>
  <div class="item"><h1>4</h1></div>
  <div class="item"><h1>5</h1></div>
  <div class="item"><h1>6</h1></div>
  <div class="item"><h1>7</h1></div>
  <div class="item"><h1>8</h1></div>
  <div class="item"><h1>9</h1></div>
  <div class="item"><h1>10</h1></div>
  <div class="item"><h1>11</h1></div>
  <div class="item"><h1>12</h1></div>
  <div class="item"><h1>13</h1></div>
  <div class="item"><h1>14</h1></div>
  <div class="item"><h1>15</h1></div>
  <div class="item"><h1>16</h1></div>
  <div class="item"><h1>17</h1></div>
  <div class="item"><h1>18</h1></div>
  <div class="item"><h1>19</h1></div>
  <div class="item"><h1>20</h1></div>
  <div class="item"><h1>21</h1></div>
  <div class="item"><h1>22</h1></div>
  <div class="item"><h1>23</h1></div>
</div>
<div id="sync2" class="owl-carousel">
  <div class="item"><h1>1</h1></div>
  <div class="item"><h1>2</h1></div>
  <div class="item"><h1>3</h1></div>
  <div class="item"><h1>4</h1></div>
  <div class="item"><h1>5</h1></div>
  <div class="item"><h1>6</h1></div>
  <div class="item"><h1>7</h1></div>
  <div class="item"><h1>8</h1></div>
  <div class="item"><h1>9</h1></div>
  <div class="item"><h1>10</h1></div>
  <div class="item"><h1>11</h1></div>
  <div class="item"><h1>12</h1></div>
  <div class="item"><h1>13</h1></div>
  <div class="item"><h1>14</h1></div>
  <div class="item"><h1>15</h1></div>
  <div class="item"><h1>16</h1></div>
  <div class="item"><h1>17</h1></div>
  <div class="item"><h1>18</h1></div>
  <div class="item"><h1>19</h1></div>
  <div class="item"><h1>20</h1></div>
  <div class="item"><h1>21</h1></div>
  <div class="item"><h1>22</h1></div>
  <div class="item"><h1>23</h1></div>
</div>




<!-- carousel two -->
<div id="sync3" class="owl-carousel">
  <div class="item"><h1>1</h1></div>
  <div class="item"><h1>2</h1></div>
  <div class="item"><h1>3</h1></div>
  <div class="item"><h1>4</h1></div>
  <div class="item"><h1>5</h1></div>
  <div class="item"><h1>6</h1></div>
  <div class="item"><h1>7</h1></div>
  <div class="item"><h1>8</h1></div>
  <div class="item"><h1>9</h1></div>
  <div class="item"><h1>10</h1></div>
  <div class="item"><h1>11</h1></div>
  <div class="item"><h1>12</h1></div>
  <div class="item"><h1>13</h1></div>
  <div class="item"><h1>14</h1></div>
  <div class="item"><h1>15</h1></div>
  <div class="item"><h1>16</h1></div>
  <div class="item"><h1>17</h1></div>
  <div class="item"><h1>18</h1></div>
  <div class="item"><h1>19</h1></div>
  <div class="item"><h1>20</h1></div>
  <div class="item"><h1>21</h1></div>
  <div class="item"><h1>22</h1></div>
  <div class="item"><h1>23</h1></div>
</div>
<div id="sync4" class="owl-carousel">
  <div class="item"><h1>1</h1></div>
  <div class="item"><h1>2</h1></div>
  <div class="item"><h1>3</h1></div>
  <div class="item"><h1>4</h1></div>
  <div class="item"><h1>5</h1></div>
  <div class="item"><h1>6</h1></div>
  <div class="item"><h1>7</h1></div>
  <div class="item"><h1>8</h1></div>
  <div class="item"><h1>9</h1></div>
  <div class="item"><h1>10</h1></div>
  <div class="item"><h1>11</h1></div>
  <div class="item"><h1>12</h1></div>
  <div class="item"><h1>13</h1></div>
  <div class="item"><h1>14</h1></div>
  <div class="item"><h1>15</h1></div>
  <div class="item"><h1>16</h1></div>
  <div class="item"><h1>17</h1></div>
  <div class="item"><h1>18</h1></div>
  <div class="item"><h1>19</h1></div>
  <div class="item"><h1>20</h1></div>
  <div class="item"><h1>21</h1></div>
  <div class="item"><h1>22</h1></div>
  <div class="item"><h1>23</h1></div>
</div>

Cheers,

Andrew

2

Haha…nevermind seems I’ve solved the problem myself. Simply needed to change “syncPosition” in the second block of jQuery to “syncPosition2”…oops, I think I need my morning coffee!! :lol: :blush:

3

Hey…

Okay, hit a new problem now. When I create more items in the top carousel than the bottom and select a small item outside of the bottom carousel’s displayed items both small item carousels will shift to show that item (unselected on the top one)

In other words, with the following code, select “20” from the top carousel and watch the bottom carousel’s small items carousel shift to the right to display item 20. Then select item 3 on the top small items carousel to watch the bottom small items carousel shift back again. Oddly, when the items number is increased within the bottom carousel’s jQuery parameters it doesn’t affect the top one at all…


<script type="text/javascript" src="http://code.jquery.com/jquery-1.7.min.js"></script>
<script type="text/javascript" src="http://owlgraphic.com/owlcarousel/owl-carousel/owl.carousel.js"></script>
<script>
$(document).ready(function() {
 
  var sync1 = $("#sync1");
  var sync2 = $("#sync2");
 
  sync1.owlCarousel({
    singleItem : true,
    slideSpeed : 1000,
    navigation: true,
    pagination:false,
    afterAction : syncPosition,
    responsiveRefreshRate : 200,
  });
 
  sync2.owlCarousel({
    items : 20,
    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)
    }
    
  }
  
  
  /* carousel two */
  var sync3 = $("#sync3");
  var sync4 = $("#sync4");
 
  sync3.owlCarousel({
    singleItem : true,
    slideSpeed : 1000,
    navigation: true,
    pagination:false,
    afterAction : syncPosition2,
    responsiveRefreshRate : 200,
  });
 
  sync4.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 syncPosition2(el){
    var current = this.currentItem;
    $("#sync4")
      .find(".owl-item")
      .removeClass("synced")
      .eq(current)
      .addClass("synced")
    if($("#sync4").data("owlCarousel") !== undefined){
      center(current)
    }
  }
 
  $("#sync4").on("click", ".owl-item", function(e){
    e.preventDefault();
    var number = $(this).data("owlItem");
    sync3.trigger("owl.goTo",number);
  });
 
  function center(number){
    var sync4visible = sync4.data("owlCarousel").owl.visibleItems;
    var num = number;
    var found = false;
    for(var i in sync4visible){
      if(num === sync4visible[i]){
        var found = true;
      }
    }
 
    if(found===false){
      if(num>sync4visible[sync4visible.length-1]){
        sync4.trigger("owl.goTo", num - sync4visible.length+2)
      }else{
        if(num - 1 === -1){
          num = 0;
        }
        sync4.trigger("owl.goTo", num);
      }
    } else if(num === sync4visible[sync4visible.length-1]){
      sync4.trigger("owl.goTo", sync4visible[1])
    } else if(num === sync4visible[0]){
      sync4.trigger("owl.goTo", num-1)
    }
    
  }
 
});
</script>
<link rel="stylesheet" type="text/css" href="http://owlgraphic.com/owlcarousel/owl-carousel/owl.carousel.css">
<style>
#sync1 .item{
    background: #0c83e7;
    padding: 80px 0px;
    margin: 5px;
    color: #FFF;
    -webkit-border-radius: 3px;
    -moz-border-radius: 3px;
    border-radius: 3px;
    text-align: center;
}
#sync2 .item{
    background: #C9C9C9;
    padding: 10px 0px;
    margin: 5px;
    color: #FFF;
    -webkit-border-radius: 3px;
    -moz-border-radius: 3px;
    border-radius: 3px;
    text-align: center;
    cursor: pointer;
}
#sync2 .item h1{
  font-size: 18px;
}
#sync2 .synced .item{
  background: #0c83e7;
}



/*carousel 2 */
#sync3 .item{
    background: #0c83e7;
    padding: 80px 0px;
    margin: 5px;
    color: #FFF;
    -webkit-border-radius: 3px;
    -moz-border-radius: 3px;
    border-radius: 3px;
    text-align: center;
}
#sync4 .item{
    background: #C9C9C9;
    padding: 10px 0px;
    margin: 5px;
    color: #FFF;
    -webkit-border-radius: 3px;
    -moz-border-radius: 3px;
    border-radius: 3px;
    text-align: center;
    cursor: pointer;
}
#sync4 .item h1{
  font-size: 18px;
}
#sync4 .synced .item{
  background: #0c83e7;
}
</style>
<div id="sync1" class="owl-carousel">
  <div class="item"><h1>1</h1></div>
  <div class="item"><h1>2</h1></div>
  <div class="item"><h1>3</h1></div>
  <div class="item"><h1>4</h1></div>
  <div class="item"><h1>5</h1></div>
  <div class="item"><h1>6</h1></div>
  <div class="item"><h1>7</h1></div>
  <div class="item"><h1>8</h1></div>
  <div class="item"><h1>9</h1></div>
  <div class="item"><h1>10</h1></div>
  <div class="item"><h1>11</h1></div>
  <div class="item"><h1>12</h1></div>
  <div class="item"><h1>13</h1></div>
  <div class="item"><h1>14</h1></div>
  <div class="item"><h1>15</h1></div>
  <div class="item"><h1>16</h1></div>
  <div class="item"><h1>17</h1></div>
  <div class="item"><h1>18</h1></div>
  <div class="item"><h1>19</h1></div>
  <div class="item"><h1>20</h1></div>
  <div class="item"><h1>21</h1></div>
  <div class="item"><h1>22</h1></div>
  <div class="item"><h1>23</h1></div>
</div>
<div id="sync2" class="owl-carousel">
  <div class="item"><h1>1</h1></div>
  <div class="item"><h1>2</h1></div>
  <div class="item"><h1>3</h1></div>
  <div class="item"><h1>4</h1></div>
  <div class="item"><h1>5</h1></div>
  <div class="item"><h1>6</h1></div>
  <div class="item"><h1>7</h1></div>
  <div class="item"><h1>8</h1></div>
  <div class="item"><h1>9</h1></div>
  <div class="item"><h1>10</h1></div>
  <div class="item"><h1>11</h1></div>
  <div class="item"><h1>12</h1></div>
  <div class="item"><h1>13</h1></div>
  <div class="item"><h1>14</h1></div>
  <div class="item"><h1>15</h1></div>
  <div class="item"><h1>16</h1></div>
  <div class="item"><h1>17</h1></div>
  <div class="item"><h1>18</h1></div>
  <div class="item"><h1>19</h1></div>
  <div class="item"><h1>20</h1></div>
  <div class="item"><h1>21</h1></div>
  <div class="item"><h1>22</h1></div>
  <div class="item"><h1>23</h1></div>
</div>




<!-- carousel two -->
<div id="sync3" class="owl-carousel">
  <div class="item"><h1>1</h1></div>
  <div class="item"><h1>2</h1></div>
  <div class="item"><h1>3</h1></div>
  <div class="item"><h1>4</h1></div>
  <div class="item"><h1>5</h1></div>
  <div class="item"><h1>6</h1></div>
  <div class="item"><h1>7</h1></div>
  <div class="item"><h1>8</h1></div>
  <div class="item"><h1>9</h1></div>
  <div class="item"><h1>10</h1></div>
  <div class="item"><h1>11</h1></div>
  <div class="item"><h1>12</h1></div>
  <div class="item"><h1>13</h1></div>
  <div class="item"><h1>14</h1></div>
  <div class="item"><h1>15</h1></div>
  <div class="item"><h1>16</h1></div>
  <div class="item"><h1>17</h1></div>
  <div class="item"><h1>18</h1></div>
  <div class="item"><h1>19</h1></div>
  <div class="item"><h1>20</h1></div>
  <div class="item"><h1>21</h1></div>
  <div class="item"><h1>22</h1></div>
  <div class="item"><h1>23</h1></div>
</div>
<div id="sync4" class="owl-carousel">
  <div class="item"><h1>1</h1></div>
  <div class="item"><h1>2</h1></div>
  <div class="item"><h1>3</h1></div>
  <div class="item"><h1>4</h1></div>
  <div class="item"><h1>5</h1></div>
  <div class="item"><h1>6</h1></div>
  <div class="item"><h1>7</h1></div>
  <div class="item"><h1>8</h1></div>
  <div class="item"><h1>9</h1></div>
  <div class="item"><h1>10</h1></div>
  <div class="item"><h1>11</h1></div>
  <div class="item"><h1>12</h1></div>
  <div class="item"><h1>13</h1></div>
  <div class="item"><h1>14</h1></div>
  <div class="item"><h1>15</h1></div>
  <div class="item"><h1>16</h1></div>
  <div class="item"><h1>17</h1></div>
  <div class="item"><h1>18</h1></div>
  <div class="item"><h1>19</h1></div>
  <div class="item"><h1>20</h1></div>
  <div class="item"><h1>21</h1></div>
  <div class="item"><h1>22</h1></div>
  <div class="item"><h1>23</h1></div>
</div>

Any thoughts?

Cheers,

Andrew

4

Hi there,

Does anyone have any thoughts as to how I could fix the above code? I suspect it’s a missing or duplicated script reference but I can’t find it myself? If anyone can help at all I’d greatly appreciate it.

Cheers,

Andrew

5

Hey,

A fresh pair of eyes always helps! Have taken another look at the duplicated JavaScript and it was just a simple case of diffentiating “current”, “number” and “num” to separate it from the other variable definitions and assignations.


  /* carousel two */
  var sync3 = $("#sync3");
  var sync4 = $("#sync4");
 
  sync3.owlCarousel({
    singleItem : true,
    slideSpeed : 1000,
    navigation: true,
    pagination:false,
    afterAction : syncPosition2,
    responsiveRefreshRate : 200,
  });
 
  sync4.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 syncPosition2(el){
    var current2 = this.currentItem;
    $("#sync4")
      .find(".owl-item")
      .removeClass("synced")
      .eq(current2)
      .addClass("synced")
    if($("#sync4").data("owlCarousel") !== undefined){
      center2(current2)
    }
  }
 
  $("#sync4").on("click", ".owl-item", function(e){
    e.preventDefault();
    var number2 = $(this).data("owlItem");
    sync3.trigger("owl.goTo",number2);
  });
 
  function center2(number2){
    var sync4visible = sync4.data("owlCarousel").owl.visibleItems;
    var num2 = number2;
    var found = false;
    for(var i in sync4visible){
      if(num2 === sync4visible[i]){
        var found = true;
      }
    }
 
    if(found===false){
      if(num2>sync4visible[sync4visible.length-1]){
        sync4.trigger("owl.goTo", num2 - sync4visible.length+2)
      }else{
        if(num2 - 1 === -1){
          num2 = 0;
        }
        sync4.trigger("owl.goTo", num2);
      }
    } else if(num2 === sync4visible[sync4visible.length-1]){
      sync4.trigger("owl.goTo", sync4visible[1])
    } else if(num === sync4visible[0]){
      sync4.trigger("owl.goTo", num2-1)
    }
    
  }

Now to name the variables something more meaningful!! :slight_smile: Hope this is also useful to someone else.

Cheers,

Andrew