Shoxt3r
Reputation: 1
Synced Carousels
I'm currently working with the Owl Carousel plugin to create multiple synced carousels as per their demo shown on the address below, though with multiple carousels on one page.
http://owlgraphic.com/owlcarousel/demos/sync.html
I've managed to duplicate the carousels successfully and got them to work independently apart from one specific problem when working with different numbers of small items. 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>
I'm sure it's a case of a variable that needs a different name assigned to it but I can't for the life of me work out what's wrong. Any thoughts?
Upvotes: 0
Views: 1416
Answers (1)
Shoxt3r
Reputation: 1
Having taken a look at it myself it was a simple case of renaming the "current", "num" and "number" variables in the second copy of the script. Now to name them something more meaningful!!
/* 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)
}
}
Upvotes: 0
Related Questions
- Owl carousel infinite loop
- Multiple synced owl carousel
- Using multiple (owl) carousel on a single page
- Owl Carousel Sync Items
- Linked Owl Carousels - 1 controlling the other
- owl-carousel 2 sync customization
- Owl Carousel 2 sync demo with item center
- Owl Carousel doesn't work properly
- Sync 2 owl carousels or add callbacks like "onchangeprev, onchangenext"
- Multiple Owl-Carousel in a single page not working