Vuetify Carousel -  карусель-слайдер
  • 2057

Делаем на vue.js карусель-слайдер изображений с помощью Vuetify Carousel

Автор: admin | 24 декабря (Пн.) 2018г. в 21ч.30м.

Итак, в данном уроке я покажу как на vue.js сделать слайдер картинок. Для этого кроме самого Vue нам понадобится Vuetify. Что такое Vuetify можно почитать на сайте данного фреймворка Vuetify. Я же от себя могу сказать, что это набор готовых компонентов, разработанных на vue.js. Это что-то типа bootstrap, только весь клиентский код сделан на компонентах vue в стиле flat design.
Итак, нам понадобится vue.js и Vuetify. Подключаем соответствующие скрипты и стили с помощью CDN или npm и Node.js:

Cdn подключение vue и vuetify

<!DOCTYPE html>
<html>
<head>
  <link href='https://fonts.googleapis.com/css?family=Roboto:100,300,400,500,700,900|Material+Icons' rel="stylesheet">
  <link href="https://cdn.jsdelivr.net/npm/vuetify/dist/vuetify.min.css" rel="stylesheet">
  <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no, minimal-ui">
</head>
<body>
  <div id="app">
    <v-app>
      <v-content>
        <v-container>Hello world</v-container>
      </v-content>
    </v-app>
  </div>
 
  <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
  <script src="https://cdn.jsdelivr.net/npm/vuetify/dist/vuetify.js"></script>
  <script>
    new Vue({ el: '#app' })
  </script>
</body>
</html>​

Подключение с помощью npm в консоли из папки приложения

# последняя стабильная версия vue
$ npm install vue​

#Установим инструмент коммандной строки vue cli
npm install -g @vue/cli
# ИЛИ
yarn global add @vue/cli

#Устанавливаем vuetify
vue init vuetifyjs/webpack my-app

#Далее переходим в консоли в папку проекта
cd ./my-app

#Выполняем следующие комманды
cd demo-app
npm install
npm run dev
Подробнее о способах и шагах установки читайте в доках vuetify и vue 

Установка слайдера.

На сайте Vuetify хорошая документация и навигация. Для того, чтобы добраться до описания установки слайдера, нужно перейти в меню UI components / сarousel На данной странице содержатся примеры слайдеров и примеры кода, с помощью которого мы можем разместить данные компоненты у себя на сайте. Также в виде таблицы тут представлены различные настройки компонента карусели картинок. Вот так можно подключить карусель к нашей html странице:
<!DOCTYPE html>
<html>
<head>
  <link href='https://fonts.googleapis.com/css?family=Roboto:100,300,400,500,700,900|Material+Icons' rel="stylesheet">
  <link href="https://cdn.jsdelivr.net/npm/vuetify/dist/vuetify.min.css" rel="stylesheet">
  <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no, minimal-ui">
</head>
<body>
  <div id="app">
    <v-app>
      <v-content>
        <v-container>Карусель с vuetify</v-container>

        <v-carousel>
            <v-carousel-item
                v-for="(item,i) in items"
                :key="i"
                :src="item.src"
            ></v-carousel-item>
        </v-carousel>

      </v-content>
    </v-app>
  </div>
 
  <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
  <script src="https://cdn.jsdelivr.net/npm/vuetify/dist/vuetify.js"></script>
  <script>
    new Vue({ 
        el: '#app',
        data: {

//Набор картинок
            items: [
                {
                    src: 'https://cdn.vuetifyjs.com/images/carousel/squirrel.jpg'
                },
                {
                    src: 'https://cdn.vuetifyjs.com/images/carousel/sky.jpg'
                },
                {
                    src: 'https://cdn.vuetifyjs.com/images/carousel/bird.jpg'
                },
                {
                    src: 'https://cdn.vuetifyjs.com/images/carousel/planet.jpg'
                }
            ]
    }
 })
  </script>
</body>
</html>​
Вот так просто у нас на сайте можно подключить карусель картинок.
Конечно скорее всего слайдер нужно будет кастомизировать под свои нужды. Можно настроить слайдер с помощью установки параметров в компоненты. Например, так можно изменить эффект переходов слайдов на fade:
<v-carousel>

<!-- 
    Добавляем эффекты для переходов слайдов
    transition="fade-transition"
        
-->
  <v-carousel-item
     v-for="(item,i) in items"
     :key="i"
     :src="item.src"
     transition="fade-transition"
  ></v-carousel-item>
</v-carousel>​
Меняем интервал для смены слайда на 1 секунду (по умолчанию стоит 6 секунд):
<v-carousel
interval=1000
>
  <v-carousel-item
     v-for="(item,i) in items"
        :key="i"
        :src="item.src"
        transition="fade-transition"
  ></v-carousel-item>
</v-carousel>​
Можно изменить тему предстваления слайдера. Есть светлая и темная тема. Регулируется с помощью свойства :light=false или true
В примере ниже я показал и другие настройки для примера.
<v-carousel
:interval=1000 //слайды меняются каждую секунду
:light=true //темная тема
:reverse=true //направление смещения слайдов
:vertical=true //устанавливает вертикальное направление смещения слайдов. С fade-transition работает не корректно
:multiple=false //делает картинку статичной. Перемещение слайдов заблокировано
>
<v-carousel-item
    v-for="(item,i) in items"
    :key="i"
    :src="item.src"
    //transition="fade-transition"//scale-transition или другие. Подробнее на https://vuetifyjs.com/en/motion/transitions
></v-carousel-item>
</v-carousel>​
Так с помощью опций можно изменять внешний вид и функционал слайдера. Рекомендую ознакомиться с остальными опциями и испытать их на практике. Ну а на этом все.

Приветствую!

Меня зовут Сергей. Я - автор этого блога.

Если Вам был полезен материал на моем сайте, поддержите пожалуйста мой проект, чтобы о нем узнали другие люди - кликните plizz :) на иконку в соц. сети, чтобы поделиться материалом с другими.