1
В шаблоне HTML найдите код главного баннера:
<div class="banners-left col-md-8 col-sm-6 col-xs-12">
<div class="banner-image lozad" data-background-image="{ASSETS_IMAGES_PATH}banner1.jpg">
<div class="content big">
<a href="{CATALOG_URL}">
<h3>Все для отдыха и рыбалки</h3>
<h4>Выберите свой вариант</h4>
</a>
</div>
</div>
</div>
Замените его на код:
<div class="banners-left col-md-8 col-sm-6 col-xs-12">
<div id="slider" class="owl-carousel">
<div class="item item-1">
<div class="image" style="background-image: url('{ASSETS_IMAGES_PATH}slide1.png?design=neptun');"></div>
<div class="content" data-animation-in="fadeInUp" data-animation-out="animate-out fadeOutDown">
<a href="{CATALOG_URL}" title="Все для отдыха и рыбалки"><h3 class="title">Все для отдыха и рыбалки</h3></a>
<h4>Покупайте онлайн</h4>
</div>
</div>
<div class="item item-2">
<div class="image" style="background-image: url('{ASSETS_IMAGES_PATH}slide2.png?design=neptun');"></div>
<div class="content" data-animation-in="fadeInUp" data-animation-out="animate-out fadeOutDown">
<a href="{DISCOUNT_URL}" title="Распродажа уже началась!"><h3 class="title">Распродажа уже началась!</h3></a>
</div>
</div>
</div>
</div>
В этом коде указан текст, который будет отображаться на слайдах и сами слайды (slide1.png, slide2.png). Можно добавить и больше.
Далее в коде шаблона стилей main.css найдите код:
/*** Баннеры ***/
#banners {display: inline-block;position: relative;width: 100%;}
Добавьте перед ним код:
/*** Слайдшоу ***/
#slider .item {position: relative;}
#slider .item .image {height: 280px;background-position: center center;background-size: cover;background-repeat: no-repeat;}
#slider .item .content {position: absolute;top: 50%;margin-top: -60px;left: 30px;max-width: 450px;width: 100%;}
#slider .item .content .title {display: inline-block;position: relative;padding: 10px 20px 10px 20px;color: #fff;line-height: 48px;font-size: 30px;font-weight: 700;text-transform: none;background: #ff9325;}
#slider .item .content h3, #slider .item .content h4 {display: inline-block;position: relative;color: #fff;background: #96a4ab;padding: 10px 20px 10px 20px;}
#slider .owl-dots {position: relative;margin-top: -48px;padding: 15px;text-align: center;}
#slider .owl-dots .owl-dot {display: inline-block;width: 12px;height: 12px;cursor: pointer;background: #ffffff;border: 1px solid #5584a5;-webkit-border-radius: 50%;-moz-border-radius: 50%;border-radius: 50%;}
#slider .owl-dots .owl-dot.active, #slider .owl-dots .owl-dot:hover {background: #5584a5;}
#slider .owl-dots .owl-dot + .owl-dot {margin-left: 5px;}
В шаблоне со скриптами main.js найдите код:
// Функции для главной страницы
function indexPage() {
И добавьте после него:
// Слайдер на главной
var owlS = $('#slider');
owlS.owlCarousel({
items: 1,
loop: true,
rewind: true,
lazyLoad: true,
nav: false,
dots: true,
autoplay: true,
autoplayHoverPause: true,
smartSpeed: 500,
dotsSpeed: 400,
mouseDrag: true,
touchDrag: true,
pullDrag: true
});
