Flicking

Установка

Вы можете легко установить Flicking с помощью менеджеров пакетов, таких как npm или yarn npm install @egjs/flicking yarn add @egjs/flicking Ссылки CDN

В отличие от индивидуальных или внутренних сервисов, у CDN могут возникать непредсказуемые проблемы с сервисами, поэтому лучше использовать собственные файлы.

<script src="https://unpkg.com/@egjs/flicking/dist/flicking.pkgd.min.js" crossorigin="anonymous"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/egjs-flicking/4.x.x/flicking.pkgd.min.js" crossorigin="anonymous"></script> CSS - файлы

Выберите flicking-inline.css, если вам нужно поддерживать IE9

<link rel="stylesheet" href="https://unpkg.com/@egjs/flicking/dist/flicking.css" crossorigin="anonymous" /> <link rel="stylesheet" href="https://unpkg.com/@egjs/flicking/dist/flicking-inline.css" crossorigin="anonymous" /> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/egjs-flicking/4.x.x/flicking.css" crossorigin="anonymous" /> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/egjs-flicking/4.x.x/flicking-inline.css" crossorigin="anonymous" />

Быстрый Старт

Добавьте скрипт/CSS на страницу. (В отличие от отдельных или внутренних случаев, у CDN возникают непредсказуемые проблемы с сервисами, поэтому лучше использовать собственные файлы.)

<script src="https://unpkg.com/@egjs/flicking/dist/flicking.pkgd.min.js" crossorigin="anonymous"></script> <link rel="stylesheet" href="https://unpkg.com/@egjs/flicking/dist/flicking.css" crossorigin="anonymous" />

Затем добавьте на свою страницу базовый HTML-шаблон Flicking.

<div id="carousel" class="flicking-viewport">
    <div class="flicking-camera">
        <div class="panel"></div>
        <div class="panel"></div>
        <div class="panel"></div>
    </div>
</div>

Если вы создаёте вертикальную карусель, вам следует добавить класс vertical к элементу viewport.

<div class="flicking-viewport vertical"></div>

Затем инициализируйте экземпляр Flicking с помощью JavaScript.

const flicking = new Flicking("#carousel", {
align: "center",
circular: true,
bound: true,
renderOnlyVisible: true
});