Карусель сообщений для блога с использованием HTML CSS JS

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

Обычно эти разделы записей в блоге остаются неизменными. Если мы используем карусель owl, чтобы сделать раздел owl похожим на карусель, что, если мы используем ее, чтобы сделать остальную часть записи похожей на слайд-шоу? Что ж, звучит неплохо, не так ли?

Мы собираемся создать слайдер carousel, который вы сможете использовать непосредственно в своем проекте. Если вы хотите собрать исходный код, мы рекомендуем вам один раз посмотреть видео. С этим вы сможете лучше понимать код.

Фреймворк, который мы использовали для ограничения нашей работы, называется bootstrap framework. Фреймворк избавил нас от многих вещей. Первое, что мы сделали, это использовали заголовок раздела для проекта.

Для каждого отдельного поста мы использовали изображение, заголовок поста и область значков, где указаны имя администратора поста и дата. Под случайным добавленным текстом была добавлена кнопка с призывом к действию. На данный момент было размещено шесть сообщений. Для использования owl carousel требуется добавить класс с именем 'owl-carousel' в родительский div.

Вы можете посмотреть видео выше, чтобы оформить элементы каждой записи. Код для owl carousel был реализован в конце проекта. Возможно создать отдельный файл для кода js, но ради этого проекта мы добавили его в HTML-файл. Вы можете изменить внешний вид карусели на устройствах меньшего размера с помощью кода инициализации.

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

Если у вас возникнут какие-либо проблемы при создании этого кода, вы можете скачать исходный код, нажав на кнопку скачать. Кроме того, оставляйте свои вопросы, предложения и отзывы в комментариях ниже.