Простой слайдер картинок для Angular 8 через innerHTML

В этом посте ты не увидишь специальных плагинов, которые ты должен будешь установить через NPM или Yarn.

В общем дело в чем, буквально недавно у меня возникла задача добавить на сайт простой слайдер. Сайт естественно написан на Angular и вот тут первое что пришло в голову это поставить плагин.

В основном все слайдеры которые ты можешь найти в интернете работают более менее одинаково. Отличается лишь реализация ну и несколько разных фич, типа анимация и так дальше. Но все существующие мне не подходили по нескольким причинам:

  • Они не работают через innerHtml, а вот тот самый проект так и работает
  • Обязательно вставлять свою директиву для того чтобы инициализировать слайдер – из первого вытекает сложность второго.
  • Следовательно, такие слайдеры тяжело делать в контенте через админку.

Сайт имеет несколько простых свойств – это простой блог, фронтенд которого сделан на Angular. Все данные берутся из бекенда, ну а попадают туда они через отдельно написанную admin панель.

Эта панель так же написана на Angular, а добавляются статьи в нее через CKEditor 4. Ну в общем очень простой аналог WordPress.

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

Идея такая, что мы добавляем картинки в CKEditor, а после обворачиваем это все каким-то тегом, с определенным классом.

Так и получается очень простой слайдер для Angular.

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

Была у меня идея реализовать подобие видимых кнопок, через которые можно переключать слайды. Я думал сделать это с помощью before и after (их цель просто быть видимыми).

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

Если тебе понравилась этот небольшой пост о простом слайдере для Angular, не забудь поделиться этой статьей, так ты поможешь развитию блога.

Тема Angular очень интересна, так почему бы тебе не подписаться? Я буду каждый раз когда я буду выпускать на эту тему что-то новое, ты будешь об этом знать первый!

Каждый раз когда я буду делать новый урок по Angular я буду присылать емейл извещение - спасить лишним не собираюсь!

Оставьте комментарий