Frontender`s Spectre - бот Telegram, который собирает контент для фронтенд-разработчиков в одном месте. Бесплатно.
карусль на vue.js

Vue Carousel 3d — красивый и адаптивный 3D слайдер на Vue.js

Новый 3D слайдер (карусель) с идеальной анимацией, высокой производительностью и полной поддержкой мобильных устройства. Для Vue.js.

Vue.js является прогрессивным фреймворком JavaScript для решения современных задач, касательно пользовательского интерфейса. Основной особенностью данной библиотеки можно считать возможность постепенного внедрения в определенный проект. Так что, если Вы используете другие фреймворки, то переживать о конфликтах не стоит.

Итак, исходя из демонстрации плагина Vue Carousel 3d можно сделать вывод, что свою функцию он выполняет на отлично: мы имеем адаптивный, кроссбраузерный 3Д слайдер для сайта с отличной производительностью на любому устройстве.

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

Подключаем необходимые скрипты

<script src="/vue-carousel-3d/js/vue.js"></script>
<script src="/vue-carousel-3d/js/vue-carousel-3d.min.js"></script>

Структура HTML будет выглядеть так

<carousel-3d>
  <slide :index="0">
    Slide 1 Content
  </slide>
  <slide :index="1">
    Slide 2 Content
  </slide>
</carousel-3d>

И задаем параметры скрипта

new Vue({
  el: '#example',
  data: {
    slides: 7
  },
  components: {
    'carousel-3d': Carousel3d.Carousel3d,
    'slide': Carousel3d.Slide
  }
})

На странице демонстрации Вы сможете найти несколько примеров, которые показывают различный варианты использование плагина. Также рекомендуем ознакомиться с информацией об API. Скачать файлы библиотеки можно по ссылке выше.