Javascript.RU

Создать новую тему Ответ
 
Опции темы Искать в теме
  #1 (permalink)  
Старый 19.05.2016, 22:44
Аспирант
Отправить личное сообщение для kos0760 Посмотреть профиль Найти все сообщения от kos0760
 
Регистрация: 03.05.2015
Сообщений: 39

Миниатюры в пагинации 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;
}


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

Может, кто поможет решить проблему?
Ответить с цитированием
  #2 (permalink)  
Старый 19.05.2016, 23:08
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 27,083

kos0760,
сами справитесь ... помедитируйте над строкой 15, может какие мысли появятся.
Ответить с цитированием
  #3 (permalink)  
Старый 20.05.2016, 00:11
Аспирант
Отправить личное сообщение для kos0760 Посмотреть профиль Найти все сообщения от kos0760
 
Регистрация: 03.05.2015
Сообщений: 39

Сообщение от рони Посмотреть сообщение
kos0760,
сами справитесь ... помедитируйте над строкой 15, может какие мысли появятся.
Спасибо за наводку. Вы переоцениваете мои способности. Но я конечно попробую сам решить.
Ответить с цитированием
  #4 (permalink)  
Старый 20.05.2016, 00:49
Аспирант
Отправить личное сообщение для kos0760 Посмотреть профиль Найти все сообщения от kos0760
 
Регистрация: 03.05.2015
Сообщений: 39

Проблема решена! Спасибо рони за то, что сузил поиски моего косяка. Погуглил еще раз. После:
afterInit: afterOWLinit // do some work after OWL init

добавил:
afterUpdate: afterOWLinit

и миниатюры перестали исчезать!
Ответить с цитированием
  #5 (permalink)  
Старый 20.05.2016, 01:05
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 27,083

kos0760,
Ответить с цитированием
  #6 (permalink)  
Старый 20.05.2016, 01:21
Аспирант
Отправить личное сообщение для kos0760 Посмотреть профиль Найти все сообщения от kos0760
 
Регистрация: 03.05.2015
Сообщений: 39

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



Опции темы Искать в теме
Искать в теме:

Расширенный поиск


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
owl carousel 2 диана1975 jQuery 22 16.09.2017 23:07
Owl carousel 2 не работает с табами - как поправить? ligisayan jQuery 7 08.05.2016 14:41
Owl Carousel 2 переключается в исходное положение после Ajax запроса. habotho jQuery 1 24.04.2016 03:24
Почему не правильно считает номера слайдов в карусели owl carousel 2? ligisayan jQuery 13 22.04.2016 11:22
Owl Carousel в 2 ряда SnezhanaLast Элементы интерфейса 1 07.02.2016 20:45