Или «Что я узнал, строя свою собственную карусель».

Карусели, слайд-шоу или просто слайдер. Этот вездесущий компонент пользовательского интерфейса заслужил свое место в веб-дизайне, и поэтому существует множество внедрений в различных технологиях.

Вы обнаружите, что Vue.js ничем не отличается.

Но!

Перед тем, как вы npm install yet-another-dependency, я умоляю вас рассмотреть возможности, уже имеющиеся в вашем распоряжении, в рамках нестандартного проекта Vue.

Входить…

transition-group

Те, кто пришел из React, могут быть знакомы с концепцией переходной группы. Вместо того, чтобы быть надстройкой, transition-group (к лучшему или худшему) предварительно упакован с Vue, и действительно, богатый API перехода доступен сразу после новой установки.

Для тех, кто не знаком, transition-group похож на компонент-оболочку transition - оба позволяют анимацию удаления, добавления и (в случае переходной группы) перемещение элементов внутри себя. .

Мы углубимся в thetransition-group через минуту, но сначала давайте представим и отдадим дань уважения тому, что делает создание собственной карусели ЛЕГКИМ.

FLIP и Freedom (из другого пакета)

Итак, что делает карусель? У вас есть большой элемент (обычно изображение), который скользит в фокусе (или просматривает) и выходит из него. Проще говоря, плавное перемещение одного элемента в другое, возможно, самая важная часть. Если вы обнюхаете раздел перехода в документации Vue, вы увидите довольно шикарную анимацию.

Согласно документам…

Это может показаться волшебством, но под капотом Vue использует простую технику анимации, называемую FLIP, для плавного перехода элементов из их старого положения в новое положение с помощью преобразований.

И это наш билет на землю одной меньше. Встроенная технология FLIP уже дает нам хлеб с маслом того, что делает карусель каруселью!

Заявитель!

Прежде чем мы начнем, я хотел бы выделить слово простой в названии.

Мы говорим о двухмерной карусели. Тот, который будет немедленно распознан любым текущим пользователем w ide w eb. Ничем не отличается от этой карусели начальной загрузки, найденной здесь.

Здесь нет наворотов, и мы не реализуем функцию сенсорного слайда. В этой статье просто излагается потенциальная основа для карусели.

С этим в стороне ...

Начало работы

Чтобы начать работу быстро, мы добавим в наш терминал Rad чит-коды AKA, используя официально поддерживаемый инструмент для создания лесов Vue. .

Шаблон webpack-simple особенно полезен для быстрых прототипов и как таковой идеален для начала работы.

Когда мы начнем и начнем, мы начнем с App.vue

Так мило. Хорошо, давайте удалим это и начнем заново.

И измените app.js соответственно…

И теперь мы начали все сначала:

Ок, отлично.

‹Template› ‹/template›

В нашем Carousel.vue файле мы можем добавить такую ​​разметку:

И, возможно, теперь вы очень хорошо это сделали.

Наш ключевой игрок, transition-group, имеет свойство tag, позволяющее нам отображать его как div (а не как span по умолчанию). Мы также даем ему имя класса и аккуратно помещаем в него наш slide div.

Используя директиву v-for на слайде, мы выполняем рендеринг реактивного списка и обязательно передаем :key для каждого слайда, чтобы Vue мог отслеживать каждый узел. Проще говоря, каждый слайд будет отображать title с использованием {{ slide.title }} внутри h4 элемента.

Следуя за мясом и картофелем, мы добавляем некоторые элементы управления, чтобы эта штука прокручивалась.

Вот и все, что касается разметки!

‹Script› ‹/script›

Мы довольно легко действуем и в отношении «сценариев». Здесь мы предоставляем простой список объектов в data и всего два метода: next и previous. Этот код просто сдвигает и оборачивает список влево (следующий) или вправо (предыдущий).

Вы заметите, что мы используем методы, которые изменяют массив на месте (shift и pop), а также метод, который возвращает совершенно новый массив (concat). Из-за этого мы полностью заменяем массив slides, с которым, к счастью, Vue отлично справляется.

На этом этапе, если мы запустим:

npm run dev

Как видите, у нас очень скучный список.

Большая часть работы, которую мы будем делать, будет…

‹Style› ‹/style›

Вы заметите, что мы установили ширину .carousel примерно равной размеру одного слайда, чтобы создать «область просмотра» карусели вместе с overflow: hidden.

В основном у нас здесь нефункциональный стиль, за исключением двух важных частей:

  1. transition: transform 0.3s ease-in-out; Это сообщает реализации FLIP Vue, как анимировать при перемещении элементов.
  2. .slide:first-of-type и .slide:last-of-type они позволяют скрыть последний и первый элемент при смещении массива влево или вправо, иначе мы увидим, как они летают (что довольно забавно, но не является правильной функцией карусели).

Вот и все!

Заключение

Мы быстро собрали один из самых распространенных элементов пользовательского интерфейса в Интернете практически в кратчайшие сроки благодаря реализации FLIP в группе перехода Vue.

Это может быть не самая крутая карусель или самая яркая, но она выполняет свою работу, и всегда есть удовлетворение от создания собственной карусели, не раздувая свой node-modules больше, чем должно быть.

Если у вас есть предложения по улучшению этого подхода или какие-либо отзывы, я хотел бы их услышать!

Вы можете найти код этого проекта ЗДЕСЬ, а код карусели для кошек в начале этой статьи можно найти ЗДЕСЬ