{{indexmenu_n>0200}}
====== Слайдер ======

==== №1 Блок со слайдером изображений в центральной области ====
{{:htmltz:slider_in_central_blok.png?direct&200|}}
{{:htmltz:slider_in_central_blok_2.png?direct&200|}}
{{:htmltz:slider_in_central_blok_3.png?direct&200|}}

<div></div>
<button type="primary" collapse="centralBannerHtml">Посмотреть код html</button>
<collapse id="centralBannerHtml" collapsed="true">
<code html>
<div class="el_centralBanner_xxxxxx">
	<div class="wrapperInner initBanner">
		<div class="item">
			<a href="#1" style="background-color: #FFFFFF; background-image: url({{ "banner1.jpg"|shareUrl }});"></a>
		</div>
		<div class="item">
			<a href="#2" style="background-color: #FFFFFF; background-image: url({{ "banner2.jpg"|shareUrl }});"></a>
		</div>
		<div class="item">
			<a href="#3" style="background-color: #FFFFFF; background-image: url({{ "banner3.jpg"|shareUrl }});"></a>
		</div>
	</div>
</div>
</code>
</collapse>

<button type="info" collapse="centralBannerCSS">Посмотреть код css</button>
<collapse id="centralBannerCSS" collapsed="true">
<code css>
.el_centralBanner_xxxxxx
{
}
.el_centralBanner_xxxxxx .wrapperInner
{
	margin-bottom: 30px;
	width: 100%;
	max-height: 550px;
}
.el_centralBanner_xxxxxx .wrapperInner .item
{
	width: 100%;
	height: 100%;
}
.el_centralBanner_xxxxxx .wrapperInner .item a
{
	display: -ms-flex;
	display: flex;
	align-items: center;
	justify-content: center;
	background-repeat: no-repeat;
	background-position: center;
	background-size: cover;
	width: 100%;
	height: 550px;
}

@media (max-width: 1200px)
{
	.el_centralBanner_xxxxxx .wrapperInner .item a
	{
		padding-bottom: 47%; /* Рассчитывается так: (h / ширина контента) * 100, округляем до двух знаков посла запятой. Например для текущего: (550 / 1170) * 100 */
		height: 0px;
	}
}

.el_centralBanner_xxxxxx .slick-slider .slick-arrow
{
	z-index: 30;
}
.el_centralBanner_xxxxxx .slick-slider .slick-prev
{
	left: 25px;
}
.el_centralBanner_xxxxxx .slick-slider .slick-next
{
	right: 25px;
}

.el_centralBanner_xxxxxx .slick-slider .slick-prev::before,
.el_centralBanner_xxxxxx .slick-slider .slick-next::before
{
	color: #2091C9;
}

.el_centralBanner_xxxxxx .slick-slider .slick-dots
{
	bottom: 25px;
}
.el_centralBanner_xxxxxx .slick-slider .slick-dots li
{
}
.el_centralBanner_xxxxxx .slick-slider .slick-dots li button
{
}
.el_centralBanner_xxxxxx .slick-slider .slick-dots li button::before
{
}
.el_centralBanner_xxxxxx .slick-slider .slick-dots li.slick-active button::before
{
	color: #2091C9;
}
</code>
</collapse>


==== №2 Блок со слайдером изображений в левом/правом меню сайта ====
{{:htmltz:slider_in_aside.png?direct&200|}}
{{:htmltz:slider_in_aside_2.png?direct&200|}}
{{:htmltz:slider_in_aside_3.png?direct&200|}}

<div></div>
<button type="primary" collapse="asideBannerHtml">Посмотреть код html</button>
<collapse id="asideBannerHtml" collapsed="true">
<code html>
<div class="el_asideBanner_xxxxxx">
	<div class="wrapperInner initBanner">
		<div class="item">
			<a href="#1" style="background-color: #FFFFFF; background-image: url({{ "banner1_as.jpg"|shareUrl }});"></a>
		</div>
		<div class="item">
			<a href="#2" style="background-color: #FFFFFF; background-image: url({{ "banner2_as.jpg"|shareUrl }});"></a>
		</div>
		<div class="item">
			<a href="#3" style="background-color: #FFFFFF; background-image: url({{ "banner3_as.jpg"|shareUrl }});"></a>
		</div>
	</div>
</div>
</code>
</collapse>

<button type="info" collapse="asideBannerCSS">Посмотреть код css</button>
<collapse id="asideBannerCSS" collapsed="true">
<code css>
.el_asideBanner_xxxxxx
{
}
.el_asideBanner_xxxxxx .wrapperInner
{
	margin-bottom: 30px;
	width: 100%;
	max-width: 300px; /* Максимальная ширина блока в меню */
	max-height: 300px;
}
.el_asideBanner_xxxxxx .wrapperInner .item
{
	width: 100%;
	height: 100%;
}
.el_asideBanner_xxxxxx .wrapperInner .item a
{
	display: -ms-flex;
	display: flex;
	align-items: center;
	justify-content: center;
	background-repeat: no-repeat;
	background-position: center;
	background-size: cover;
	width: 100%;
	padding-bottom: 100%;
}

.el_asideBanner_xxxxxx .slick-slider .slick-arrow
{
	z-index: 30;
}
.el_asideBanner_xxxxxx .slick-slider .slick-prev
{
	left: 25px;
}
.el_asideBanner_xxxxxx .slick-slider .slick-next
{
	right: 25px;
}

.el_asideBanner_xxxxxx .slick-slider .slick-prev::before,
.el_asideBanner_xxxxxx .slick-slider .slick-next::before
{
	color: #2091C9;
}

.el_asideBanner_xxxxxx .slick-slider .slick-dots
{
	display: none !important;
	bottom: 25px;
}
.el_asideBanner_xxxxxx .slick-slider .slick-dots li
{
}
.el_asideBanner_xxxxxx .slick-slider .slick-dots li button
{
}
.el_asideBanner_xxxxxx .slick-slider .slick-dots li button::before
{
}
.el_asideBanner_xxxxxx .slick-slider .slick-dots li.slick-active button::before
{
	color: #2091C9;
}

</code>
</collapse>