Компонент Slideset

Создавайте наборы и группы элементов, позволяя "перебирать" комплекты.

Использование

Чтобы применить компонент «Slideset», добавьте атрибут data-uk-slideset к элементу контейнера. Добавьте параметр default к атрибуту data-uk-slideset, чтобы настроить количество отображаемых элементов в наборе.

Пример

Разметка

<div data-uk-slideset="{default: 4}">
    <ul class="uk-grid uk-slideset">
        <li><img src="" alt=""></li>
        <li><img src="" alt=""></li>
        ...
    </ul>
</div>

Для навигации по слайдам используйте класс uk-slideset-nav. Это будет динамически создавать навигацию в зависимости от количества существующих слайдов.

Разметка

<div data-uk-slideset="{default: 4}">
    <ul class="uk-grid uk-slideset">
        <li>...</li>
        <li>...</li>
    </ul>
    <ul class="uk-slideset-nav">...</ul>   <!-- Навигация по слайдам -->
</div>

Чтобы переключиться на соседние слайды, используйте атрибут data-uk-slideset-item и установите для атрибута next и previous. Элементы с атрибутом data-uk-slideset-item должны находиться внутри контейнера data-uk-slideset.

Разметка

<div data-uk-slideset="{default: 3}">    <!-- Контейнер data-uk-slideset -->

    <ul class="uk-grid uk-slideset">     <!-- Список элементов -->
        <li>...</li>
        <li>...</li>
    </ul>
    
    <ul class="uk-grid uk-grid-width-1-2 uk-text-center">
        <li><a href="" data-uk-slideset-item="previous"></a></li>   <!-- Предыдущий -->
        <li><a href="" data-uk-slideset-item="next"></a></li>       <!-- Следующий -->
    </ul>
    
</div>

Slidenav и Dotnav

Вы можете использовать любой из компонентов UIkit 2 для навигации по Slideset. Например, Slidenav и Dotnav можно использовать для стилизации навигации Slideset, как вы можете видеть ниже.

Пример

    Разметка

    <div data-uk-slideset="{default: 4}">
        <div class="uk-slidenav-position">   <!-- Контейнер Slidenav, центрируем вертикально -->
            <ul class="uk-grid uk-slideset">
                <li>...</li>
                <li>...</li>
            </ul>
            <!-- Slidenav -->
            <a href="" class="uk-slidenav uk-slidenav-previous" data-uk-slideset-item="previous"></a>
            <a href="" class="uk-slidenav uk-slidenav-next" data-uk-slideset-item="next"></a>
        </div>
        <!-- Dotnav -->
        <ul class="uk-slideset-nav uk-dotnav uk-flex-center">...</ul>
    </div>

    Адаптивные элементы

    Компонент «Slideset» поддерживает media query видимости элементов. Просто добавьте вариант точки останова *breakpoint, такой как small, medium, large, xlarge к атрибуту data-uk-slideset. Добавьте количество элементов, которые вы хотите отобразить, в указанной точке останова.

    Вариант Описание
    small Влияет на ширину устройства от 480px и выше.
    medium Влияет на ширину устройства от 768px и выше.
    large Влияет на ширину устройства от 960px и выше.
    xlarge Влияет на ширину устройства от 1220px и выше.

    Пример

      Разметка

      <div data-uk-slideset="{small: 2, medium: 4, large: 5, xlarge: 3}">
          ...
      </div>

      Анимация

      Существует множество анимаций, которые можно использовать для отображения следующего набора элементов. Просто добавьте параметр animation в data-uk-slideset и установите для него нужную анимацию. Продолжительность анимации также можно настроить с помощью опции duration.

      Анимация Описание
      fade Эффект плавного появления/исчезновения.
      scale Анимация элемента - эффект «scale».
      slide-horizontal Элементы сдвигаются горизонтально.
      slide-vertical Элементы сдвигаются вертикально.
      slide-top Элементы скользят вверх с опусканием вниз.
      slide-bottom Элементы скользят вниз и поднимаются.

      Пример

        Разметка

        <div data-uk-slideset="{animation: 'scale', duration: 200}">...</div>

        Фильтр

        Вы также можете отфильтровать набор слайдов, чтобы отображались только определенные элементы. Для этого добавьте атрибут data-uk-filter к каждому элементу управления, чтобы определить категорию, которую вы хотите фильтровать. Затем вам также необходимо добавить атрибут data-uk-filter к каждому элементу slideset, чтобы определить, к какой категории относится этот элемент.

        Примечание Элементы управления можно включить в slideset или ссылаться на них, добавив параметр controls в атрибут data-uk-slideset и передав идентификатор в параметр.

        Пример

        Разметка

        <!-- Controls / Элементы управления включены в Slideset -->
        <div data-uk-slideset>
            <ul>
                <li data-uk-filter=""><a></a></li>
                <li data-uk-filter="filter-a"><a></a></li>
                <li data-uk-filter="filter-b"><a></a></li>
            </ul>
        
            <ul class="uk-grid uk-slideset">
                <li data-uk-filter="filter-a"><img src="" alt=""></li>
                <li data-uk-filter="filter-b"><img src="" alt=""></li>
            </ul>
        </div>
        
        <!-- Controls / Элементы управления находятся за пределами Slideset -->
        <ul id="my-id">
            <li data-uk-filter=""><a></a></li>
            <li data-uk-filter="filter-a"><a></a></li>
            <li data-uk-filter="filter-b"><a></a></li>
        </ul>
        
        <div data-uk-slideset"{controls: '#my-id'}">
            <ul class="uk-slideset">
                <li data-uk-filter="filter-a"><img src="" alt=""></li>
                <li data-uk-filter="filter-b"><img src="" alt=""></li>
            </ul>
        </div>

        JavaScript options

        Option Possible value Default Описание
        default integer 1 Видимые по умолчанию элементы в комплекте
        small integer null Видимые с шириной устройства от 480px и выше.
        (small breakpoint)
        medium integer null Видимые с шириной устройства от 768px и выше.
        (medium breakpoint)
        large integer null Видимые с шириной устройства от 960px и выше.
        (large breakpoint)
        xlarge integer null Видимые с шириной устройства от 1220px и выше.
        (xlarge breakpoint)
        animation string 'fade' Название анимации
        duration integer 200 Продолжительность анимации в мс
        delay integer 100 Задержка анимации между элементами в комплекте
        filter string '' Фильтр элементов
        autoplay boolean false Определяет, должны ли элементы slideset переключаться автоматически.
        pauseOnHover boolean true Приостановка автозапуска при наведении на slideset.
        autoplayInterval integer 7000 Определяет промежуток времени между переключением элементов slideset.

        Init element manually

        var slideset = UIkit.slideset(element, { /* options */ });

        Events

        Name Parameter Description
        show.uk.slideset event, set On set show