Слайдер

<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>

.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;
}

<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>

.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;
}