0
В данной инструкции мы будем использовать карусель owlCarousel.
В шаблонах Лазурь, Спорт, Рассвет, Лето, Инфинити, Бистро, Новогодний, Город, Цитрус, Ночь, Комфорт, Карамель, Хамелеон, Шоколад уже установлена библиотека owlCarousel и скачивать/загружать файл не требуется.
На части шаблонов она присутствует и поэтому загружать её не нужно, но на части шаблонов её нет, поэтому по указанной ниже ссылке скачайте файлы и добавьте их в раздел Сайт-Редактор шаблонов. Далее найдите в шаблоне hTML
</head>и перед ним вставьте код
<script type="text/javascript" src="{ASSETS_JS_PATH}owlmin.js"></script>
<link rel="stylesheet" href="{ASSETS_STYLES_PATH}owl.carousel.css" type="text/css" />
Если на Вашем шаблоне уже установлена галерея, то инструкцию выше не выполняйте.
Далее зайдите в редактор товара/страницы/каталога и на панели инструментов, через кнопку "Источник", откройте код описание.
Далее необходимо вставить код галереи
Если при нажатие на изображение требуется дальнейший переход на новую страницу, то вставляйте код ниже
<div class="brend"> <div class="box-up-sell"> <div class="navigation"> <span class="next"><i class="fa fa-angle-left"></i></span> <span class="prev"><i class="fa fa-angle-right"></i></span> </div> <div> <div class="brend-grid"> <div class="item"><a href="ссылка на страницу"><img src="ссылка на изображение" /></a></div> <div class="item"><a href="ссылка на страницу"><img src="ссылка на изображение" /></a></div> <div class="item"><a href="ссылка на страницу"><img src="ссылка на изображение" /></a></div> <div class="item"><a href="ссылка на страницу"><img src="ссылка на изображение" /></a></div> <div class="item"><a href="ссылка на страницу"><img src="ссылка на изображение" /></a></div> <div class="item"><a href="ссылка на страницу"><img src="ссылка на изображение" /></a></div> </div> </div> </div> </div>где измените ссылку на страницу и укажите ссылку на изображение карусели.
Если необходимо вставить просто галерею без дальнейших переходов, то вставляйте код ниже
<div class="brend"> <div class="box-up-sell"> <div class="navigation"> <span class="next"><i class="fa fa-angle-left"></i></span> <span class="prev"><i class="fa fa-angle-right"></i></span> </div> <div> <div class="brend-grid"> <div class="item"><img src="ссылка на изображение" /></div> <div class="item"><img src="ссылка на изображение" /></div> <div class="item"><img src="ссылка на изображение" /></div> <div class="item"><img src="ссылка на изображение" /></div> <div class="item"><img src="ссылка на изображение" /></div> <div class="item"><img src="ссылка на изображение" /></div> </div> </div> </div> </div>где пропишите ссылки на изображения
далее в конец файла main.js вставьте
jQuery(function($) {
var carouselU = $(".brend .brend-grid");
carouselU.owlCarousel({
items: 5,
itemsDesktop: [1199,4],
itemsDesktopSmall: [991,3],
itemsTablet: [767,2],
itemsTabletSmall: [641,3],
itemsMobile: [481,1],
responsive: true,
responsiveRefreshRate : 200,
responsiveBaseWidth: window,
lazyLoad: true,
pagination: false,
itemsScaleUp: true,
slideSpeed: 800,
stopOnHover: true,
touchDrag: true,
autoPlay: false,
addClassActive: true,
autoHeight: true,
afterAction: function (e) {
if(this.$owlItems.length > this.options.items){
$(".brend .navigation a").show();
}else{
$(".brend .navigation a").hide();
}
}
});
jQuery(".brend .navigation .prev").on("click", function(e){
e.preventDefault();
carouselU.trigger("owl.prev");
});
jQuery(".brend .navigation .next").on("click", function(e){
e.preventDefault();
carouselU.trigger("owl.next");
});
});
где за количество изображений в строке отвечает показатель 5, а показатель 800 за скорость прокрутки.
Прикрепленные файлы
-
owlmin.zip 6.31К
183 Количество загрузок:
-
owl.carousel.css 1К
510 Количество загрузок:
