gijsroge / owlcarousel2-thumbs Goto Github PK

Is it possible to add navigation both slider and thumbnails?

Hello!
I'm initializing carousel like so:
$('.owl-carousel').$carousel.owlCarousel({ items: 1, dots: false, margin: 5, loop: true, thumbImage: true, thumbs: true, });
At moment of initialization it have one image. Thumbinail is rendered OK.
I need to add image to owl. I'm doing it like so:
$('.owl-carousel) .owlCarousel('add', '<div><img src="' + list.createFileUrl(file) + '"></div>') .owlCarousel('update');
After this, carousel updated OK, but thumbinails did not.
Is there any way to update thumbinails when item added to main owl.carousel?
Thanks.

I'm adding a filter to a slideshow, and I can easily rebuild the contents using replace.owl.carousel. However, the thumbnails don't update along with it.

Hi,

Really like this plugin, so I'm reporting this bug.
Using Owl Carousel v2.0.0-beta.3, Thumbs v2.0.0

Here is my call:
$('.gallery-slider').owlCarousel({ items: 1, thumbs: true, thumbImage: true, loop: true, dots: false });
With dots: false, the thumbs do nothing when clicked. Console log returns the error above. With dots: true, the thumbs work fine. So I'm temporarily using CSS to hide them.

Please fix :)

Active thumbnail item do not goes to the middle.
I want to create a qoute carousel like this: http://i.imgur.com/lLurP42.png

Hello! I have just encountered problem: when I added mCustomScrollbar to .owl-thumbs it didn't work, so I found a solution and I hope it can help you to improve your plugin. You should switch your ".children()" with ".find()" in this parts of code:
$(this._thumbcontent._thumbcontainer).on('click', this._thumbcontent._thumbcontainer.children()
to
$(this._thumbcontent._thumbcontainer).on('click', this._thumbcontent._thumbcontainer.find('.' + options.thumbItemClass)
and
thumbContainer.children().filter('.active').removeClass('active'); thumbContainer.children().eq(this.owl_currentitem).addClass('active');
to
thumbContainer.find('.' + options.thumbItemClass).filter('.active').removeClass('active'); thumbContainer.find('.' + options.thumbItemClass).eq(this.owl_currentitem).addClass('active');

Hi,

We really love you extensions of Owl Carousel thanks for your time and effort. Our developers found out a bug in the code which is annoying for the user experience. This is the situation:

When you click on the thumbnail that already is active (e.g. double click on the thumbnail) the last thumbnail of the carousel will become active, instead of the one you double-clicked on. The same thing happens when you click not on a specific thumbnail but inside of the owl-thumbs division. The last thumbnail of the carousel will become active instead of that nothing will happen.

This is how we adjust your code.
if ( $( e.target ).index() === 2) { //only change image if thumbnail is not active already
We apply this if statement around options.thumbsPrerendered.

Maybe you can look into this to make your library even better and more user-friendly. If there is anything we can help you with. Let me know.

All the best,
Jordy

Hey there,

First thing awesome coding! i love this slider so much.

Here comes my problem.
I also use the normal owl carousel 2 and there i use the navigation (prev, next).
why can i just not use the normal nav in this thumbs slider?

$('.owl-carousel').owlCarousel({
loop: true,
items: 1,
nav:true,
navText : ['<i class="icon ArrowLeft" aria-hidden="true"></i>','<i class="icon ArrowRight" aria-hidden="true"></i>'],
thumbs: true,
thumbsPrerendered: true,
thumbContainerClass: 'owl-thumbs',
thumbItemClass: 'owl-thumb-item'
});

Kind regards,

Wilco-IO

When using the video: true option, the video thumbnail is not displayed by using the appropriate URL (e.g. http://img.youtube.com/vi/insert-youtube-video-id-here/hqdefault.jpg).

how can I add photoswipe?
https://github.com/dimsemenov/PhotoSwipe

I think in your bower.json file, the main property should be:

"main": "dist/owl.carousel2.thumbs.js"

Hi there, thanks so much for creating this! Just wondering if you have any idea why my scrolling isn't smooth? It's fine when moving between a large distance, but for the closest items, whether moving forwards or backwards, it's really jerky.

Thanks in advance for your help.
Kate

As per this example;

http://justvehiclegraphics.co.uk/car-graphics-dev

It seems the thumbnails are targeting the wrong slides when you show more than one item at a time, maybe I could be doing something wrong - but I can't see where in such a simple process to get it going. :/

The data-thumb attribute does not appear to work, it always shows the thumbnail of the main image even if I change the data-thumb attribute to a completely different random image.

thanks for sharing this script. pretty sure thumbPrerendered is supposed to be thumbsPrerendered in the docs.

Owl v2 (@Version 2.0.0) loop set to true and slideBy set to 'page' breaks the loop and rewinds. e.g

loop:true, // Inifnity loop. Duplicate last and first items to get loop illusion.
rewind:false, // Go to first/last.
slideBy:'page'

By the way - excellent work @gijsroge thank you.

I am looking to display my thumbnails in groups of 5 to avoid wrapping to a second line. Is there any support or advice on how best to accomplish this? Thank you.

Is there a way to achieve the same result with your plugin?

Need to have all thumbs in 1 row and sync movement.

Hi,

How to add in owl carousel thumb prev and next button. I need to add more than 100+ images so I need thumbnail prev & next button. Please help.

Hi there.

There is a bug when you try to add more then one class to the thumb item selector ('owl-thumb-item').

On js:

thumbItemClass: 'owl-thumb-item class2 class3 class4',

They are created like this:

<button class="owl-thumb-item" class2="" class3="" class4="">...</button>

To fix that problem, i edited some lines on the original js:

this line:
this._thumbcontent._thumbcontainer.append('<button class=' + options.thumbItemClass + '><img src="' + this._thumbcontent[i].attr('src') + '" alt="' + this._thumbcontent[i].attr('alt') + '" /></button>');

...to this:
this._thumbcontent._thumbcontainer.append('<button class="' + options.thumbItemClass + '"><img src="' + this._thumbcontent[i].attr('src') + '" alt="' + this._thumbcontent[i].attr('alt') + '" /></button>');
(the double quotes on button class was missing).

and this:
var index = $(e.target).parent().is(this._thumbcontent._thumbcontainer) ? $(e.target).index() : $(e.target).closest('.'+options.thumbItemClass).index();

...to this:
var index = $(e.target).parent().is(this._thumbcontent._thumbcontainer) ? $(e.target).index() : $(e.target).closest('.'+options.thumbItemClass.replace(/\s+/g, ".")).index();
(preparing the selector to get more then one class)

The problem was solved an additional classes now is working:

<button class="owl-thumb-item class2 class3 class4"></button>

(and thanks for this great Owl extension, btw!)

Hi,
when I try to use a carousel with thumbnails and another one without thumbs in a page, there are 2 problems:

• active thumbs class doesn't change (it remains the first)
• in responsive mode, when resize window, the first carousel changes with the options of the second. If I refresh the page, it display correctly.

When using next and previous arrow of thumbs carousel it triggers the first slide in parent carousel as well. How can I stop that?

Also note that to make the thumbs behave as a separate owl carousel I had to keep the "owl-thumbs" class and "data-slider-id" on a parent div of thumbs carousel.

Hi, its really nice improvement and I am gonna use it in one of my theme, however I was wondering is it possible to give X number of visible thumbs for example if I have 20 images, obviously 20 things cannot be shown in one row so I define

visibleThumbs:5

and soon it it scrolls to slide 6 thumbs also scroll to 6-10, currently its difficult to adopt if we have more images..

thanks

Great job on the plugin.

But, I guess I didn't understand it limits the number of thumbnails displayed based on the width of your .owl-thumbs width.

I'm actually after another carousel that slides around so you can see all the image thumbnails for the images. There's 29 pages in the attached example, but no way to scroll the thumbs that I've found.

.

I am trying to Integrate the it with Parent and Child Carousel,
I added different Slider Id for each Carousel, but the child tabs still targets the parent tabs.

If the plugin is loaded on a page where slide is supposed to animate with animate.css the animation is reset to default slide animation. I used this code to animate:
animateOut: 'slideOutDown', animateIn: 'slideInDown',

Does not work with plugin loaded. I don't have to use it on the slider to break the animation.

Thank you for the plugin I love it!

Edit: Using latest Owl carousel 2.0.0-beta.2.4

Hello, i'm experiencing this error when i try this in magento, what could be the cause of this problem? thank you very much

I'm using multiple media items (combination of images and Youtube videos {by providing the URL}). The thumbnail of YouTube video is not appearing and shows "undefined".

Is there a way to implement scroll on thumbnails

When trying to install owl.carousel2.thumbs from npm, the latest version available is the 0.1.6, although the latest available on GH is 0.1.7