Hey! Big fan of Owl Carousel, currently using it on my company's home page.
We use a version of "Synced Owls" which is documented here:
http://owlgraphic.com/owlcarousel/demos/sync.html
I've been wanting to update to the Owl Carousel 2 beta to add some new animations and infinite looping, but doing so seems to have broken our synced carousels.
My guess is it has something to do with the goTo event. Does OC2 not support custom events yet? I can't find anything about events in the documentation. Am I missing something, or do I need to just wait until those are added in a newer version?
Any help would be greatly appreciated. Thanks!
E
evanart
All 17 comments
May be this code will help to solve the problem?
var $sync1 = $(".big-images"),
$sync2 = $(".thumbs"),
flag = false,
duration = 300;
$sync1
.owlCarousel({
items: 1,
stagePadding: 100,
margin: 10,
nav: true
})
.on('change.owl.carousel', function (e) {
if (e.namespace && e.property.name === 'position' && !flag) {
flag = true;
$sync2.trigger('to.owl.carousel', [e.relatedTarget.relative(e.property.value), duration, true]);
flag = false;
}
});
$sync2
.owlCarousel({
items: 4,
margin: 10,
nav: true
})
.on('click', '.owl-item', function (e) {
e.preventDefault();
$sync1.trigger('to.owl.carousel', [$(this).index(), duration, true]);
})
.on('change.owl.carousel', function (e) {
if (e.namespace && e.property.name === 'position' && !flag) {
flag = true;
$sync1.trigger('to.owl.carousel', [e.relatedTarget.relative(e.property.value), duration, true]);
flag = false;
}
});
pafnuty
on 5 Nov 2014
I get errors on both initial trigger lines, depending on which gets executed first: Uncaught TypeError: undefined is not a function. I've looked all around and can't seem to find a version of syncing that works
christianmagill
on 11 Nov 2014
@christianmagill
My example, as it turned out, worked on not the latest version of the script
This code is working normaly:
var $sync1 = $(".big-images"),
$sync2 = $(".thumbs"),
flag = false,
duration = 300;
$sync1
.owlCarousel({
items: 1,
margin: 10,
nav: true,
dots: false
})
.on('change.owl.carousel', function (e) {
if (e.namespace && e.property.name === 'items' && !flag) {
flag = true;
$sync2.trigger('to.owl.carousel', [e.item.index, duration, true]);
flag = false;
}
});
$sync2
.owlCarousel({
margin: 20,
items: 8,
nav: true,
center: true,
dots: false
})
.on('click', '.owl-item', function () {
$sync1.trigger('to.owl.carousel', [$(this).index(), duration, true]);
})
.on('change.owl.carousel', function (e) {
if (e.namespace && e.property.name === 'items' && !flag) {
flag = true;
$sync1.trigger('to.owl.carousel', [e.item.index, duration, true]);
flag = false;
}
});
I was actually about to post this question and this did the job.
Thanks!
adampatterson
on 17 Nov 2014
Much thanks!
christianmagill
on 17 Nov 2014
Update for new version of plugin:
var $sync1 = $(".big-images"),
$sync2 = $(".thumbs"),
flag = false,
duration = 300;
$sync1
.owlCarousel({
items: 1,
margin: 10,
nav: true,
dots: true
})
.on('changed.owl.carousel', function (e) {
if (!flag) {
flag = true;
$sync2.trigger('to.owl.carousel', [e.item.index, duration, true]);
flag = false;
}
});
$sync2
.owlCarousel({
margin: 20,
items: 6,
nav: true,
center: true,
dots: true
})
.on('click', '.owl-item', function () {
$sync1.trigger('to.owl.carousel', [$(this).index(), duration, true]);
})
.on('changed.owl.carousel', function (e) {
if (!flag) {
flag = true;
$sync1.trigger('to.owl.carousel', [e.item.index, duration, true]);
flag = false;
}
});
I have the same problem with v2 and v1, can't handle more than 1 set of syncs sliders.
octavioamu
on 7 Dec 2014
@pafnuty ,
Thank you for your suggestions on creating synced owl's. I have used your suggestions for synced owls in my module here:
https://github.com/OdooCommunityWidgets/website_multi_image
this module works with the Odoo ERP/CMS platform and adds multi-image functionality to the website's product view page. Thank you for your suggestions and contributions they have made the layout/design of the module's product view page far easier than I expected. Thank you to @OwlFonk and all contributors to OwlCarousel2, the functionality and performance of the slider is far better than any I have come across.
lukebranch
on 8 Dec 2014
@pafnuty Your solution is really clean, but what about a looping instance? Your demo starts at 1, so the first slide is centered and there is nothing to the left. I would to have the carousel start off showing my x items on an infinite loop.
If I use the owcarousel loop: true option and loop the .big-images, the .thumbs don't sync, and if I loop the .thumbs as well, I get some broken behaviour.
5tormTrooper
on 9 Dec 2014
I personally synced two carousels by having them both take advantage of Url Hash Navigation.
mckennedy
on 15 Dec 2014
@pafnuty Thank you very much for taking the same to setup that sample. It helped me immensely today.
Cheers!
lmartins
on 14 Jan 2015
@5tormTrooper Unfortunately I didn't get to implement looping carousel, not enough skills
@lmartins I am glad that my efforts were not in vain
pafnuty
on 14 Jan 2015
@5tormTrooper have you found a solution for the looping problem. Just bumped into this problem too.
lmartins
on 26 Jan 2015
@lmartins No. Not enough skills either I'm afraid.
5tormTrooper
on 26 Jan 2015
I've reproduced the same effect as on http://owlgraphic.com/owlcarousel/demos/sync.html.
The code might not be the nicest, but it works. One difference is that instead of class '.synced' I used class '.current'.
//SYNCED OWL CAROUSEL (version 2.0.0-beta.2.4)
var
$sync1 = $("#sync1"), //big photo
$sync2 = $("#sync2"), //thumbs
duration = 300;
//big photo
$sync1
.owlCarousel({
items: 1
})
.on('changed.owl.carousel', function (e) {
var syncedPosition = syncPosition(e.item.index);
if ( syncedPosition != "stayStill" ) {
$sync2.trigger('to.owl.carousel', [syncedPosition, duration, true]);
}
});
//thumbs
$sync2
.on('initialized.owl.carousel', function() { //must go before owl carousel initialization
addClassCurrent( 0 );
})
.owlCarousel({ //owl carousel init
items: 4
})
.on('click', '.owl-item', function () {
$sync1.trigger('to.owl.carousel', [$(this).index(), duration, true]);
});
//adds 'current' class to the thumbnail
function addClassCurrent( index ) {
$sync2
.find(".owl-item")
.removeClass("current")
.eq( index ).addClass("current");
}
//syncs positions. argument 'index' represents absolute position of the element
function syncPosition( index ) {
//PART 1 (adds 'current' class to thumbnail)
addClassCurrent( index );
//PART 2 (counts position)
var itemsNo = $sync2.find(".owl-item").length; //total items
var visibleItemsNo = $sync2.find(".owl-item.active").length; //visible items
//if all items are visible
if (itemsNo === visibleItemsNo) {
return "stayStill";
}
//relative index (if 4 elements are visible and the 2nd of them has class 'current', returns index = 1)
var visibleCurrentIndex = $sync2.find(".owl-item.active").index( $sync2.find(".owl-item.current") );
//if it's first visible element and if there is hidden element before it
if (visibleCurrentIndex == 0 && index != 0) {
return index - 1;
}
//if it's last visible element and if there is hidden element after it
if (visibleCurrentIndex == (visibleItemsNo - 1) && index != (itemsNo - 1)) {
return index - visibleItemsNo + 2;
}
return "stayStill";
}
// ./SYNCED OWL CAROUSEL
laimisf
on 1 Jun 2015
It is not working... I have 2 slider with same images but these slider have different event.item.value...
For first slider it is 0-3 and for second slider 5-8
sibinx7
on 14 Sep 2015
Check out this issue for a solution: issues/1378 - Linked OwlCarousel instances
daviddeutsch
on 7 May 2016
Related issues
Dipak-Chandran
路
3Comments
SoufianeAbid
路
3Comments
shamimsaj
路
3Comments
hopea114y
路
3Comments
JezCheese
路
3Comments