Мы выпустили основную версию 4 карусельной библиотеки Naver с открытым исходным кодом Flicking.
Это крупное обновление работает с Flicking в течение последних двух лет и направлено на решение проблем, которые были у Flicking, но которые было трудно решить и развивать дальше.< br /> Это ключевые изменения в Flicking v4.
New Flicking сохраняет пользовательский интерфейс таким, какой он есть.
Одно из направлений, которое Flicking имеет по сравнению с v3, — сохранить неповрежденным пользовательский интерфейс, созданный пользователем. Большое количество карусельных библиотек имеют свойство изменять размер элементов внутренней панели, часто предоставляя параметр по умолчанию для «сколько панелей отображать на экране» и используя отдельные параметры для сохранения пользовательского интерфейса без изменений.
С другой стороны, Flicking использует пользовательский интерфейс как главный приоритет. Все остальные настройки, связанные с пользовательским интерфейсом, основаны на пользовательском CSS, если они включают базовую структуру DOM и CSS для реализации пользовательского интерфейса карусели. Например, пользователь может легко изменить размер каждой панели, используя «ширину» CSS, или отрегулировать расстояние между панелями, используя «поле» CSS.
<Flicking> <!-- 100px panel, 10px gap with next panel --> <div style="width: 100px; margin-right: 10px;"></div> <!-- Panel with 20% size compared to parent element --> <div style="width: 20%"></div> </Flicking>
Хотя Flicking v3 также поддерживал вышеуказанные функции, было невозможно отрегулировать расстояние между панелями или реализовать естественную анимацию с помощью переходов по ширине, поскольку на панели было установлено свойство «position: absolute». Кроме того, из-за этих свойств пользовательский интерфейс часто ломался, если высота панели не была указана явно.
Вместо «position: absolute» Flicking v4 использует CSS на основе Flexbox для размещения элементов панели. Благодаря этому мы решили проблемы, ранее описанные в Flicking v3, чтобы пользователям было проще настраивать пользовательский интерфейс. Он также предоставляет отдельные CSS на основе «display: inline-box» для страниц, которым необходимо поддерживать IE9.
Поддержка рендеринга на стороне сервера (SSR) через отдельные файлы CSS.
Хотя Flicking v3 также позволяет использовать рендеринг на стороне сервера в таких средах, как Nuxt и Next, Flicking v3 использует метод размещения панелей на основе «позиция: абсолютное», что может привести к тому, что панели будут складываться вертикально перед гидратацией. Поэтому в Flicking v3 пользователю приходилось создавать отдельный CSS для применения перед рендерингом.
Flicking v4 предоставляет файлы CSS в дополнение к файлам компонентов js. Помимо возможности поддерживать пользовательский интерфейс до и после гидратации в среде SSR, разработчики разметки и сценариев могут совместно использовать один и тот же пользовательский интерфейс до и после монтирования сценария компонента.
Больше и проще настройка
Когда мы распространяли Flicking v4, мы также обновили документацию и демонстрационную страницу. Поскольку существующая версия Flicking v3 предоставляла документы API только для Flicking и Panel, детальная настройка была затруднена. Кроме того, несмотря на поддержку таких фреймворков, как React, Angular и Vue, не было соответствующих руководств, что приводило к постоянным запросам о том, как их использовать.
Flicking v4 улучшил это, добавив учебные пособия, чтобы проверить, как использовать каждую платформу, и включая документы API внутренних компонентов, которые можно использовать для создания пользовательских плагинов или UX.
Кроме того, геттер/установщик устанавливается для каждой опции в Flicking, поэтому вы можете сразу увидеть значение каждой опции, установленной в данный момент в Flicking, и вы можете легко изменить эту опцию.
Поддержка Vue3
Мы также выпустили @egjs/vue3-flicking на основе Flicking v4. Для тех, кто использует Vue2, используйте существующий @egjs/vue-flicking, а для тех, кто использует Vue3, используйте vue3-flicking.
Другие существующие фреймворки (React, Angular, Preact) по-прежнему поддерживаются, а другие фреймворки, такие как Svelte, будут поддерживаться в дальнейшем.
Поддерживает два новых плагина
В Flicking v4 вы можете использовать два новых плагина Arrow и Pagination, которые очень просили.
Стрелка
Он поддерживает 3 основных пользовательского интерфейса и может быть настроен с помощью CSS.
Пагинация
Он поддерживает 3 типа и может быть настроен с помощью параметра рендеринга и CSS.
Пожалуйста, посетите страницу Плагины для получения подробных опций и инструкций!
Также мы добавили новые удобные опции/события, такие как «preventClickOnDrag» или «reachEdge».
Flicking v4 значительно улучшился, основываясь на мнениях и проблемах пользователей, чтобы упростить его использование. Кроме того, мы также работаем над e2e-тестированием, которое проверяет отдельные тесты на всех фреймворках, чтобы создать более надежную библиотеку.
Как написано в нашей дорожной карте, мы продолжим предоставлять больше функциональности за счет постоянного улучшения. Если вы предложите какие-либо неудобства или необходимые функции во время использования, будет очень полезно развивать библиотеку, поэтому я был бы признателен, если бы вы могли оставить вопрос.
Ваш ⭐️ имеет для нас большую силу. 🙏
