Перейти к содержимому


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

слайд в меню

  • Авторизуйтесь для ответа в теме
В теме одно сообщение

#1 danya666

danya666

    Новичок

  • Пользователи
  • Pip
  • 3 сообщений

Отправлено 26 Июнь 2020 - 19:25

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

#2 Vaccina

Vaccina

    Активный участник

  • Модераторы
  • 23 852 сообщений

Отправлено 27 Июнь 2020 - 09:27

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

Загрузите баннеры 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 #019934;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 #019934;border-radius: 100%;}
#slideshow .owl-dots .owl-dot.active span, #slideshow .owl-dots .owl-dot:hover span {border-color: #019934;}

/*** Преимущества ***/
#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');
});

slide1.jpg

slide2.jpg




Количество пользователей, читающих эту тему: 0

0 пользователей, 0 гостей, 0 анонимных