Перейти к содержанию

Рекомендуемые сообщения

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

В интернете нашел, что-то похожее, что мне нужно: в 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;
}

 

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

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

  • +1 1

Поделиться сообщением


Ссылка на сообщение
Поделиться на другие сайты

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

после 

afterInit: afterOWLinit // do some work after OWL init

добавляем:

afterUpdate: afterOWLinit // do some work after Update

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

  • +1 1

Поделиться сообщением


Ссылка на сообщение
Поделиться на другие сайты

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

Поделиться сообщением


Ссылка на сообщение
Поделиться на другие сайты

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

Поделиться сообщением


Ссылка на сообщение
Поделиться на другие сайты

Для публикации сообщений создайте учётную запись или авторизуйтесь

Вы должны быть пользователем, чтобы оставить комментарий

Создать учетную запись

Зарегистрируйте новую учётную запись в нашем сообществе. Это очень просто!

Регистрация нового пользователя

Войти

Уже есть аккаунт? Войти в систему.

Войти

  • Похожий контент

    • От Nymphetamine
      450.00 руб
      Скачать/Купить дополнение


      OWL Карусель Товаров

       
       
      Особенности:
      Настраиваемая адаптивность товаров. Настраиваемое отображение. Возможность разбивать карусель на табы. Возможность привязывать уникальные карусели [Новинки, Акции, и т.п.] к текущей странице категорий или карточки товара. Поддержка сенсорных событий (свайп-жесты). Поддержка слайд событий мышью. Отложенная загрузка картинок (lazy load). Автопрокрутка. Постраничная прокрутка. Кеширование модуля.  
      Вывод товаров по:
      Дате. Акциям. Производителю. Рейтингу. Популярным Лидерам продаж. Выборочным товарам.  
      Отображение:
      Заголовок. Название товара. Цена товара. Рейтинг товара. Кнопка корзины. Кнопка закладки. Кнопка сравнение. Пагинация. Навигация. И многое другое..  
      При помощи данного модуля легко можно реализовать:
      Новинки. Акции. Рекомендуемые. Лидеры продаж. Хиты продаж. Случайные товары. Похожие товары. Просмотренные товары. и многое другое..
      Гибкая настройка вывода:
      Источник товаров - выводить товары, только из определенной категории / выборочные товары / просмотренные товары. Фильтр по производителю - все производители сразу, или какой-то определенный. Сортировка и фильтрация - по дате добавления, по рейтингу, по популярным, по порядку, только лидеры продаж, только товары со скидками.  
      * Весь функционал настраиваться из админ. панели.
      * Не требует vqmod/ocmod.
      * Простой в установке.
       
      Демо ocStore 3x
      Демо
      Админка - логин и пароль: demo
       
      Демо ocStore 2x
      Демо
      Админка - логин и пароль: demo
       
      Демо ocStore 1.5x
      Демо
      Админка - логин и пароль: demo
       
      Живые примеры сайтов работающие с данным модулем:
      https://mr-apple.ru https://amperlumen.ru
      http://shwkclothing.com Добавил Nymphetamine Добавлено 08.11.2014 Категория Модули Системные требования Сайт разработчика Старая цена 850 Метод активации Автоматическая активация Ioncube Loader Нет OpenCart 3.0
      2.3
      2.2
      2.1
      2.0
      1.5.6.4
      1.5.6.3
      1.5.6.2
      1.5.6.1
      1.5.6
      1.5.5.1
      1.5.5
      1.5.4.1
      1.5.3.1 ocStore 3.0
      2.3
      2.2
      2.1
      1.5.5.1.2
      1.5.5.1.1
      1.5.5.1
      1.5.4.1.2
      1.5.4.1.1
      1.5.4.1
      1.5.3.1
      1.5.2.1
      1.5.1.3 OpenCart.Pro, ocShop Не проверялось  
    • От Nymphetamine
      Особенности:
      Настраиваемая адаптивность товаров. Настраиваемое отображение. Возможность разбивать карусель на табы. Возможность привязывать уникальные карусели [Новинки, Акции, и т.п.] к текущей странице категорий или карточки товара. Поддержка сенсорных событий (свайп-жесты). Поддержка слайд событий мышью. Отложенная загрузка картинок (lazy load). Автопрокрутка. Постраничная прокрутка. Кеширование модуля.  
      Вывод товаров по:
      Дате. Акциям. Производителю. Рейтингу. Популярным Лидерам продаж. Выборочным товарам.  
      Отображение:
      Заголовок. Название товара. Цена товара. Рейтинг товара. Кнопка корзины. Кнопка закладки. Кнопка сравнение. Пагинация. Навигация. И многое другое..  
      При помощи данного модуля легко можно реализовать:
      Новинки. Акции. Рекомендуемые. Лидеры продаж. Хиты продаж. Случайные товары. Похожие товары. Просмотренные товары. и многое другое..
      Гибкая настройка вывода:
      Источник товаров - выводить товары, только из определенной категории / выборочные товары / просмотренные товары. Фильтр по производителю - все производители сразу, или какой-то определенный. Сортировка и фильтрация - по дате добавления, по рейтингу, по популярным, по порядку, только лидеры продаж, только товары со скидками.  
      * Весь функционал настраиваться из админ. панели.
      * Не требует vqmod/ocmod.
      * Простой в установке.
       
      Демо ocStore 3x
      Демо
      Админка - логин и пароль: demo
       
      Демо ocStore 2x
      Демо
      Админка - логин и пароль: demo
       
      Демо ocStore 1.5x
      Демо
      Админка - логин и пароль: demo
       
      Живые примеры сайтов работающие с данным модулем:
      https://mr-apple.ru https://amperlumen.ru
      http://shwkclothing.com
    • От Nymphetamine
      300.00 руб
      Скачать/Купить дополнение


      OWL Карусель Изображений

       
       
      Особенности:
      Настраиваемая адаптивность изображений. Сенсорные события (свайп-жесты). Слайд события мышкой. Настраиваемая навигация. Настраиваемая  пагинация. И многое другое..
      * Весь функционал настраиваться из админ. панели.
      * Простой в установке.
      * Требуется ocmod.
       
      Демо OpenCart 2x
      Демо
      Админка - логин и пароль: demo
       
      Демо OpenCart 3x
      Демо
      Админка - логин и пароль: demo
       
      Добавил Nymphetamine Добавлено 02.04.2017 Категория Слайдшоу, баннеры, галереи Системные требования Сайт разработчика https://greenmedia.ua Старая цена 450 Метод активации Без активации Ioncube Loader Нет OpenCart 3.0
      2.3
      2.2
      2.1
      2.0 ocStore 3.0
      2.3
      2.2
      2.1 OpenCart.Pro, ocShop Не проверялось  
    • От Nymphetamine
      Особенности:
      Настраиваемая адаптивность изображений. Сенсорные события (свайп-жесты). Слайд события мышкой. Настраиваемая навигация. Настраиваемая  пагинация. И многое другое..
      * Весь функционал настраиваться из админ. панели.
      * Простой в установке.
      * Требуется ocmod.
       
      Демо OpenCart 2x
      Демо
      Админка - логин и пароль: demo
       
      Демо OpenCart 3x
      Демо
      Админка - логин и пароль: demo
       
    • От Pavel666
      Обнаружил баг в модуле слайдшоу, кнопки навигации вынесены за пределы блока с идентификатором модуля, в следствии чего при размещении нескольких блоков на странице, вешается несколько обработчиков на кнопки навигации и перелистываются все слайды на странице
      исходный код модуля slideshow.twig
       
      Как должно быть
       
      И аналогично файл carousel.twig
       
  • Последние посетители   0 пользователей онлайн

    Ни одного зарегистрированного пользователя не просматривает данную страницу

×

Важная информация

На нашем сайте используются файлы cookie и происходит обработка некоторых персональных данных пользователей, чтобы улучшить пользовательский интерфейс. Чтобы узнать для чего и какие персональные данные мы обрабатываем перейдите по ссылке. Если Вы нажмете «Я даю согласие», это означает, что Вы понимаете и принимаете все условия, указанные в этом Уведомлении о Конфиденциальности.