Abr@X@bra.ru
Слайдер на Vue.js

Слайдер на Vue.js

15.08.2017
2068

Расскажу как можно сделать эффектный слайдер на Vue.js за который не будет стыдно перед заказчиком.

Кто мы

Мы маленькая команда с большим багажом знаний в сфере создание web проектов под ключ.

Можем сделать вам сайт.  

О чем пойдет речь

Хочу уделить внимание front-end части. А точнее конкретному элементу, который присутствует почти на каждом сайте – это слайдер.

Готовых библиотек, с готовым наборам для того, чтобы его реализовать очень много. Но не все они коректно работаю, если работают.

Если перед нами стоит такая задача, реализовать слайдер на странице, мы не придумываем велосипед заново, а берем готовую библиотеку. Лично я почти всегда отдаю свое предпочтение в пользу - slick-carousel.

Данная библиотека существует довольно давно, много разных готовых пресетов, которые очень сильно облегчают работу подобного плана.

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


Через 1 - 1.5 сек, слайдер собирается в свое обычное состояние.


Этого времени вполне достаточно, чтобы испортить первое восприятие от сайта. Да и смотреть на это, при каждой загрузки страницы не очень радостно.

Оптимизация кода, картинок и т.д., тут бессильны. Вот так оно работает из коробки.

Структура и настройка проекта

В своей работе мы как все современные front-end чуваки, используем сборщики, Gulp, Webpack, Sass, Vue.js (раньше сидели на React.js), Nunjucks и т.д. Рассказывать про наш boilerplate пакет в этом посте не буду, вы можете его скачать с GitHub. Также ссылка для скачивание готового примера со слайдером, будет в конце статьи.

Данный пример буду делать с полного нуля с пошаговыми пояснениями.


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

npm install

После успешной установки, поставим библиотеку slick-carousel.

npm install slick-carousel --save

Также, чтобы сэкономить наше время на разработку разных плюшек, мы часто используем библиотеку для Vue.js – Element-ui

npm i element-ui --save

Так как мы любим Vue.js и лично нашей команде очень нравиться ее идеология и сам подход.  

Vue.js изначально идет в package.json так, что для дальнейшей работы, все инструменты у нас есть.

Запустим boilerplate

npm start

Решение проблемы

Весь наш слайдер, будет отдельным vue компонентом. Давайте его создадим.

src/js/components/slider-top.vue

Создадим новый файл по указанному пути выше и добавим стандартную разметку vue.


В тег template между двумя дивами, положим готовую верстку слайдера.


Далее создадим root модуль для нашего компонента main.js

src/js/components/main.js

В него сделаем импорт тех зависимостей которые нам нужны для его работы.

1 - Подключаем Vue.js

2 - Подключаем сам компонент

3 - Подключаем element-ui и его сразу вызываем, зачем он нужен расскажу дальше.     


Далее создаем сам рутовый компонент с ID - header и прокидываем в параметр components наш компонент - slider-top.vue


После чего, нужно сообщить файлу App.js, о существование нашего root файла main.j. App.js – это наш некий самый главный файл, в которого подключаются все родители vue или других библиотек которые используются в проекте, если они есть, так как после buld на выходе будет только один файл это – App.js

src/js/app.js

Также сделаем импорт slick-carousel и сразу вызовем ее.


Html файлы разбиты на куски с помощью html препроцессора Nunjucks, что дает нам еще больше удобства в нашей работе (кто не вкурсе про Nunjucks совету, ссылку на доки, оставил выше).

Вызывать vue компонент будем в файле _header.html

src/templates/partials/_header.html  

Оборачиваем тег вызова компонента app-slider-top его родителем который был создан ранее в файле.

src/js/components/main.js

Также я обернул тег еще одним дивом для стилизации в дальнейшем.

Вот, что должно получиться.


Добавлю ранее подготовленные стили в sass файл _header.sass который расположен:

src/sass/_header.sass


По сути после того, как html структура слайдера была помещена в компонент vue, раскладка слайдера уже пропала, так как отображение vue компонентов происходит после их полной загрузки. Для надежности я добавил на тег вызова компонента vue директиву v-cloak. Ее задача, не отображать компонент на страницы, пока они не будет загружен полностью.


Но тут же мы сталкиваемся сразу еще с одной проблемой, при загрузки странице в том месте где должен быть слайдер, несколько миллисекунд видно пустое место, так как в этот момент грузиться vue компонент и он в это время не отображается.

Чтобы пространство которое равно высоте слайдера не схлопнулось во время загрузки, можно добавить минимальную высоту данному блоку, через стили и повесить такой же background, что и на слайдере.


Этого по сути достаточно, результат получен. Но я предлагаю пойти еще немного дальше.    

Вернемся к файлу:

src/js/components/slider-top.vue

В нем я использую loading от библиотеке – element-ui. Чтобы он сработал в момент загрузки компонента, необходимо поместить директиву, которая будет оберткой над основной версткой:

v-loading.body="loading"


И в data, задать для него параметр.  


Но если все оставить так как есть, loading будет работать постоянно. Чего явно нам не нужно.

Создадим в теге script метод mounted, который вызывается сразу после того как экземпляр vue был смонтирован. И поместим в него функцию setTimeout, которая через 1 секунду будет выключать loading.


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

DEMO

Ссылка на репозиторий

Всем отличного настроения и успехов в том, что вы делаете!



Vue.js
Читайте также:
#1 Горячие ссылки за неделю по версии AbraXabra

#1 Горячие ссылки за неделю по версии AbraXabra

Публику свою личную подборку ссылок за неделю, которые показались лично мне интересны. Возможно, что кому-то данная подб...
Читать
CSS Grid, подробное руководство по гридам с примерами

CSS Grid, подробное руководство по гридам с примерами

Это руководство было создано как ресурс, который поможет вам лучше понять и изучить Grid CSS, и было организовано таким ...
Читать
Flexbox и как делать адаптивные сайты

Flexbox и как делать адаптивные сайты

Современный front-end разработчик активно должен уметь применять на практике различные инструменты, позволяющи...
Читать