Подскажите, Как Добавить Слайды На Главной Странице?

Подскажите, как добавить слайды на главной странице?

Здравствуйте.

Загрузите баннеры slide1.jpg и slide2.jpg в раздел Сайт - Редактор шаблонов.

Зайдите в раздел Сайт - Редактор шаблонов - HTML - найдите:

<!-- Преимущества -->
<div id="features">

замените на:

<!-- Слайдшоу-->
<div id="slideshow">
	 <div class="slider owl-carousel">
	 <div class="item" style="background:url({ASSETS_IMAGES_PATH}slide1.jpg) 25% top no-repeat;">
		 <div class="image"><img src="{ASSETS_IMAGES_PATH}slide1.jpg" /></div>
		 <div class="content" data-animation-in="fadeInUp" data-animation-out="animate-out fadeOutDown">
		 <div class="container">
			 <div class="text-content right">
			 <h2>Большой выбор</h2>
			 <p>аксессуаров для путешествий</p>
			 <a href="{CATALOG_URL}" class="button big">Каталог</a>
			 </div>
		 </div>
		 </div>
	 </div>
	 <div class="item" style="background:url({ASSETS_IMAGES_PATH}slide2.jpg) 80% top no-repeat;">
		 <div class="image"><img src="{ASSETS_IMAGES_PATH}slide2.jpg" /></div>
		 <div class="content" data-animation-in="fadeInUp" data-animation-out="animate-out fadeOutDown">
		 <div class="container">
			 <div class="text-content left">
			 <h2>Путешествуйте с нами</h2>
			 <p>Скидки до 30% на новую коллекцию</p>
			 <a href="{CATALOG_URL}" class="button big">Каталог</a>
			 </div>
		 </div>
		 </div>
	 </div>
	 </div>
</div>

<!-- Преимущества -->
<div id="features">

в измененном блоке кода замените текст на необходимый.

Далее зайдите в main.css - найдите:

/*** Преимущества ***/
#features {margin-bottom: 15px;padding-top: 15px}

замените на:

/*** Слайдер ***/
#slideshow {position: relative;}
#slideshow .item {position: relative;}
#slideshow .item .content {position: absolute;top: 35%;width: 100%;}
#slideshow .container .text-content {background: rgba(255,255,255,0.5);padding: 30px;}
#slideshow .container .text-content h2 {font-family: 'PT Sans Narrow', sans-serif;letter-spacing: 0;font-size: 72px;font-weight: 700;line-height: 1.1;}
#slideshow .container .text-content p {font-size: 34px;margin: 7px 0;color: #21293c;text-transform: uppercase;}
#slideshow .container .text-content .button {display: inline-block;margin-top: 20px;}
#slideshow .owl-dots {position: absolute;top: auto;bottom: 27px;left: auto;right: 15%;width: 100%;text-align: right;padding: 0 15px;-webkit-user-select: none;-khtml-user-select: none;-moz-user-select: none;-ms-user-select: none;user-select: none;-webkit-tap-highlight-color: rgba(0, 0, 0, 0);}
#slideshow .owl-dots .owl-dot {display: inline-block;zoom: 1;}
#slideshow .owl-dots .owl-dot span {display: block;position: relative;width: 18px;height: 18px;border: 2px solid #ff7e7a;border-radius: 100%;background: none;margin: 0 4px;}
#slideshow .owl-dots .owl-dot.active span:after, #slideshow .owl-dots .owl-dot:hover span:after {content: '';position: absolute;top: 4px;left: 4px;right: 4px;bottom: 4px;width: 6px;border: 2px solid #ff7e7a;border-radius: 100%;}
#slideshow .owl-dots .owl-dot.active span, #slideshow .owl-dots .owl-dot:hover span {border-color: #ff7e7a;}

/*** Преимущества ***/
#features {margin-bottom: 15px;padding-top: 15px}

Далее зайдите в main.js - найдите:

// Функции для главной страницы
function indexPage() {

замените на:

// Функции для главной страницы
function indexPage() {

// Слайдер на главной
var owlS = $('#slideshow .owl-carousel');
owlS.owlCarousel({
items: 1,
loop: true,
rewind: true,
lazyLoad: false,
nav: false,
dots: true,
autoplay: true,
autoplayHoverPause: true,
smartSpeed: 500,
dotsSpeed: 400,
mouseDrag: true,
touchDrag: true,
pullDrag: true
});
// add animate.css class(es) to the elements to be animated
function setAnimation ( _elem, _InOut ) {
// Store all animationend event name in a string.
// cf animate.css documentation
var animationEndEvent = 'webkitAnimationEnd mozAnimationEnd MSAnimationEnd oanimationend animationend';
_elem.each ( function () {
var $elem = $(this);
var $animationType = 'animated ' + $elem.data( 'animation-' + _InOut );
$elem.addClass($animationType).one(animationEndEvent, function () {
$elem.removeClass($animationType); // remove animate.css Class at the end of the animations
});
});
}
// Fired before current slide change
owlS.on('change.owl.carousel', function(event) {
var $currentItem = $('.owl-item', owlS).eq(event.item.index);
var $elemsToanim = $currentItem.find("[data-animation-out]");
setAnimation ($elemsToanim, 'out');
});
// Fired after current slide has been changed
owlS.on('changed.owl.carousel', function(event) {
var $currentItem = $('.owl-item', owlS).eq(event.item.index);
var $elemsToanim = $currentItem.find("[data-animation-in]");
setAnimation ($elemsToanim, 'in');
});

далее зайдите в Редактор шаблонов-->main.css и в самый конец добавьте:

@media all and (max-width: 1199px) {
#slideshow .item .content {top: 30%;}
#slideshow .container .text-content {padding: 10px 20px;}
#slideshow .container .text-content h2 {font-size: 56px;}
#slideshow .container .text-content p {font-size: 24px;}

}

@media all and (max-width: 991px) {
#slideshow .item .content {top: 15%;}
#slideshow .container .text-content {padding: 10px 20px;}
#slideshow .container .text-content h2 {font-size: 46px;}
#slideshow .container .text-content p {font-size: 24px;}
}

@media all and (max-width: 768px) {

#slideshow .item .content {top: 10%;}
#slideshow .container .text-content {padding: 5px 10px;}
#slideshow .container .text-content h2 {font-size: 26px;}
#slideshow .container .text-content p {font-size: 20px;}

}

@media all and (max-width: 641px) {

#slideshow .item .content {top: 10%;}
#slideshow .container .text-content {padding: 5px 10px;/* display: none; */}
#slideshow .container .text-content h2 {font-size: 26px;}
#slideshow .container .text-content p {font-size: 20px;}
.button.big {font-size: 21px;line-height: 35px;padding: 0 40px;}
#slideshow .container .text-content .button {display: inline-block;margin-top: 10px;}

}

@media all and (max-width: 481px) {
#slideshow .item .content {top: 20%;left: 0px;}
#slideshow .container .text-content h2 {font-size: 26px;display: none;}
#slideshow .container .text-content p {font-size: 20px;display: none;}
.text-content.right {float:left;}
#slideshow .container .text-content {background:none;}

}

Далее в разделе Сайт--> Редакторе шаблонов через кнопку Добавить файлы загрузите картинки слайдера прикрепленные ниже:

Не получается. Поможете?
sl-525942

Добрый день. Изменения согласно инструкции выше Вам внесли. Картинки слайдера можете изменить согласно инструкции из раздела FAQ

metry (08 Март 2021 - 12:28) писал:

Спасибо, всё работает