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


Изменение Главного Баннера На Слайдер

Нептун Слайдер owl-slider

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

#1 Firefly

Firefly

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

  • Модераторы
  • 3 753 сообщений

Отправлено 04 Декабрь 2019 - 20:21

Screenshot_1.png

В шаблоне 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
});






Темы с аналогичным тегами Нептун, Слайдер, owl-slider

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

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