[Решено] Миниатюры в Owl Carousel

[kos0760]

Для своего сайта своими силами решил сделать миниатюры для слайдшоу 

В интернете нашел, что-то похожее, что мне нужно: в slideshow.tpl заменил:

 

<script type="text/javascript"><!--
$('#slideshow<?php echo $module; ?>').owlCarousel({
	items: 6,
	autoPlay: 3000,
	singleItem: true,
	navigation: true,
	navigationText: ['<i class="fa fa-chevron-left fa-5x"></i>', '<i class="fa fa-chevron-right fa-5x"></i>'],
	pagination: true
});
--></script>

 

на

 

<script type="text/javascript">

var owl;

$(document).ready(function () {

    owl = $('#slideshow<?php echo $module; ?>');

    owl.owlCarousel({
        items: 6,
	autoPlay: 3000,
	singleItem: true,
        slideSpeed: 1300,
        paginationSpeed: 1400,
        afterInit: afterOWLinit // do some work after OWL init
    });    
    
    function afterOWLinit() {

        // adding A to div.owl-page
        $('.owl-controls .owl-page').append('<a class="item-link" href="#"/>');
        $('#slideshow<?php echo $module; ?> .owl-pagination a').click(function() {
        $('#slideshow<?php echo $module; ?>').trigger('slideTo', '#' + this.href.split('#').pop() );
         return false;
        });

        var pafinatorsLink = $('.owl-controls .item-link');
        
        $.each(this.owl.userItems, function (i) {

            $(pafinatorsLink[i])
                // i - counter
                // Give some styles and set background image for pagination item
                .css({
                    'background': 'url(' + $(this).find('img').attr('src') + ') center center no-repeat',
                    '-webkit-background-size': 'cover',
                    '-moz-background-size': 'cover',
                    '-o-background-size': 'cover',
                    'background-size': 'cover'
                })
                // set Custom Event for pagination item
                .click(function () {
                    owl.trigger('owl.goTo', i);
                });

        });         

    };

});

</script>

 

И в owl.carousel.css добавил оформление:

 

 

.owl-theme .owl-controls {

    position: relative;

}

 

.owl-theme .owl-controls .item-link {

    position: relative;

    display: block;

    width: 100px;

    height: 40px;

    margin: 0 2px;

    border-bottom: 4px solid #ccc;

    outline: none;

}

 

.owl-theme .owl-controls .active .item-link {

    border-bottom: 4px solid #cc4895;

}

 

.owl-theme .owl-controls .owl-page span {

    display: none;

}

 

Все получилось так как я хотел. Единственный косяк в том, что при изменении размеров окна браузера миниатюры пропадают. При обновлении страницы снова появляются. Не могу понять, в чем дело.((

Может, кто поможет решить проблему?

[kos0760]

Вопрос решен!

после 

afterInit: afterOWLinit // do some work after OWL init

добавляем:

afterUpdate: afterOWLinit // do some work after Update

и миниатюры остаются на месте.

[newjey]

Сделал так же как у вас, но миниатюры не появились. В чём может быть проблема?

[newjey]

Точнее мне надо реализовать миниатюры в карточке товара.