Owlcarousel2: Linked OwlCarousel instances

[daviddeutsch]

This seems to be one of the most requested features that pops up again and again. I'm creating this issue as a new, canonical item that I can link other issues to when I'm closing them.

[daviddeutsch]

While I'm finishing this up, you can already find the current code here: feature/1378-linked-owls/src/js/owl.linked.js.

To use it, simply load the plugin in your markup and add

linked: "#other-carousel,.maybe-another-one"

to the options you pass in.

(Note that it supports multiple carousels.)

[daviddeutsch]

Also note: There is a separate plugin I will add later called Current that will make it possible to have a dedicated .current class to denote the slide that is currently in focus and also attach click events to convert a thumbnail carousel into a gallery-type navigation.

[odahcam]

@daviddeutsch Is there any issue/repository where I can follow the Current plugin development? Thanks in advance!

[alexandrelapoux]

Thanks David, this new plugin work very well.
I use loop, auto and thumbs click.
Many thanks.

[odahcam]

@alexandrelapoux try this:

sync2.on('initialized.owl.carousel linked.to.owl.carousel', function() {
    sync2.find('.owl-item.current').removeClass('current');
    var current = sync2.find('.owl-item.active.center').length ? sync2.find('.owl-item.active.center') : sync2.find('.owl-item.active').eq(0);
    current.addClass('current');
});

instead of this:

sync2.on('initialized.owl.carousel', function () { 
    sync2.find('.owl-item').eq(0).addClass('current');
})

@daviddeutsch the plugin isn't triggering the linked.to.owl.carousel on startup, it should trigger this event since when the carousels are initialized the plugin links them. In fact even initialized.owl.carousel is being triggered on startup here.

---

jsFiddle: Linked Owl with Current

[alexandrelapoux]

Hi David,

Many thanks works like a charm.

[jtrolle]

It is too restricive if you do not have an id on your slider or several sliders on the same page.
For more flexibility linked option must be able to receive a jQuery object.

Slider

$(sync2).owlCarousel({
    nav: true,
    loop:true,
    items: 4,
    margin:10,
    linked: sync2.prev()
})

Plugin

linked = typeof(this._core.settings.linked) === 'string' ? this._core.settings.linked.split(',') : this._core.settings.linked;

By this way, you can use class name, id or jQuery object

jsFiddle demo: http://jsfiddle.net/e3uarr7k/

[amdad]

@daviddeutsch Thanks! Can you add demo with options to docs for this?

[Pixelous]

Hi @daviddeutsch,

thanks for the linked feature.

Can you please take a look why when using it and clicking previous button there is no animation between carousel items? Here is the link http://demo.themeuniverse.net/pear/demo-21/

I spent whole day trying to find what is the problem but no luck :(

[odahcam]

@Pixelous , helo, I'm here to help. I could not found what you syncing your "glasses carousel" with. You have sure you need to use this plugin in this case?

[Pixelous]

@odahcam I am syncing it with the carousel above where the 'New Sunglasses' text is located.

I am initializing the slider in http://demo.themeuniverse.net/pear/demo-21/wp-content/themes/pear/js/jquery.init.js on line 726.

[Pixelous]

@daviddeutsch @odahcam looks this is bug. You can see exactly the same problem in the jsFiddle demo: http://jsfiddle.net/e3uarr7k/ provided by @jtrolle. Сlick 'prev' button and you will see there is no transition between 1 and 5 slides. This can be seen more clearly when 'items' option is set to 1. Please see the demo http://jsfiddle.net/e3uarr7k/12/ Can you please fix this annoying bug ASAP? Can I donate you to make the things go faster?

[s0By]

Dealing with thumbs as well and noticed 1 bug in this solution.
Initialized is not being triggered, so when owl carousel is launched "first current" item is not being highlighted.

Another interesting fact that through the callback function it works:

onInitialized: callback,

but with 'on' event it doesn't:

.on('initialized.owl.carousel', function() {
    console.log('init')
});

If you copy-paste the function of linked event the bug with 1-5 slides will get fixed, so probably something is just wrong with initialized.owl.carousel event:

$(sync2).owlCarousel({
    nav: true,
    loop:true,
    items: 4,
    margin:10,
    onInitialized: current,
    linked: '.carousel_1'
}).on('linked.to.owl.carousel', function() {
    sync2.find('.owl-item.current').removeClass('current');
    var current = sync2.find('.owl-item.active.center').length ? sync2.find('.owl-item.active.center') : sync2.find('.owl-item.active').eq(0);
    console.log(current);
    current.addClass('current');
});
function current() {
    sync2.find('.owl-item.current').removeClass('current');
    var current = sync2.find('.owl-item.active.center').length ? sync2.find('.owl-item.active.center') : sync2.find('.owl-item.active').eq(0);
    current.addClass('current');
}

[odahcam]

initialized.owl.carousel event is really not working. I noticed that when I was working on Sync/Link owlCarousel plugins and I forgot to create a issue for this.

I made a pull request for @jtrolle sugestion, as you can check here: https://github.com/OwlCarousel2/OwlCarousel2/pull/1447

I'll see what I can do for the initialized error, maybe @daviddeutsch can help us.

[s0By]

I guess we can survive with a function way for now, while this is being fixed.

The other question which is bothering me @odahcam : how to make thumbnails clickable?
Tried your method from sync plugin

.on('click', '.owl-item', function () {
        $sync1.trigger('to.owl.carousel', [$(this).index(), duration, true]);
})

But it's not working properly for me.
I guess that's an indexing issue when loop is set to true, you have it as well in the sync plugin.

[odahcam]

Yeah, it only works without loop:true, in Sync repo we have an issue for this and segestions on how to solve it. I need to make clickable thumbs on loop:true too, so we could work together for this.

OwlCarousel can return the internal index of an elem easily, maybe extending the plugin to recognize click on .owl-items isn't a bad ideia, once all events return the index of the current slide and some other things.

[odahcam]

For initialized.owl.carousel or initialize.owl.carousel issues take a look in #1472

[odahcam]

@s0By here is your code for click navigation with loop: true: https://github.com/OwlCarousel2/OwlCarousel2/issues/1473

I left a link for my code on issue #1473.

[Pixelous]

Hi, @s0By @odahcam I am not sure can you confirm there is a fix, temporary or not for this bug?

[odahcam]

Temporary you can use:

$(elem).owlCarousel({
    nav: true,
    onInitialized: callback // the same as .on('initialize', callback)
})

This issue stills there, for click navigation you don't need to solve it, and for "current" highlighting you can use center: true and highlight the .owl-item.center || hightlight the first .owl-item.active in standard mode (not centered).

[m4ikel]

To contribute to this issue / feature request. I've just found out that it's already possible to sync two or more carousels using the "URLhashListener". Unsure why this solution isn't mentioned inside the docs, but it's the most easy (and logical) solution to sync multiple slideshows without actually creating an "diry" javascript fix.

Just set up two or more slideshows with the same listener, and your done!

[odahcam]

1. Interesting method.
2. Linked is a plugin, a plugin extends some code, not fix them.
3. OwlCarousel is designed to receive any kind of plugins.
4. Sometimes you just don't want a URL hash generating history for every slide change on the carousel., or you can't.

[ImranBug]

I tried the linked plugin but without thumb event or current classes it's not good and the other solutions ... I just cant get them working 100% so I created my own code and may be it will be help full for someone:

Codepen

    // Owl Carousel DOM Elements
    var carousel1 = '.js-carousel-1';
    var carousel2 = '.js-carousel-2';

    // Initialize plugin
    var owlCarousel1 = $(carousel1).owlCarousel({
        items: 1,
    });
    var owlCarousel2 = $(carousel2).owlCarousel({
        items: 6,
        margin: 10,
    });

    // Sync carousel & add current class
    carouselSyncCurrentClass();

    // On carousel change: Sync carousel & add current class
    owlCarousel1.on('changed.owl.carousel', function() {
        carouselSyncCurrentClass();
    });
    owlCarousel2.on('changed.owl.carousel', function(event) {
        carouselSyncCurrentClass();
    });

    // Thumbs switch click event.
    owlCarousel2.find('.item').click(function () {
        var itemIndex = $(this).parent().index();
        owlCarousel1.trigger('to.owl.carousel', itemIndex);
        carouselSyncCurrentClass();
    });


    function carouselSyncCurrentClass() {
        setTimeout(function () {
            var carousel1ActiveIndex = $('.js-carousel-1 .owl-item.active').index();
            $('.js-carousel-2 .owl-item').removeClass('current');
            var currentItem = $('.js-carousel-2 .owl-item:nth-child('+(carousel1ActiveIndex+1)+')');
            currentItem.addClass('current');

            if(!currentItem.hasClass('active')){
                if(currentItem.prevAll('.active').length > 0){
                    owlCarousel2.trigger('next.owl.carousel');
                }
                if(currentItem.nextAll('.active').length){
                    owlCarousel2.trigger('prev.owl.carousel');
                }
            }
        }, 100);
    }

HTML:

                            <div class="js-carousel-1 owl-carousel owl-theme">
                                <div class="item"> Your Content 1</div>
                                <div class="item"> Your Content 2</div>
                                <div class="item"> Your Content 3</div>
                                <div class="item"> Your Content 4</div>
                                <div class="item"> Your Content 5</div>
                                <div class="item"> Your Content 6</div>
                                <div class="item"> Your Content 7</div>
                            </div>

                            <div class="js-carousel-2 owl-carousel owl-theme">
                                <div class="item"> Your Content 1</div>
                                <div class="item"> Your Content 2</div>
                                <div class="item"> Your Content 3</div>
                                <div class="item"> Your Content 4</div>
                                <div class="item"> Your Content 5</div>
                                <div class="item"> Your Content 6</div>
                                <div class="item"> Your Content 7</div>
                            </div>

[odahcam]

This should help you: http://codepen.io/odahcam/pen/OXgWqg

[hetalv985]

I am using this plugin to sync 2 carousels. Lets call them A and B. In our case, B cannot be manually dragged by the user. A can be dragged and depending on its change, we jump B to a slide. The problem is, we require that B slides in the same direction as A is dragged in. This happens most of the time, but sometimes B slides in the opposite direction that A was dragged on. I understand it is possibly due to B sliding to a closest option. Is there any way the two carousels can be animated in the same direction?

[odahcam]

@hetalv985 Sadly, for now, the only way is to use loop: false carousels; because the slides will be in the same positions in this kind of carousel.

it is possibly due to B sliding to a closest option.

The quote above is true.

---

Your question could be a cool feature request. In past I was trying to report the same thing: https://gist.github.com/daviddeutsch/07b8e5201652456e428c9e7e65729433#gistcomment-1771158

[MoradHamdy]

@ImranBug You made a great and successful implementation for the syncing. Thanks a lot!

Can you please make change on the code to be similar looking as Owl Carousel 1 approach?

I mean actually when you choose the last or first item in the thumbs slider, it slide by 1. This approach as UX is very useful.

Here is a demo: http://www.fepsearchgroup.com/demos/sync.html

I hope you make it!

[odahcam]

Thanks! @MoradHamdy this functionality is not related with carousel syncing and is already done. I remember I made an approach like that in a project that is not online anymore. I believe that you can find something to light your way by searching the issues for "rewind".

Edit: Take a look: https://jsfiddle.net/rLt7wjw1/

[shikkaba]

Will this feature be added? It's not in the beta code, and there's no hint of it anywhere other than here.

[fsdevriver]

Any update about this feature?

[odahcam]

This feature is available as a plugin here: https://github.com/OwlCarousel2/OwlCarousel2/blob/feature/1378-linked-owls/src/js/owl.linked.js

Just download and include the script in your site right after owl, and you should be ok.

[richardwiggins]

@daviddeutsch @odahcam Bit confused on the implementation of this. Are there any details? I REALLY need to get this working, also for multiple carousels on one page i.e. two linked -- another two linked etc.

[FrankScript]

I'm also having trouble implementing https://github.com/OwlCarousel2/OwlCarousel2/blob/feature/1378-linked-owls/src/js/owl.linked.js to use as a way to to create thumbnails under images.

I've gotten as far as downloading the .js file, uploading it to my site, linking to it in the head of my page:
<script type="text/javascript" language="javascript" src="/path-to/owl.linked.js"></script>

Then, I have one section of items:
<div class="owl-carousel owl-theme" id="pictures">
<img class="owl-lazy" data-src="/path-to/picture.jpg" alt="" />
...

Then the script call:
... $('#pictures').owlCarousel({
linked: "#pictures,#thumbnails",
lazyLoad: true,
...

Then, a section section of items:
<div class="owl-carousel owl-theme" id="thumbnails">
<div class="item"><img src="/path-to/thumbnail.jpg" alt="" /></div>
...

Then, a second script call:
... $('#thumbnails').owlCarousel({
linked: "#pictures,#thumbnails",
...

This creates two slideshows which move together when I navigate them; however, when I click a thumbnail in the second carousel it does not cause that image to appear in the picture carousel.

Is there a method to do this via the owl.linked.js? Or is that a separate script needed?

[FrankScript]

Second comment: I don't know if there /is/ a way to use two, linked carousels to create thumbnails for pictures (there seems to be a way), however, there /is/ a built-in way to do this via the default Owl Carousel. This is to use the variable "dotsData".

I'll leave my previous comment up and include this one, even if it doesn't quite fit in the thread, as others may well be looking for this feature:

The pictures:
<div class="owl-carousel owl-theme">
<div data-dot="<img src='/path-to/thumbnail1.jpg' height='' width='' alt='sample' />"><img class="owl-lazy" data-src="/path-to/picture1.jpg" alt="sample" /></div>
<div data-dot="<img src='/path-to/thumbnail2.jpg' height='' width='' alt='sample' />"><img class="owl-lazy" data-src="/path-to/picture2.jpg" alt="sample" /></div>
</div>

I don't know if I am using the correct syntax for "data-dot=", but it looks like it works in this way. If this /is/ an incorrect way of using this pseudo-tag I'd like to know it.

Then the script:
<script>
$(document).ready(function(){
$('.owl-carousel').owlCarousel({
dots: true,
dotsData: true,
lazyLoad: true,
items: 1
});
});
</script>

In Owl Carousel 2 (2.3.4) this works, but clicking the thumbnails does not move the carousel. There is a fix request in currently to, in owl.carousel.js, replace:
this._templates.push('<div class="' + this._core.settings.dotClass + '">' +
$(e.content).find('[data-dot]').addBack('[data-dot]').attr('data-dot') + '</div>');
with:
this._templates.push('<button class="' + this._core.settings.dotClass + '">' +
$(e.content).find('[data-dot]').addBack('[data-dot]').attr('data-dot') + '</button>');
(fix request: https://github.com/OwlCarousel2/OwlCarousel2/pull/2502).

This works!

This is a major feature. I, humbly, recommend adding a demo documentation about this.

Note, the drawback of using this method vs. linking two carousels is that the thumbnails have no pagination (as far as I can tell).