Загрузочная карусель только для мобильных телефонов - PullRequest
Новая
       31

Загрузочная карусель только для мобильных телефонов

0 голосов
/ 11 января 2019

enter image description here

Может ли кто-нибудь дать мне пример того, как сделать так, чтобы страница команды работала только на мобильных устройствах (до 576 пикселей). Предполагается, что это слайдер карусели без индикаторов или элементов управления. Я сделал все хорошо на других разрешениях, но понятия не имею, как реализовать слайдер карусели только на мобильном разрешении? Вот код: 

<section class="container-fluid">
    <div class="row about-header">
        <h1 class="col-12 col-sm-4 d-flex justify-content-center align-items-center about-title">MEET THE TEAM</h1>
    </div>

    <div class="row">
        <div class="col-12 meet-team">
            <figure class="text-center">
                    <img class="img-fluid" src="~/img/employee1@1366.png" alt="employee1-image">
                <figcaption class="figcaption pt-3">
                    <span class="employee-name">#####   #######</span><br />
                    <em class="employee-title">CEO</em><br />
                    <span class="role-description">
                        Lorem ipsum dolor sit amet,<br />
                        consectetur adipiscing elit, sed do<br />
                        eiusmod tempor incididunt. <br />
                        Lorem ipsum dolor sit amet.
                    </span>
                </figcaption>
            </figure>
            <div class="col-12 group">
                <h2 class="group-title">GROUP</h2>
            </div>
        </div>
    </div>
    <div class="row">
        <div class="col-6 col-sm-3">
            <figure class="text-center">
                    <img class="img-fluid" src="~/img/employee1@1366.png" alt="employee1-image">
                <figcaption class="figcaption pt-3">
                    <span class="employee-name">##### ######</span><br />
                    <em class="employee-title">Accounts Exec</em><br />
                    <span class="role-description">
                        Lorem ipsum dolor sit amet,
                        consectetur adipiscing elit, sed do
                        eiusmod tempor incididunt.
                        Lorem ipsum dolor sit amet.
                    </span>
                </figcaption>
            </figure>
        </div>
        <div class="col-6 col-sm-3">
            <figure class="text-center">
                    <img class="img-fluid" src="~/img/employee2@1366.png" alt="employee2-image">
                <figcaption class="figcaption pt-3">
                    <span class="employee-name">#####  ######</span><br />
                    <em class="employee-title">Operations Manager</em><br />
                    <span class="role-description">
                        Lorem ipsum dolor sit amet,
                        consectetur adipiscing elit, sed do
                        eiusmod tempor incididunt.
                        Lorem ipsum dolor sit amet.
                    </span>
                </figcaption>
            </figure>
        </div>
        <div class="col-6 col-sm-3">
            <figure class="text-center">
                    <img class="img-fluid" src="~/img/employee3@1366.png" alt="employee3-image">
                <figcaption class="figcaption pt-3">
                    <span class="employee-name">####  #####</span><br />
                    <em class="employee-title">Accounts Manager</em><br />
                    <span class="role-description">
                        Lorem ipsum dolor sit amet,
                        consectetur adipiscing elit, sed do
                        eiusmod tempor incididunt.
                        Lorem ipsum dolor sit amet.
                    </span>
                </figcaption>
            </figure>
        </div>
        <div class="col-6 col-sm-3">
            <figure class="text-center">
                    <img class="img-fluid" src="~/img/employee4@1366.png" alt="employee4-image">
                <figcaption class="figcaption pt-3">
                    <span class="employee-name">##### ######</span><br />
                    <em class="employee-title">Accounts Apprentice</em><br />
                    <span class="role-description">
                        Lorem ipsum dolor sit amet,
                        consectetur adipiscing elit, sed do
                        eiusmod tempor incididunt.
                        Lorem ipsum dolor sit amet.
                    </span>
                </figcaption>
            </figure>
        </div>
    </div>
</section>
...