@RahymCharyyev

Как решить проблему с вертикальным слайдером на Swiper.js?

Привет всем. Помогите пожалуйста. Разрабатываю сайт который состоит из 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>
  • Вопрос задан
  • 293 просмотра
Пригласить эксперта
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы