<div class="block__content">
<div class="slidersTab">
<div class="slidersTab__tab-nav">
<button type="button" class="slidersTab__tab-label current">Проектирование</button>
<button type="button" class="slidersTab__tab-label">Разработка</button>
</div>
<div class="slidersTab__slidersList">
<div class="slidersTab__slidersItem current">
<div class="slidersTab__description text"><p>выапыапвпраро</p></div>
<div class="slidersTab__slider">
<div class="swiper slidersTab__slider-nav swiper-initialized swiper-horizontal swiper-backface-hidden swiper-thumbs">
<div class="swiper-wrapper" id="swiper-wrapper-a58cef2f0d3d101a8" aria-live="polite" style="transform: translate3d(0px, 0px, 0px); transition-duration: 0ms; transition-delay: 0ms;">
<div class="swiper-slide slidersTab__slider-label swiper-slide-visible swiper-slide-fully-visible swiper-slide-active" role="group" aria-label="1 / 7">Соберем информацию</div>
<div class="swiper-slide slidersTab__slider-label swiper-slide-visible swiper-slide-fully-visible swiper-slide-next" role="group" aria-label="2 / 7">Проанализируем сайты конкурентов</div>
<div class="swiper-slide slidersTab__slider-label swiper-slide-visible swiper-slide-fully-visible" role="group" aria-label="3 / 7">Изучим целевую аудиторию</div>
<div class="swiper-slide slidersTab__slider-label swiper-slide-visible swiper-slide-fully-visible" role="group" aria-label="4 / 7">Определим концепцию проекта</div>
<div class="swiper-slide slidersTab__slider-label swiper-slide-visible swiper-slide-fully-visible" role="group" aria-label="5 / 7">Разработаем информационную модель</div>
<div class="swiper-slide slidersTab__slider-label swiper-slide-visible swiper-slide-fully-visible" role="group" aria-label="6 / 7">Напишем текст для сайта</div>
<div class="swiper-slide slidersTab__slider-label swiper-slide-visible swiper-slide-thumb-active" role="group" aria-label="7 / 7">Разработаем прототип</div>
</div>
<span class="swiper-notification" aria-live="assertive" aria-atomic="true"></span></div>
<div class="swiper slidersTab__slider-body swiper-fade swiper-initialized swiper-horizontal swiper-autoheight swiper-watch-progress swiper-backface-hidden">
<div class="swiper-wrapper slidersTab__slider-list" style="height: 323px; transition-duration: 0ms; transition-delay: 0ms;" id="swiper-wrapper-d8bf17e53d6738100" aria-live="off">
<div class="swiper-slide" style="width: 995px; opacity: 0; transform: translate3d(0px, 0px, 0px); transition-duration: 0ms;" role="group" aria-label="1 / 7">
<div class="slidersTab__slider-item">
<div class="slidersTab__slider-icon">
<img src="/media/fblluxqy/proc_1_1.svg" alt="" width="200">
</div>
<div class="slidersTab__slider-text">
<h3 class="slidersTab__slider-title">Соберем информацию</h3>
<div class="slidersTab__slider-description text">
<p><span class="descriptionText">Приедем к вам в офис или пригласим в свой и проведем интервью, чтобы узнать всю необходимую информацию о ваших целях и бизнесе.</span></p>
<p><span class="descriptionText">А если вам удобнее, чтобы заказать лендинг, можно заполнить <a rel="noopener" tabindex="0" href="https://forms.yandex.ru/u/5f4a52f88bf2ab6bb54d221a/" target="_blank">бриф письменно</a> — так вы сможете спокойно обдумать ответы на каждый из вопросов.</span></p>
</div>
<div class="slidersTab__slider-cite text">
<p>Мы добиваемся полного понимания ситуации, в которой находится ваш бизнес: каких целей вы хотите добиться и какие ресурсы и инструменты готовы задействовать.</p>
<p>Эта информация дает нам возможность взглянуть на происходящее глазами бизнеса и сосредоточить усилия всей команды на достижении ваших целей.</p>
<p><span class="noticeText"><strong>Андрей Б.</strong>, CEO<br>опыт работы: 18 лет</span></p>
</div>
</div>
</div>
</div>
<div class="swiper-slide" style="width: 995px; opacity: 0; transform: translate3d(-995px, 0px, 0px); transition-duration: 0ms;" role="group" aria-label="2 / 7">
<div class="slidersTab__slider-item">
<div class="slidersTab__slider-icon">
<img src="/media/1mthupat/proc_1_2.svg" alt="" width="200">
</div>
<div class="slidersTab__slider-text">
<h3 class="slidersTab__slider-title">Проанализируем сайты конкурентов</h3>
<div class="slidersTab__slider-description text">
<p><span class="descriptionText">Оценим качество сайтов, навигацию, дизайн, фишки, позиционирование, УТП, офферы.</span></p>
</div>
<div class="slidersTab__slider-cite text">
<p>Это поможет понять, как лучше выделиться на фоне конкурентов, какие фишки и удачные решения можно взять на вооружение.</p>
<p><span class="noticeText"><strong>Вадим Н.</strong>, Маркетолог<br>опыт работы: 5 лет</span></p>
</div>
</div>
</div>
</div>
<div class="swiper-slide" style="width: 995px; opacity: 0; transform: translate3d(-1990px, 0px, 0px); transition-duration: 0ms;" role="group" aria-label="3 / 7">
<div class="slidersTab__slider-item">
<div class="slidersTab__slider-icon">
<img src="/media/ilshxrbd/proc_1_3.svg" alt="" width="200">
</div>
<div class="slidersTab__slider-text">
<h3 class="slidersTab__slider-title">Изучим целевую аудиторию</h3>
<div class="slidersTab__slider-description text">
<p><span class="descriptionText">Сформируем портрет усредненного представителя ядра ЦА, определим, какие у него есть потребности, потребительский опыт, опасения, вопросы.</span></p>
</div>
<div class="slidersTab__slider-cite text">
<p>Так мы приходим к пониманию, какими критериями выбора будут руководствоваться пользователи, что их подтолкнет к совершению нужного действия, а что остановит.</p>
<p><span class="noticeText"><strong>Андрей Б.</strong>, CEO<br>опыт работы: 18 лет</span></p>
</div>
</div>
</div>
</div>
<div class="swiper-slide" style="width: 995px; opacity: 0; transform: translate3d(-2985px, 0px, 0px); transition-duration: 0ms;" role="group" aria-label="4 / 7">
<div class="slidersTab__slider-item">
<div class="slidersTab__slider-icon">
<img src="/media/vn4lep5l/proc_1_4.svg" alt="" width="200">
</div>
<div class="slidersTab__slider-text">
<h3 class="slidersTab__slider-title">Определим концепцию проекта</h3>
<div class="slidersTab__slider-description text">
<p><span class="descriptionText">На основе информации, полученной от вас, и анализа рынка определяемся с центральной идеей и основными посылами целевой аудитории.</span></p>
</div>
<div class="slidersTab__slider-cite text">
<p>Это поможет лучше направлять пользователей к совершению необходимых нам целевых действий</p>
<p><span class="noticeText"><strong>Вадим Н.</strong>, Маркетолог<br>опыт работы: 5 лет</span></p>
</div>
</div>
</div>
</div>
<div class="swiper-slide" style="width: 995px; opacity: 0; transform: translate3d(-3980px, 0px, 0px); transition-duration: 0ms;" role="group" aria-label="5 / 7">
<div class="slidersTab__slider-item">
<div class="slidersTab__slider-icon">
<img src="/media/vd0gjpwo/proc_1_5.svg" alt="" width="200">
</div>
<div class="slidersTab__slider-text">
<h3 class="slidersTab__slider-title">Разработаем информационную модель</h3>
<div class="slidersTab__slider-description text">
<p><span class="descriptionText">Схематично определяем основные информационные блоки и их содержание.</span></p>
</div>
<div class="slidersTab__slider-cite text">
<p>Это первый шаг воплощения выбранной идеи в жизнь. Идем от общего к частному: определяем количество страниц и их иерархию и из каких блоков будет состоять каждая страница — их количество, содержание и функционал. Взглянув на модель, вы сможете легко представить общие черты будущего сайта. А мы дадим дополнительные пояснения по принятым решениям.</p>
<p><span class="noticeText"><strong>Вадим Н.</strong>, Маркетолог</span><br><span class="noticeText">опыт работы: 5 лет</span></p>
</div>
</div>
</div>
</div>
<div class="swiper-slide swiper-slide-prev" style="width: 995px; opacity: 0; transform: translate3d(-4975px, 0px, 0px); transition-duration: 0ms;" role="group" aria-label="6 / 7">
<div class="slidersTab__slider-item">
<div class="slidersTab__slider-icon">
<img src="/media/eiwf4yet/proc_1_6.svg" alt="" width="200">
</div>
<div class="slidersTab__slider-text">
<h3 class="slidersTab__slider-title">Напишем текст для сайта</h3>
<div class="slidersTab__slider-description text">
<p><span class="descriptionText">Стилистика текста и манера его подачи определяется на основании выбранной концепции и ожиданий ядра целевой аудитории.</span></p>
</div>
<div class="slidersTab__slider-cite text">
<p>При работе над текстом мы учитываем ожидания ваших будущих пользователей: что для них важно, как они принимают решение о покупке. Заранее отрабатываем возможные возражения и плавно подводим к целевому действию.</p>
<p><span class="noticeText"><strong>Юрий П.</strong>, Редактор</span><br><span class="noticeText">опыт работы: 8 лет</span></p>
</div>
</div>
</div>
</div>
<div class="swiper-slide swiper-slide-visible swiper-slide-fully-visible swiper-slide-active" style="width: 995px; opacity: 1; transform: translate3d(-5970px, 0px, 0px); transition-duration: 0ms;" role="group" aria-label="7 / 7">
<div class="slidersTab__slider-item">
<div class="slidersTab__slider-icon">
<img src="/media/y5xpzw4l/proc_1_7.svg" alt="" width="200">
</div>
<div class="slidersTab__slider-text">
<h3 class="slidersTab__slider-title">Разработаем прототип</h3>
<div class="slidersTab__slider-description text">
<p><span class="descriptionText">Определяем внутреннюю конструкцию и функционал блоков. Продумываем расстановку и очередность визуальных акцентов.</span></p>
</div>
<div class="slidersTab__slider-cite text">
<p>На это этапе вы увидите приближенную схему будущего сайта. Отдельные элементы сделаем интерактивными, чтобы их можно было протестировать. Подключаем возможность перехода между страницами. </p>
<p><span class="noticeText"><strong>Юрий П.</strong>, Дизайнер<br>опыт работы: 3 года</span></p>
</div>
</div>
</div>
</div>
</div>
<div class="arrowBlock" data-delay="5000">
<div class="swiper-button-prev swiper-prev0" tabindex="0" role="button" aria-label="Previous slide" aria-controls="swiper-wrapper-d8bf17e53d6738100" aria-disabled="false"></div>
<div class="swiper-button-next swiper-next0 swiper-button-disabled" tabindex="-1" role="button" aria-label="Next slide" aria-controls="swiper-wrapper-d8bf17e53d6738100" aria-disabled="true"></div>
</div>
<span class="swiper-notification" aria-live="assertive" aria-atomic="true"></span></div>
</div>
</div>
<div class="slidersTab__slidersItem">
<div class="slidersTab__slider">
<div class="swiper slidersTab__slider-nav swiper-initialized swiper-horizontal swiper-backface-hidden swiper-thumbs">
<div class="swiper-wrapper" id="swiper-wrapper-ffe2eaf8f780af7d" aria-live="polite" style="transform: translate3d(0px, 0px, 0px); transition-duration: 0ms; transition-delay: 0ms;">
<div class="swiper-slide slidersTab__slider-label swiper-slide-visible swiper-slide-fully-visible swiper-slide-active" role="group" aria-label="1 / 8">Создадим уникальный дизайн</div>
<div class="swiper-slide slidersTab__slider-label swiper-slide-visible swiper-slide-fully-visible swiper-slide-next" role="group" aria-label="2 / 8">Адаптируем под мобильные устройства</div>
<div class="swiper-slide slidersTab__slider-label swiper-slide-visible swiper-slide-fully-visible" role="group" aria-label="3 / 8">Верстаем сайт</div>
<div class="swiper-slide slidersTab__slider-label swiper-slide-visible swiper-slide-fully-visible" role="group" aria-label="4 / 8">Интегрируем сайт с CMS</div>
<div class="swiper-slide slidersTab__slider-label swiper-slide-visible swiper-slide-fully-visible" role="group" aria-label="5 / 8">Заполняем готовый сайт</div>
<div class="swiper-slide slidersTab__slider-label swiper-slide-visible swiper-slide-fully-visible" role="group" aria-label="6 / 8">Тестируем готовый сайт</div>
<div class="swiper-slide slidersTab__slider-label swiper-slide-visible swiper-slide-fully-visible swiper-slide-thumb-active" role="group" aria-label="7 / 8">Переносим сайт на ваш хостинг</div>
<div class="swiper-slide slidersTab__slider-label swiper-slide-visible swiper-slide-fully-visible" role="group" aria-label="8 / 8">Устанавливаем аналитику</div>
</div>
<span class="swiper-notification" aria-live="assertive" aria-atomic="true"></span></div>
<div class="swiper slidersTab__slider-body swiper-fade swiper-initialized swiper-horizontal swiper-autoheight swiper-watch-progress swiper-backface-hidden">
<div class="swiper-wrapper slidersTab__slider-list" style="height: 280px; transition-duration: 0ms; transition-delay: 0ms;" id="swiper-wrapper-6818df6f7f67db108" aria-live="off">
<div class="swiper-slide" style="width: 995px; opacity: 0; transform: translate3d(0px, 0px, 0px); transition-duration: 0ms;" role="group" aria-label="1 / 8">
<div class="slidersTab__slider-item">
<div class="slidersTab__slider-icon">
<img src="/media/qrnd5bih/proc_2_1.svg" alt="" width="200">
</div>
<div class="slidersTab__slider-text">
<h3 class="slidersTab__slider-title">Создадим уникальный дизайн</h3>
<div class="slidersTab__slider-description text">
<p><span class="descriptionText">На основе прототипа разрабатываем уникальный дизайн, усиливающий информационный посыл текста</span></p>
</div>
<div class="slidersTab__slider-cite text">
<p>Дизайн — важнейший элемент веб-разработки. Он дает возможность манипулировать вниманием пользователя, проводя его по нужному нам пути. При этом мы учитываем пожелания заказчика и требования маркетолога проекта.</p>
<p><span class="noticeText">Юрий П., Дизайнер</span><br><span class="noticeText">опыт работы: 3 года</span></p>
</div>
</div>
</div>
</div>
<div class="swiper-slide" style="width: 995px; opacity: 0; transform: translate3d(-995px, 0px, 0px); transition-duration: 0ms;" role="group" aria-label="2 / 8">
<div class="slidersTab__slider-item">
<div class="slidersTab__slider-icon">
<img src="/media/flrfvau3/proc_2_2.svg" alt="" width="200">
</div>
<div class="slidersTab__slider-text">
<h3 class="slidersTab__slider-title">Адаптируем под мобильные устройства</h3>
<div class="slidersTab__slider-description text">
<p><span class="descriptionText">Сайт должен быть удобен для использования на мобильных устройствах, поэтому мы адаптируем каждый блок. После этого обязательно проверяем удобство работы на реальных устройствах.</span></p>
</div>
<div class="slidersTab__slider-cite text">
<p>Удобство использования — это важнейший критерий. Еще мы учитываем техническую составляющую. Важно не допускать дублирование контента и обеспечить максимально быструю работу сайта.</p>
<p><span class="noticeText">Юрий П., Дизайнер</span><br><span class="noticeText">опыт работы: 3 года</span></p>
</div>
</div>
</div>
</div>
<div class="swiper-slide" style="width: 995px; opacity: 0; transform: translate3d(-1990px, 0px, 0px); transition-duration: 0ms;" role="group" aria-label="3 / 8">
<div class="slidersTab__slider-item">
<div class="slidersTab__slider-icon">
<img src="/media/eshl5ard/proc_2_3.svg" alt="" width="200">
</div>
<div class="slidersTab__slider-text">
<h3 class="slidersTab__slider-title">Верстаем сайт</h3>
<div class="slidersTab__slider-description text">
<p><span class="descriptionText">Преобразуем дизайн в html код с использованием передовых технологий.</span></p>
</div>
<div class="slidersTab__slider-cite text">
<p>Верстка с использование современных технологий обеспечивает быстроту загрузки сайта и правильность его отображения на различных видах устройств.</p>
<p>От качество верстки зависит восприятие сайта роботами поисковых систем, а значит — его позиции в результатах выдачи.</p>
<p><span class="noticeText">Максим Я., Верстальщик</span><br><span class="noticeText">опыт работы: 5 лет</span></p>
</div>
</div>
</div>
</div>
<div class="swiper-slide" style="width: 995px; opacity: 0; transform: translate3d(-2985px, 0px, 0px); transition-duration: 0ms;" role="group" aria-label="4 / 8">
<div class="slidersTab__slider-item">
<div class="slidersTab__slider-icon">
<img src="/media/etcdacml/proc_2_4.svg" alt="" width="200">
</div>
<div class="slidersTab__slider-text">
<h3 class="slidersTab__slider-title">Интегрируем сайт с CMS</h3>
<div class="slidersTab__slider-description text">
<p><span class="descriptionText">Подключаем сайт к системе управления контентом</span></p>
</div>
<div class="slidersTab__slider-cite text">
<p>На этом этапе сайт становится управляемым. С помощью системы управления содержимым сайта вы легко и просто можете добавлять на сайт новые статьи, новости, работы в портфолио. Добавлять, менять или удалять изображения.</p>
<p><span class="noticeText">Дмитрий П., Программист</span><br><span class="noticeText">опыт работы: 5 лет</span></p>
</div>
</div>
</div>
</div>
<div class="swiper-slide" style="width: 995px; opacity: 0; transform: translate3d(-3980px, 0px, 0px); transition-duration: 0ms;" role="group" aria-label="5 / 8">
<div class="slidersTab__slider-item">
<div class="slidersTab__slider-icon">
<img src="/media/bridmg3b/proc_2_5.svg" alt="" width="200">
</div>
<div class="slidersTab__slider-text">
<h3 class="slidersTab__slider-title">Заполняем готовый сайт</h3>
<div class="slidersTab__slider-description text">
<p><span class="descriptionText">Публикуем на сайте текст и подготовленные лицензионные изображения.</span></p>
</div>
<div class="slidersTab__slider-cite text">
<p>Это экономит ваше время, так как вы получаете готовый к использованию сайт.</p>
<p><span class="noticeText">Николай П., Контент менеджер</span><br><span class="noticeText">опыт работы: 2 года</span></p>
</div>
</div>
</div>
</div>
<div class="swiper-slide swiper-slide-prev" style="width: 995px; opacity: 0; transform: translate3d(-4975px, 0px, 0px); transition-duration: 0ms;" role="group" aria-label="6 / 8">
<div class="slidersTab__slider-item">
<div class="slidersTab__slider-icon">
<img src="/media/ybwkmapu/proc_2_6.svg" alt="" width="200">
</div>
<div class="slidersTab__slider-text">
<h3 class="slidersTab__slider-title">Тестируем готовый сайт</h3>
<div class="slidersTab__slider-description text">
<p><span class="descriptionText">Еще раз проверяем корректность работы сайта и его отображения на разных видах устройств.</span></p>
</div>
<div class="slidersTab__slider-cite text">
<p>Это позволяет избежать досадных недоразумений и оплошностей.</p>
<p>Выявленные недочеты тут же исправляются.</p>
<p><span class="noticeText">Николай П., Контент менеджер</span><br><span class="noticeText">опыт работы: 2 года</span></p>
</div>
</div>
</div>
</div>
<div class="swiper-slide swiper-slide-visible swiper-slide-fully-visible swiper-slide-active" style="width: 995px; opacity: 1; transform: translate3d(-5970px, 0px, 0px); transition-duration: 0ms;" role="group" aria-label="7 / 8">
<div class="slidersTab__slider-item">
<div class="slidersTab__slider-icon">
<img src="/media/ibfhbf24/proc_2_7.svg" alt="" width="200">
</div>
<div class="slidersTab__slider-text">
<h3 class="slidersTab__slider-title">Переносим сайт на ваш хостинг</h3>
<div class="slidersTab__slider-description text">
<p><span class="descriptionText">Настраиваем надежную работу хостинга и меняем настройки доменного имени</span></p>
</div>
<div class="slidersTab__slider-cite text">
<p>С этого момента сайт находится полностью под вашим контролем.</p>
<p><span class="noticeText">Дмитрий П., Программист</span><br><span class="noticeText">опыт работы: 5 лет</span></p>
</div>
</div>
</div>
</div>
<div class="swiper-slide swiper-slide-next" style="width: 995px; opacity: 0; transform: translate3d(-6965px, 0px, 0px); transition-duration: 0ms;" role="group" aria-label="8 / 8">
<div class="slidersTab__slider-item">
<div class="slidersTab__slider-icon">
<img src="/media/te2ju2yp/proc_2_8.svg" alt="" width="200">
</div>
<div class="slidersTab__slider-text">
<h3 class="slidersTab__slider-title">Устанавливаем аналитику</h3>
<div class="slidersTab__slider-description text">
<p><span class="descriptionText">Добавляем на сайт Яндекс.Метрику и Яндекс.Вебмастер</span></p>
</div>
<div class="slidersTab__slider-cite text">
<p>Эти сервисы позволяют контролировать работу сайта и получать актуальные данные о его посетителях.</p>
<p><span class="noticeText">Дмитрий П., Программист</span><br><span class="noticeText">опыт работы: 5 лет</span></p>
</div>
</div>
</div>
</div>
</div>
<div class="arrowBlock" data-delay="5000">
<div class="swiper-button-prev swiper-prev1" tabindex="0" role="button" aria-label="Previous slide" aria-controls="swiper-wrapper-6818df6f7f67db108" aria-disabled="false"></div>
<div class="swiper-button-next swiper-next1" tabindex="0" role="button" aria-label="Next slide" aria-controls="swiper-wrapper-6818df6f7f67db108" aria-disabled="false"></div>
</div>
<span class="swiper-notification" aria-live="assertive" aria-atomic="true"></span></div>
</div>
</div>
</div>
</div>
</div>@mixin row($justufy: null, $align: null) {
display: flex;
flex-wrap: wrap;
@if ($justufy == "jst") {
justify-content: flex-start;
}
@if ($justufy == "jend") {
justify-content: flex-end;
}
@if ($justufy == "jc") {
justify-content: center;
}
@if ($justufy == "jsb") {
justify-content: space-between;
}
@if ($justufy == "jsa") {
justify-content: space-around;
}
@if ($align == "ac") {
align-items: center;
}
@if ($align == "as") {
align-items: stretch;
}
@if ($align == "ab") {
align-items: baseline;
}
@if ($align == "ast") {
align-items: flex-start;
}
}
@mixin center($axis: "both") {
position: absolute;
@if ($axis == "both") {
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
@if $axis == "x" {
left: 50%;
transform: translateX(-50%);
}
@if $axis == "y" {
top: 50%;
transform: translateY(-50%);
}
}
@mixin bp($point) {
@media (max-width: $point) {
@content;
}
}
@mixin bpmin($point) {
@media (min-width: $point) {
@content;
}
}
/*slidersTab*/
:root {
--accentFont: "Bebas";
--titleFont: "Kelson";
--dark: #191919;
--light: #f9f9f9;
--medium: #bdbdbd;
--darkRGB: rgb(25, 25, 25);
--lightRGB: rgb(255, 255, 255);
--border: #e7e7e7;
--accent: red;
}
.slidersTab__tab-nav {
@include row();
gap: 0 20px;
margin-bottom: 40px;
}
.slidersTab__tab-label {
font-size: 20px;
padding: 0.5em 0.5em 0.5em 0;
font-family: var(--titleFont), sans-serif;
text-transform: uppercase;
color: var(--medium);
&.current,
&:hover {
color: unset;
}
}
.slidersTab__description {
margin-bottom: 30px;
}
.slidersTab__slidersItem {
height: 0;
opacity: 0;
visibility: hidden;
//overflow: clip;
will-change: height;
transition: opacity 0.3s linear;
&.current {
height: auto;
opacity: 1;
visibility: visible;
//transition: opacity 0.3s linear;
}
}
.slidersTab__slider-nav {
padding-top: 20px;
margin-bottom: 40px;
.swiper-wrapper {
justify-content: space-between;
}
}
.slidersTab__slider-label {
position: relative;
padding: 20px 0.5em 0 0.5em;
text-align: center;
font-size: 14px;
font-weight: 500;
color: var(--medium);
cursor: pointer;
transition: all 0.3s linear;
border-top: 2px solid var(--accent);
&.swiper-slide-thumb-active.swiper-slide-visible,
&:hover {
color: unset;
}
&:hover {
&:before {
opacity: 1;
}
}
&.swiper-slide-thumb-active.swiper-slide-visible {
&:before {
opacity: 1;
border: 1px solid var(--accent);
}
}
&:before {
content: "";
@include center(x);
top: -15px;
width: 10px;
height: 10px;
padding: 8px;
border: 1px solid transparent;
border-radius: 100%;
background-color: var(--accent);
background-clip: content-box;
box-sizing: content-box;
opacity: 0;
transition: all 0.3s linear;
}
@include bpmin(1200px) {
flex: 1 1 auto;
}
}
.slidersTab__slider-body {
max-width: 995px;
margin: auto;
box-shadow: 2px 2px 30px rgba(0, 0, 0, 0.08);
/* .swiper-slide {
padding: 16px;
}*/
}
.slidersTab__slider-item {
display: grid;
grid-template-columns: 120px 1fr;
padding: max(5%, 40px) max(10%, 30px) 10px max(10%, 30px);
@include bp(768px) {
grid-template-columns: 100%;
}
}
.slidersTab__slider-title {
font-weight: 400;
}
.slidersTab__slider-icon {
width: 96px;
padding: 25px;
aspect-ratio: 1;
border: 1px dashed var(--border);
border-radius: 100%;
@include bp(768px) {
display: none;
}
}
.slidersTab__slider-cite {
position: relative;
padding-left: 15%;
margin: 30px 0 0 auto;
&:before {
content: "";
position: absolute;
left: 0;
top: 0;
width: 63px;
height: 57px;
background-image: url("data:image/svg+xml,%3Csvg width='63' height='57' viewBox='0 0 63 57' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath opacity='0.06' d='M1.9422 24.8188V0H25.3699V19.5938C25.3699 30.2021 24.1156 37.8417 21.6069 42.5125C18.1272 48.925 12.7052 53.7542 5.34104 57L0 48.5687C4.36994 46.8271 7.60694 44.0958 9.71098 40.375C11.896 36.575 13.1098 31.3896 13.3526 24.8188H1.9422ZM39.5723 24.8188V0H63V19.5938C63 30.2021 61.7457 37.8417 59.237 42.5125C55.7572 48.925 50.3353 53.7542 42.9711 57L37.6301 48.5687C42 46.8271 45.237 44.0958 47.341 40.375C49.526 36.575 50.7399 31.3896 50.9827 24.8188H39.5723Z' fill='%23191919'/%3E%3C/svg%3E%0A");
background-size: 63px 57px;
background-position: 0 0;
background-repeat: no-repeat;
}
}
/*Tab Slider*/
const slidersTabSlider = document.querySelectorAll(".slidersTab__slider-body");
const sliderTabNav = document.querySelectorAll(".slidersTab__slider-nav");
sliderTabNav.forEach((elem, index) => {
new Swiper(elem, {
//centeredSlides: true,
slidesPerView: 2.1,
//cssMode: true,
breakpoints: {
768: {
slidesPerView: 4.1
},
1200: {
slidesPerView: "auto"
}
}
});
});
slidersTabSlider.forEach((slider, index) => {
let delay = slider.querySelector(".arrowBlock").dataset.delay;
if (isNaN(delay)) {
delay = 0;
}
var autoplayVal = delay !== 0;
slider
.querySelector(".swiper-button-next")
.classList.add(`swiper-next${index}`);
slider
.querySelector(".swiper-button-prev")
.classList.add(`swiper-prev${index}`);
new Swiper(slider, {
slidesPerView: 1,
spaceBetween: 10,
effect: "fade",
fadeEffect: { crossFade: true },
//updateOnImagesReady: true,
//disableOnInteraction: false,
autoplay: autoplayVal
? {
delay: +delay,
disableOnInteraction: false,
pauseOnMouseEnter: true
}
: false,
autoHeight: true,
navigation: {
nextEl: ".swiper-next" + index,
prevEl: ".swiper-prev" + index
},
thumbs: {
swiper: sliderTabNav[index]
}
});
});
const tabContainer = document.querySelector(".slidersTab");
const slidersTabSwiper = tabContainer.querySelectorAll(
".slidersTab__slider-body"
);
const sliderTabSwiper = tabContainer.querySelectorAll(
".slidersTab__slider-nav"
);
const navList = tabContainer.querySelectorAll(".slidersTab__tab-label");
const tabList = tabContainer.querySelectorAll(".slidersTab__slidersItem");
navList[0].classList.add("current");
tabList[0].classList.add("current");
for (let i = 0; i < navList.length; i++) {
navList[i].addEventListener("click", (evt) => {
let currentLink = tabContainer.querySelector(
".slidersTab__tab-label.current"
);
let currentTab = tabContainer.querySelector(
".slidersTab__slidersItem.current"
);
let currentSlider = tabList[i].querySelector('.slidersTab__slider-body').swiper;
currentSlider.autoplay.stop();
currentSlider.slideTo(0, 0, false);
currentSlider.autoplay.start();
currentLink.classList.remove("current");
navList[i].classList.add("current");
currentTab.classList.remove("current");
tabList[i].classList.add("current");
});
}
External CSS
This Pen doesn't use any external CSS resources.