Слайдеры

Верхний слайдер

Структура слайдов для верхнего блока

<div class="slider-top-text right st-width st-indent">
	<div class="slider-top-text__item right bg">
		<div class="slider-top-text__title">-30%</div>
		<div class="slider-top-text__subtitle">на продвижение сайта</div>
		<div class="slider-top-text__text">Срок действия акции - до 31 марта 2019г.</div>
		<div><a class="btn fancybox" href="#zakaz_call">Заказать звонок</a></div>
	</div>
</div>

Класс slider-top-text это обертка.
Класс slider-top-text right для позиционирования справа текста внутри.
Классы slider-top-text st-width st-indent для стандартных отступов и ширины.

Класс slider-top-text__item для текста в слайдере
Класс slider-top-text__item right текст выровняется по правому краю
Класс slider-top-text__item bg для того, чтобы появилась подложка

Класс slider-top-text__title для очень большого текста.
Класс slider-top-text__subtitle для подзаголовка.
Класс slider-top-text__text для текста.

Галерея картинок

<section class="st-indent bg-grey">
	<div class="st-width">
		<h2>Галерея картинок</h2>
	</div>

	<div class="gal-slider js-gal-slider">
		<div class="gal-slider__item">
			<a data-fancybox="gallery" data-src="/upload/content/gal-slide1.jpg" class="gal-slider__link">
				<img src="/upload/content/gal-slide-thumb1.jpg" alt="">
			</a>
		</div>
			
		<div class="gal-slider__item">	
			<a data-fancybox="gallery" data-src="/upload/content/gal-slide2.jpg" class="gal-slider__link">
				<img src="/upload/content/gal-slide-thumb2.jpg" alt="">
			</a>
		</div>

		<div class="gal-slider__item">
			<a data-fancybox="gallery" data-src="/upload/content/gal-slide3.jpg" class="gal-slider__link">
				<img src="/upload/content/gal-slide-thumb3.jpg" alt="">
			</a>
		</div>

		<div class="gal-slider__item">
			<a data-fancybox="gallery" data-src="/upload/content/gal-slide4.jpg" class="gal-slider__link">
				<img src="/upload/content/gal-slide-thumb4.jpg" alt="">
			</a>
		</div>

		<div class="gal-slider__item">
			<a data-fancybox="gallery" data-src="/upload/content/gal-slide5.jpg" class="gal-slider__link">
				<img src="/upload/content/gal-slide-thumb5.jpg" alt="">
			</a>
		</div>

		<div class="gal-slider__item">
			<a data-fancybox="gallery" data-src="/upload/content/gal-slide6.jpg" class="gal-slider__link">
				<img src="/upload/content/gal-slide-thumb6.jpg" alt="">
			</a>
		</div>

		<div class="gal-slider__item">
			<a data-fancybox="gallery" data-src="/upload/content/gal-slide7.jpg" class="gal-slider__link">
				<img src="/upload/content/gal-slide-thumb7.jpg" alt="">
			</a>
		</div>

		<div class="gal-slider__item">
			<a data-fancybox="gallery" data-src="/upload/content/gal-slide8.jpg" class="gal-slider__link">
				<img src="/upload/content/gal-slide-thumb8.jpg" alt="">
			</a>
		</div>
		</div>
	</div>
</section>