Экзамен в «облаках»
Как в Johnson & Johnson в 5 раз ускорили аттестацию сотрудников
image/svg+xml image/svg+xml image/svg+xmlimage/svg+xmlimage/svg+xml Как сделать слайдер в электронном курсеКак сделать слайдер в электронном курсеКак сделать слайдер в электронном курсеКак сделать слайдер в электронном курсеКак сделать слайдер в электронном курсеКак сделать слайдер в электронном курсеКак сделать слайдер в электронном курсеКак сделать слайдер в электронном курсе

Чтобы электронный курс был интереснее, разработчики добавляют в него элементы игры, спецэффекты и анимации. В своих проектах я часто использую такую механику, как слайдер. Он помогает сравнить две фотографии по формату «было/стало» и наглядно показать разницу между ними.

Например, слайдер показывает в сравнении улицу до и после ремонта

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

Чтобы сделать слайдер, опытные разработчики обычно пишут код и вручную адаптируют заготовку под разные размеры экрана. Я расскажу, как сократить этот путь и создать интерактивный слайд в iSpring Suite за пять минут без навыков программирования. Вот какой слайдер мы сделаем:

1. Скачиваем шаблон слайдера

Чтобы вы не погрязли в технических тонкостях HTML-языка, я написал универсальный шаблон — с его помощью вы соберете слайдер под любую задачу. Скачайте архив и распакуйте на компьютере.

Визуально шаблон выглядит как простая компьютерная папка с файлами

2. Добавляем в шаблон картинки

Для слайдера понадобятся две картинки. Формат может быть любой, а вот размер одинаковый. Максимально допустимый: 1280×720. Изображения с большим разрешением не вместятся в слайдер целиком.

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

  • before — названия для фотографии «Было»
  • after — название для фотографии «Стало»

Копируем готовые картинки в папку img из шаблона слайдера и смотрим, что получилось:

3. Добавляем слайдер в курс

Чтобы слайдер заработал, загрузим его в курс как веб-объект. Для этого откройте панель инструментов iSpring Suite и выберите вкладку Web.

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

Здесь же можно задать размер будущей интерактивности: показать её во весь слайд или установить произвольные пропорции.

Слайдер готов. Он автоматически подстроится под любой размер экрана — его приятно разглядывать даже с телефона. Чтобы насладиться результатом, нажмите Просмотр на панели инструментов.

Заготовка слайдера подойдет для любой версии iSpring Suite. Используйте её в работе и создавайте крутые электронные курсы. Успехов!

Редактор онлайн-курсов iSpring Suite

Легко создавайте электронные учебные материалы: курсы, тесты, видеолекции, тренажеры и скринкасты.

 
iSpring Learn
Быстрый запуск онлайн‑обучения в бизнесе за 3 простых шага
  • Создайте аккаунт
  • Загрузите учебные материалы
  • Назначьте курсы сотрудникам