Компоненты карусели

Доступные функции настройки

• Базовая карусель.
• Настройка ширины и высоты с указанием единиц измерения.
• Автоматическая карусель.
• Разбиение на страницы.
• Кастомизация разбиения на страницы.
• Кнопки «Вперёд» и «Назад».
• Кастомизация кнопок «Вперёд» и «Назад».
• Цикл.
• Ленивая загрузка.
• Многоколоночная карусель.
• Установка интервалов для многоколоночной карусели.
• Вертикальное и горизонтальное направление карусели.
• Карточная карусель.
• Связанная карусель.
• Добавление и удаление столбцов.
• Демонстрация файлов (отображение в виде значка, предварительный просмотр при клике).
• Функция загрузки дополнительных элементов.

Сборка

# установка зависимостей
npm install

# запуск с горячей перезагрузкой на локальном хосте:8080
npm run dev

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

Импорт

import Swiper from '../common/swipe'
import SwiperGroup from '../common/swipe-group' //необходимо для связанной карусели

Базовый пример

    <c-swiper :propOption='options.swipeBoxNormal' :listData='listData'></c-swiper>

Пример связанной карусели

    <c-swiper-group :propOption='groupOptions.swipeGroupHon.option'>
      <c-swiper v-for="(item, key) in groupOptions.swipeGroupHon.items" :key="item.propId" :propOption='item.option':listData='item.listData'></c-swiper>
    </c-swiper-group>

Пример данных

listData: [
        {
          type: 'img',
          src: '../../static/1.png'
        },
        {
          type: 'img',
          src: '../../static/2.png'
        },
        {
          type: 'img',
          src: '../../static/3.png'
        },
        {
          type: 'audio',
          src: '../../static/4.mp3'
        },
        {
          type: 'video',
          src: '../../static/5.avi'
        },
        {
          type: 'txt',
          src: '../../static/6.txt'
        },
        {
          type: 'pdf',
          src: '../../static/7.pdf'
        }
      ]

Пример конфигурации

      options: {
        swipeBoxNormal: {
          propId: 'swipeBoxNormal',
          height: '30rem',
          width: '90rem'
        }
      }

Параметры

Атрибут

swipe-item

Разбивка на страницы — стили разбивки на страницы

false

Функции разбивки на страницы — динамическая разбивка на страницы, количество элементов большое, будет скрыта

Можно ли нажимать на разбивку на страницы?

Цвет точек

Если тип разбивки на страницы bullets, то устанавливается цвет фона для точек.

#007aff

Строка

Нет

Навигация

| rowspan='3' | Навигация | Позиция | Описание | Верно| Требуется| | ---| --- | --- | --- | --- | | inside, outside | Внутри | Расположение кнопок «Вперёд» и «Назад» в контейнере | inside | Нет | | default, circle, large, bold, shadow | По умолчанию | Тип стиля кнопок «Вперёд» и «Назад» | default | Нет |

Ленивая загрузка

События

Загрузка дополнительных функций

    <c-swiper :propOption='options.swipeBoxMore' @last='loadmore' :listData='listDataMore'></c-swiper>

Событие last связано с функцией загрузки дополнительных элементов. Когда компонент карусели прокручивается до последнего элемента, оно срабатывает. Необходимо выполнить метод текущего компонента (loadmore), который принимает поле (listDataMore) как параметр и присваивает ему значение во второй раз. Затем обновляется представление.

Swipe-group

Таблица с границами шириной 100%: