Привет всем. Помогите пожалуйста. Разрабатываю сайт который состоит из 4 блоков. В блоке "swiper" есть вертикальный слайдер от swiper.js. Не могу решить 2 проблемы. Во первых, слайдер должен начать переключаться только когда полностью отобразится на экране пользователя. А во-вторых, пользователь должен обязательно переключить все слайды слайдера, а уже потом иметь возможность прокручивать сайт к блоку "projects". Помогите пожалуйста, как это можно реализовать? Фрагмент кода приложил ниже.
<header class="header">
<!-- some code here... -->
</header>
<main>
<div class="about" id="about">
<div class="about__text-one">We are a UAE-based EPC company proved itself remarkably effective in
engineering,
procurement and construction that
supports the Oil&Gas, Energy and Chemistry industries in the Middle East and Central Asia.</div>
<img class="about__img" src="./img/about__img.svg" alt="Map" width="800px" height="">
<div class="about__text-two">Since establishment in 2014, FUTURIS has gained trust and has been
registered
by the leading Oil&Gas Companies operating
in Central Asia and strives to contribute to the successes of the Clients' projects.</div>
</div>
<div style="--swiper-pagination-color: #000; --swiper-pagination-left: 150px; --swiper-pagination-bullet-size: 15px;"
class="swiper" id="swiper">
<div class="swiper-pagination"></div>
<div class="swiper-wrapper">
<div class="swiper-slide">
<h2 class="fieldsOfOperation__title">Fields of Operation</h2>
<div class="fieldOfOperation__texts">
<span class="fieldOfOperation__text">Oil & Gas</span>
<span class="fieldOfOperation__text">Chemistry</span>
<span class="fieldOfOperation__text">Energy</span>
</div>
</div>
<div class="swiper-slide">
<h2 class="expertise__title">Expertise</h2>
<div class="expertise__texts">
<span class="expertise__text">Drilling Equipment</span>
<span class="expertise__text">Instrumentation & Electrical</span>
<span class="expertise__text">Valves & Pumps</span>
<span class="expertise__text">Mechanical Equipment & Rotating Machinery</span>
<span class="expertise__text">Process Equipment</span>
</div>
</div>
<div class="swiper-slide">
<h2 class="services__title">Services</h2>
<div class="services__texts">
<span class="services__text">Automation & Control</span>
<span class="services__text">Commissioning & Decommissioning</span>
<span class="services__text">Welding</span>
<span class="services__text">Isolation</span>
<span class="services__text">Operational Assurance</span>
<span class="services__text">Destructive Testing</span>
<span class="services__text">Hydrotesting</span>
<span class="services__text">Intelligent Pigging</span>
<span class="services__text">Pipeline Equipment Maintenance</span>
<span class="services__text">Flow Assurance</span>
<span class="services__text">Construction</span>
<span class="services__text">Wiring</span>
</div>
</div>
</div>
</div>
<section class="projects">
<!-- some code here... -->
</section>
</main>
Простой
