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

kos0760    2

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

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

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

после 

afterInit: afterOWLinit // do some work after OWL init

добавляем:

afterUpdate: afterOWLinit // do some work after Update

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

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


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

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

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


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

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

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


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

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

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

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

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

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

Войти

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

Войти


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

    • От AntLosev
      Всех приветствую. Сломалось слайдшоу на главной странице. Причём как-то странно.В chrome всё отображается как надо.
       
       
      А в любом другом браузере слайдер выводит сразу все изображения баннера в столбик.
       
       
      Тема стандартная. Версия ocStore 2.3.0.2.2
       
      В чём может быть проблема и как её можно решить? Помогите, пожалуйста!
       
    • От Nymphetamine

      850.00 руб
      Скачать/Купить дополнение


      Owl карусель товаров

       
      Особенности:
      Настраиваемая адаптивность товаров. Возможность разбивать карусель на табы. Сенсорные события (свайп-жесты). Слайд события мышкой. Отложенная загрузка картинок (lazy load). Автопрокрутка. Настраиваемая навигация.  
      Вывод товаров по:
      Дате. Акциям. Производителю. Рейтингу. Популярным Лидерам продаж. Выборочным товарам. Случайным.  
      Отображение:
      Заголовок. Название товара. Цена товара. Рейтинг товара. Кнопка корзины. Кнопка закладки. Кнопка сравнение. Пагинация. Навигация. И многое другое..  
      При помощи данного модуля легко можно реализовать:
      Новинки. Акции. Рекомендуемые. Лидеры продаж. Хиты продаж. Случайные товары. и многое другое..
      Гибкая настройка вывода:
      Источник товаров - выводить все товары, только из определенной категории, или же выборочные товары. Фильтр по производителю - все производители, или какой-то определенный. Сортировка и фильтрация - по дате добавления, по рейтингу, по популярным, по порядку, только лидеры продаж, только товары со скидками.  
      * Весь функционал настраиваться из админ. панели.
      * Не требует vqmod/ocmod.
      * Простой в установке.
       
      Демо OpenCart 1.5x
      Фронтенд
      Бекенд - логин и пароль: demo
       
      Демо OpenCart 2x
      Фронтенд
      Бекенд - логин и пароль: demo
       
      Демо OpenCart 3x
      Фронтенд
      Бекенд - логин и пароль: demo
       
      Живые примеры сайтов работающие с данным модулем:
      https://mr-apple.ru http://automusic.net.ua http://shwkclothing.com http://eudoratex.com Добавил Nymphetamine Добавлено 08.11.2014 Категория Модули Системные требования Сайт разработчика greenmedia.ua Старая цена Метод активации Автоматическая активация 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 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.
      * Простой в установке.
       
      Демо OpenCart 1.5x
      Фронтенд
      Бекенд - логин и пароль: demo
       
      Демо OpenCart 2x
      Фронтенд
      Бекенд - логин и пароль: demo
       
      Демо OpenCart 3x
      Фронтенд
      Бекенд - логин и пароль: demo
       
      Живые примеры сайтов работающие с данным модулем:
      https://mr-apple.ru http://automusic.net.ua http://shwkclothing.com http://eudoratex.com
    • От Nymphetamine

      350.00 руб
      Скачать/Купить дополнение


      Owl карусель изображений

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

       
      Особенности:
      Настраиваемая адаптивность изображений. Сенсорные события (свайп-жесты). Слайд события мышкой. Настраиваемая навигация. Настраиваемая  пагинация. И многое другое..
      * Весь функционал настраиваться из админ. панели.
      * Простой в установке.
      * Требуется ocmod.
       
      Демо OpenCart 2x
      Фронтенд
      Бекенд - логин и пароль: demo
       
      Демо OpenCart 3x
      Фронтенд
      Бекенд - логин и пароль: demo
       
  • Последние посетители   0 пользователей онлайн

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