Owlcarousel2: Add custom html content in Dots?

[ipankajthakur]

Hello!! Is there any way to put some custom html content in dots so that we can put some images and text in to make it something like thumbnails slider? If yes then please tell me how.

Thanks in advance :)

[DmitriyRF]

+1

[eparisio]

with "dotsData" attribute you can add custom html to the dots

[tonykiefer]

I think this is the solution you are looking for. http://vertx.com/edc-transit-sling

If it is...let me know and I'll explain to you how I did it...This is a dual synced carousel. In this example I use nav icons, but in another solution is use dots instead. But I think the dual synced carousel is what you need. Be sure to check the navigation...the top nav(main image) is in sync with the bottom control(these are both carousels. You can click and drag either one and they both stay in sync.

[ipankajthakur]

@eparisio Are you sure this would work? As we need to have dynamic content there.

[ipankajthakur]

@tonykiefer Yes this is the same I am asking for. But can we have the same with videos and thumbnails? And thumbnails with a caption text on hover.

[eparisio]

@thakurpunk for sure the code is present in owl.navigation.js

sorry but i mada an error on the previous code you need to set it in html:

$(".owl-carousel").owlCarousel({
items: 1,
dots: true,
dotsData: true
});

• slide 1
• slide 2
• slide 3

there an example fiddle

they remove the demo and example from documentation but it's implemented

there is the param line 141, and the initialize at line 76

[ipankajthakur]

@eparisio this is fine. but what we can do if we want some html content like buttons and text altogether? This one id good for simpler text.

[eparisio]

you can add any html inside, you are not restricted to text or paragraph.

you can do

[ipankajthakur]

@eparisio have you done something like this before? can I see some example

[eparisio]

there is the fiddle in the example before, you can play with it!

[ipankajthakur]

thanks @eparisio :)

[odahcam]

@thakurpunk at this moment I'm writing a plugin to sync the carousels until nobody add this funcionality to Owl. I will post the source code soon.

[tonykiefer]

Most recently someone posted the way they sync two carousels...take a look here

https://github.com/OwlCarousel2/OwlCarousel2/issues/1377#issuecomment-216883486

[tonykiefer]

@thakurpunk - until they add the dual synced carousels I think they just expect us to customize the code ourselves and help each other. So far so good. This is a good community with a lot of great ideas.

[tonykiefer]

@thakurpunk please see the attached. For styling...you'll need to write your own.

@luizfilipe2557 it looks like we both had the same resources...nice work on your code...feel free to review mine...also a live version...http://vertx.com/edc-transit-sling

I'll be launching another site where I use dots for the nav...I'll be posting that come the 18th

Dual Sync Carousel.txt

[odahcam]

Hey everyone, plugin to sync the carousels is ready. Take a look on Issue #1377 in this comment.

I moved the plugin source code to: https://github.com/odahcam/owl-carousel-sync-plugin

[mdeboer]

@luizfilipe2557 works great, thanks 👍

Only bug I still have (with my own syncing code and with your plugin) that the index is completely off between sliders when set to loop. Still not sure wether it is due me cloning the slider element (before initializing owl) or it's really a bug somewhere. All works fine without looping!

Both the event's item.index as jQuery(this).index() are both off (and both the same). Somewhere the indexes get messed up.

[odahcam]

@mdeboer I found the problem that generates the bug. I will be working on it soon, my first idea is to set data-index on the slides that represents the exhibition index and order when the carousel is in loop and use this data-index instead of element index. I will create a branch for it and describe the problem so that users like you and me can work on it.

Thanks for the feedback, really appreciate it. :)

[mdeboer]

@luizfilipe2557 that was my idea too but for some reason that didn't work too well. At least not when setting it before initializing owl. Haven't tried for very long though, haven't got much time for this project and worked my way around this time.

Yet, a solution would be very nice! 👍

[odahcam]

@mdeboer I don't have much time too, but together with git we can make it by small steps, even because the core of the plugin is ready! :smile:

[daviddeutsch]

As noted in the other thread - there is a core plugin for this (linking owl instances) in the works.

[ipankajthakur]

@tonykiefer and @luizfilipe2557 Thanks, I have created one using suggested codes, you can see it http://mylkshake.co/mylshaketv/ just review and do let me know how is it.

[odahcam]

Hllo guys, as I said in #1377 thanks to @eparisio we could get this in version two (https://github.com/odahcam/owlcarousel-sync-plugin/tree/version-2), we made the plugin as a "native plugin", I would be very happy if you all join us in this development. :smile:

---

• Sync Plugin: Master Branch (V1)
• Sync Plugin: Version 2 Branch (V2)
• Sync Plugin: V2.2 Plugin example 1 (jsFiddle)
• Sync Plugin: V2.2 Plugin example 2 (jsFiddle)

[ipankajthakur]

@luizfilipe2557 have you reviewed mine?

[odahcam]

@thakurpunk Yeah! Your code is very very close to my v1 code. Just like me and the people who helped me you don't have loop:true feature too, what makes it closer to our stable code. Feel free to work on our code too!

---

Take a look: https://github.com/odahcam/owlcarousel-sync-plugin/blob/master/owl.sync.js
Take a look on V2 too :smile: : https://github.com/odahcam/owlcarousel-sync-plugin/blob/version-2/owl.sync.js

[ipankajthakur]

thanks @luizfilipe2557

[mitkovalkov]

Hi Guys,
when I use dotsData: true in my slider and put a link in data-dote="<a href='https://github.com/'>", the link does not work correctly, any suggestions?

[odahcam]

@mitkovalkov Sorry, but here is not the place for this kind of question.

*But, * please post a question at stackoverflow.com with an example and I'll take a look. :)

[mitkovalkov]

@odahcam Thanks for the advice, I already solved the problem.