Описание

Пишем плагин. Создание кастомного слайдера для jQuery.

Структура проекта

Общая структура проекта представлена ниже:

.
├── dist                 - папка, куда будет собираться проект
├─┬ src                  - папка с исходниками проекта
│ ├─┬ html               - папка заготовок HTML страниц
│ │ ├── includes         - папка с встраиваемыми шаблонами (header, footer)
│ │ └── views            - папка с самими HTML страницами
│ ├── img                - папка с общими изображениями (логотип, иконки и др.)
│ ├── js                 - папка с JavaScript файлами
│ └── scss               - папка с SСSS файлами
├── package.json         - файл настроек Node.js
└── webpack.config.js    - файл настроек Webpack

Сборка

npm install установка зависимостей

npm run dev произойдет сборка проекта (css и html файлы потом также будут собираться этой командой), и в папке /dist/js появятся файлы bundle.js и bundle.js.map.

npm run build также произойдет сборка проекта, но уже итоговая (с оптимизацией, максимальной минимизацией файла), которую можно выкладывать на хостинг.

npm run watch запускается режим автоматического просмотра изменений файлов проекта с автоматическим допостроением измененных файлов.

npm run start запустится локальный сервер, который запустит html страницу и также будет отслеживать изменения в файлах.

Инициализация

$('your_elem').customSlider();

Параметры

nav навигация в виде стрелочек (1 - default, 0 - скрыть)

dots навигация в виде точек (1 - default, 0 - скрыть)