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


Подскажите, Как Добавить Слайды На Главной Странице?
Автор danya666, 26 июня 2020 19:25
слайд в меню
Сообщений в теме: 4
#1
Отправлено 26 Июнь 2020 - 19:25
#2
Отправлено 27 Июнь 2020 - 09:27
Здравствуйте.
Загрузите баннеры slide1.jpg и slide2.jpg в раздел Сайт - Редактор шаблонов.
Зайдите в раздел Сайт - Редактор шаблонов - HTML - найдите:
замените на:
в измененном блоке кода замените текст на необходимый.
Далее зайдите в main.css - найдите:
замените на:
Далее зайдите в main.js - найдите:
замените на:
далее зайдите в Редактор шаблонов-->main.css и в самый конец добавьте:
Далее в разделе Сайт--> Редакторе шаблонов через кнопку Добавить файлы загрузите картинки слайдера прикрепленные ниже:
Загрузите баннеры 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;} }
Далее в разделе Сайт--> Редакторе шаблонов через кнопку Добавить файлы загрузите картинки слайдера прикрепленные ниже:
#3
Отправлено 07 Март 2021 - 19:09
Не получается. Поможете?
sl-525942
sl-525942
Количество пользователей, читающих эту тему: 0
0 пользователей, 0 гостей, 0 анонимных