Thumbnail custom для Owl slider

[kattiperk]

Здравствуйте.

 

На сайте стоит слайдер Owl.

Потрубовался функционал от него - thumbnail.

Дописан следующим образом

               // 1 - assign each 'dot' a number                dotcount = 1;                jQuery('.owl-carousel_4 .owl-dot').each(function() {                  jQuery( this ).addClass( 'dotnumber' + dotcount);                  jQuery( this ).attr('data-info', dotcount);                  dotcount=dotcount+1;                });                // 2 - assign each 'slide' a number                slidecount = 1;                jQuery('.owl-carousel_4 .owl-item').not('.cloned').each(function() {                  jQuery( this ).addClass( 'slidenumber-item slidenumber' + slidecount);                  slidecount=slidecount+1;                });                // sync the slide number img to its dot counterpart (e.g slide 1 img to dot 1 background-image)                jQuery('.owl-carousel_4 .owl-dot').each(function() {                grab = jQuery(this).data('info');                slidegrab = jQuery('.slidenumber'+ grab +' img').attr('src');                console.log(slidegrab);                jQuery(this).css("background-image", "url("+slidegrab+")");                });                // this final bit can be removed and overriden with your own css or function, i just have it                // to make it all neat                amount = jQuery('.owl-carousel_4 .owl-dot').length;                // gotowidth = (100/amount)-1.2;                jQuery('.owl-carousel_4 .owl-dot').css("width", 60+"px");                newwidth = jQuery('.owl-dot').width();                jQuery('.owl-carousel_4 .owl-dot').css("height", 50+"px");

<div class="owl-carousel_4">  <div><img src="http://imew.co.uk/wp-content/uploads/2014/04/SB4.png"></div>  <div><img src="http://imew.co.uk/wp-content/uploads/2014/04/SB3.png"></div>  <div><img src="http://imew.co.uk/wp-content/uploads/2014/04/SB2.png"></div>  <div> <img src="http://imew.co.uk/wp-content/uploads/2014/04/SB1.png"></div></div>

Нажать на "modal" на сайте http://kates.cc.ua/top-matras-new/index.html

http://joxi.ru/bmoO8NWcPjlWmy- вот что имеем.

но вызвав дебагер все становится как надо

http://joxi.ru/krD95KOSb3dqmp

 

или в обратном порядке с изначально включенным дебагером http://joxi.ru/Y2LqRxXtj8vBA6

и убирая его http://joxi.ru/a2XeJ03SG7pNAg

 

Что-то я не знаю, в чем причина.

Посоветуйте решение или другой хороший гибкий слайдер - на случай всего пропало

 

[npofopr]

Проще перепилить на bxslider или другой) 

Для меня по крайней мере. Чем возиться и велосипедить. Тем более скорее всего время подгоняет.

Ещё можешь сюда посмотреть https://github.com/gijsroge/OwlCarousel2-Thumbs 

Или https://github.com/OwlFonk/OwlCarousel/issues/18

 

Вроде то, что надо?

Или https://github.com/OwlFonk/OwlCarousel/issues/18

Почему то сообщение режется(

https://github.com/OwlFonk/OwlCarousel/issues/18

Проще перепилить на bxslider или другой) 

Для меня по крайней мере. Чем возиться и велосипедить. Тем более скорее всего время подгоняет.

Ещё можешь сюда посмотреть https://github.com/gijsroge/OwlCarousel2-Thumbs 

Или https://github.com/OwlFonk/OwlCarousel/issues/18

 

Вроде то, что надо?

Или https://github.com/OwlFonk/OwlCarousel/issues/18

Почему то сообщение режется(

[Нарек]

У меня была похожая ситуация, решилась так, правда я так и не понял почему, может глюк какой то был.

$(".box-modal .owl-carousel_4").owlCarousel({     items: 1,     dots: true});

Или еще более вероятный вариант - инициализация owlcarousel в callback-е модала afterOpen. Так как блок скрыт при загрузке DOM, оттуда и последствия.

Edited August 28, 2015 by Нарек

[kattiperk]

Это уже написано, спасибо.

ДУмаю удалить его

[Нарек]

Второй вариант тоже не работает?

[kattiperk]

Спасибо за ответы. Со временем все в порядке. Интересно было допилить.

[kattiperk]

Нарек, без него не работало тоже. Дописывала, думала, что поможет

npofopr, ссылки подошли