Инструкция по работе с HTML-модулем ANT085_SLIDER

1. Начало работы:

Прежде всего, у Вас уже должна быть распакована обертка шаблона. Данный модуль будет интегрироваться Вами вручную.

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

Также подразумевается, что Вы владеете базовыми навыками HTML и CSS - на уровне копирования разметки и стилей, т. п.

Важно! Подключаемые стили и скрипты не должны повторяться в основном шаблоне!

Для комфортной работы с модулем рекомендуем использовать редактор Visual Studio Code.

1.1 Структура модуля

Модуль имеет следующую структуру файлов и папок:

• css - стили модуля;
  • ant085_slider.css - стили, относящиеся только к модулю;
  • bootstrap.min.css - стили Bootstrap;
  • style.css - стили общего шаблона.
  • owl.carousel.min.css - стили плагина.
  • ajax-loader.gif - медиа плагина.
  • owl.video.play.png - медиа плагина.
• img - медиа модуля;
• js - скрипты модуля;
  • ant085_slider.js - JS-скрипты, относящиеся только к модулю;
  • owl.carousel.min.js - плагин модуля;
  • bootstrap.min.js - скрипты Bootstrap;
  • jquery.js - библиотека jQuery;
  • jquery-migrate.min.js - необходимые компоненты jQuery.
• index.html - базовое представление модуля;
• full.html - представление модуля рядом с другими секциями сайта;

1.2 С чем будем работать

Нам потребуются только те элементы, которые касаются конкретно самого модуля. То есть, следующие файлы мы НЕ трогаем:

• ./css/bootstrap.min.css
• ./css/style.css
• ./js/bootstrap.min.js
• ./js/jquery.js
• ./js/jquery-migrate.min.js

Данные файлы уже включены в основной шаблон и здесь приведены в качестве коробки.

Если Вы еще не скачали обертку шаблона, то самое время сделать это прямо сейчас!

Откройте скачанный архив обертки шаблона. Обертка шаблона представляется в двух вариантах:

• clear template - полностью чистая обертка. Начните добавлять модули с нуля.
• default template - шаблон, в который уже включены модули по умолчанию. Глядя на этот пример, вы сможете добавлять модули, как по образцу.

В архиве обертки шаблона Вы также найдете подробное руководство, которое рекомендуется к прочтению.

Итак, предположим, что мы выбрали вариант default template. В нем уже присутствуют стандартные модули. Они отлично подходят для того, чтобы разобраться, как подключать модули.

1.2 Подключение модулей в шаблон

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

1. Скопируйте файлы:
   • ant085_slider/css/ant085_slider.css
   • ant085_slider/css/owl.carousel.min.css
   • ant085_slider/css/ajax-loader.gif
   • ant085_slider/css/owl.video.play.png
   в директорию default template/css
2. Скопируйте содержимое папки ant085_slider/img в default template/img
3. Скопируйте файл ant085_slider/js/ant085_slider.js в default template/js
4. Скопируйте файл ant085_slider/js/owl.carousel.min.js в default template/js
5. Откройте файл ant085_slider/index.html в редакторе VS Code, выделите и скопируйте строки с 34 по 83, т.е., содержимое тега main
6. Откройте HTML-файл шаблона в редакторе VS Code, где необходимо использовать модуль, в данном случае это default template/index.html и вставьте скопированную разметку внутрь тега main:
   
7. В этом же файле, в теге head, подключите стили модуля:
   
8. В этом же файле, перед закрытие тега body, подключите скрипты модуля:
   
9. Готово! Модуль подключен к Вашему шаблону.

Важно! Подключаемые стили и скрипты не должны повторяться в основном шаблоне!

Модуль должен отображаться точно так же, как Вы это видите в онлайн-конструкторе.

Если Вы обнаружили ошибки или недоработки в шаблоне и его модулях, обращайтесь в нашу техническую поддержку.