Миниатюры в пагинации Owl Carousel
 

Для своего сайта на Opencart 2 своими силами решил сделать миниатюры для слайдшоу.
Для реализации использовал решение, найденное в интернете:

<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-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,
сами справитесь ... помедитируйте над строкой 15, может какие мысли появятся.

Спасибо за наводку. Вы переоцениваете мои способности. Но я конечно попробую сам решить.

Проблема решена! Спасибо рони за то, что сузил поиски моего косяка. Погуглил еще раз. После:

afterInit: afterOWLinit // do some work after OWL init

добавил:

afterUpdate: afterOWLinit

и миниатюры перестали исчезать!

kos0760,
:dance:

Не могу плюс поставить. Пишет, что нужно оставить еще кому-то отзыв. Ну да ладно. Все равно спасибо.