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

V.I.P ЭКСКЛЮЗИВ
boosty.to/monster-tem

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

MonsterTem.ru » Слайдеры и Карусели » Карусель сообщений для блога с использованием HTML CSS JavaScript

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

15.10.2024

11 просмтотров

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

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

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

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

В архиве находится:

Все демонстрационные изображения
Исходные файлы HTML
Исходные файлы CSS
Исходные файлы jаvascript
Иконки шрифтов
Файлы библиотеки и плагинов

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

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

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

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

Исходный код:

Первое, что вам нужно сделать, это создать два файла, один для HTML и один для CSS. На ваши веб-страницы следует добавить внешний CSS. Добавление файлов bootstrap и owl carousel поможет вашему проекту работать. После этого скопируйте код, приведенный в поле code ниже, и вставьте его в свой проект.

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

HTML КОД:

<!DOCTYPE html>
<html lang="en">
<!--divinectorweb.com-->
<head>
<meta charset="UTF-8">
<title>How To Create Post Carousel Slider using HTML CSS jаvascript</title>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.2.1/assets/owl.carousel.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.2.1/assets/owl.theme.default.min.css">
<link rel="stylesheet" href="style.css">
</head>
<body>
<!-- START blog -->
<section id="blog_area" class="section_padding">
<div class="container">
<div class="section_heading text-center">
<h2>Our <span>blog</span></h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam <br/> ultrices sapien vel quam luctus pulvinar.</p>
</div>
<div class="row">
<div class="col-md-12">
<div class="blog_slider_area owl-carousel">
<div class="box-area">
<div class="single-blog">
<div class="post-img">
<img src="img/1.jpg" alt=""/>
</div>
<div class="single_blog">
<a href="#"><h3 class="post-title">Web Design Agency</h3></a>
<ul class="icon-area">
<li><i class="fa fa-users"></i>Admin</li>
<li><i class="fa fa-clock-o"></i>February 21,2022 </li>
</ul>
<p class="blog-text">
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard.
</p>
<div class="btn-area">
<a href="#" class="btn btn-default main_btn">read more</a>
</div>
</div>
</div>
</div>

<div class="box-area">
<div class="single-blog wow fadeInUp">
<div class="post-img">
<img src="img/2.jpg" alt=""/>
</div>
<div class="single_blog">
<a href="#"><h3 class="post-title">Web Design Agency</h3></a>
<ul class="icon-area">
<li><i class="fa fa-users"></i>Admin</li>
<li><i class="fa fa-clock-o"></i>February 21,2022 </li>
</ul>
<p class="blog-text">
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard.
</p>
<div class="btn-area">
<a href="#" class="btn btn-default main_btn">read more</a>
</div>
</div>
</div>
</div> <!-- END SINGLE blogS -->

<div class="box-area">
<div class="single-blog wow fadeInUp">
<div class="post-img">
<img src="img/3.jpg" alt=""/>
</div>
<div class="single_blog">
<a href="#"><h3 class="post-title">Web Design Agency</h3></a>
<ul class="icon-area">
<li><i class="fa fa-users"></i>Admin</li>
<li><i class="fa fa-clock-o"></i>February 21,2022 </li>
</ul>
<p class="blog-text">
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard.
</p>
<div class="btn-area">
<a href="#" class="btn btn-default main_btn">read more</a>
</div>
</div>
</div>
</div> <!-- END SINGLE blogS -->

<div class="box-area">
<div class="single-blog wow fadeInUp">
<div class="post-img">
<img src="img/4.jpg" alt=""/>
</div>
<div class="single_blog">
<a href="#"><h3 class="post-title">Web Design Agency</h3></a>
<ul class="icon-area">
<li><i class="fa fa-users"></i>Admin</li>
<li><i class="fa fa-clock-o"></i>February 21,2022 </li>
</ul>
<p class="blog-text">
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard.
</p>
<div class="btn-area">
<a href="#" class="btn btn-default main_btn">read more</a>
</div>
</div>
</div>
</div> <!-- END SINGLE blogS -->

<div class="box-area">
<div class="single-blog wow fadeInUp">
<div class="post-img">
<img src="img/5.jpg" alt=""/>
</div>
<div class="single_blog">
<a href="#"><h3 class="post-title">Web Design Agency</h3></a>
<ul class="icon-area">
<li><i class="fa fa-users"></i>Admin</li>
<li><i class="fa fa-clock-o"></i>February 21,2022 </li>
</ul>
<p class="blog-text">
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard.
</p>
<div class="btn-area">
<a href="#" class="btn btn-default main_btn">read more</a>
</div>
</div>
</div>
</div> <!-- END SINGLE blogS -->

<div class="box-area">
<div class="single-blog wow fadeInUp">
<div class="post-img">
<img src="img/6.jpg" alt=""/>
</div>
<div class="single_blog">
<a href="#"><h3 class="post-title">Web Design Agency</h3></a>
<ul class="icon-area">
<li><i class="fa fa-users"></i>Admin</li>
<li><i class="fa fa-clock-o"></i>February 21,2022 </li>
</ul>
<p class="blog-text">
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard.
</p>
<div class="btn-area">
<a href="#" class="btn btn-default main_btn">read more</a>
</div>
</div>
</div>
</div> <!-- END SINGLE blogS -->
</div>
</div>
</div>
</div>
</section>
<!-- END blog -->

</body>
</html>

CSS КОД:

<style>
.section_padding {
padding: 35px 0;
}
.section_heading {
margin-bottom: 30px;
}
.section_heading h2 {
color: #222;
font-size: 40px;
font-weight: 700;
margin-bottom: 25px;
line-height: 30px;
text-transform: uppercase;
}
.section_heading h2 span {
color: orangered;
}
.section_heading p {
font-size: 16px;
margin: 10px 0 5px;
}
.single-blog {
transition: all 0.30s ease 0s;
}
.single-blog:hover {
transform: translateY(-10px);
}
.single-blog .post-img {
position: relative;
}
.single-blog .post-img img {
max-width: 100%;
height: auto;
}
.single-blog .post-img:after {
content: "";
position: absolute;
width: 100%;
height: 100%;
top: 0;
left: 0;
opacity: 0;
background: rgba(255, 69, 0, 0.6);
transition: all 0.30s ease 0s;
}
.single-blog:hover .post-img:after {
opacity: 1;
}
.single-blog .single_blog {
border-top: none;
padding: 25px 20px 25px;
background: #fff;
position: relative;
}
.single-blog .post-title {
margin: 0 0 15px 0px;
font-size: 20px;
color: #333;
display: inline-block;
text-transform: capitalize;
transition: all 0.3s ease 0s;
}
.single-blog .blog-text {
font-size: 15px;
line-height: 23px;
margin: 7px 0 10px;
}
.icon-area {
list-style: none;
font-size: 14px;
padding: 0;
}
.icon-area>li {
display: inline-block;
margin-right: 5px;
color: #555;
font-style: italic;
}
.icon-area>li i {
color: orangered;
margin-right: 5px;
font-size: 14px;
}
.btn-area a {
background: linear-gradient(to right, #ff512f, #f09819);
font-size: 14px;
letter-spacing: 0.5px;
padding: 11px 22px;
margin: 10px 0px 10px;
border: none;
font-weight: 500;
color: #fff;
text-transform: capitalize;
transition: all 0.2s ease-in-out 0s;
}
</style>

jаvascript КОД:

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.2.1/owl.carousel.min.js"></script>

<script>
$(".blog_slider_area").owlCarousel({
autoplay: true,
slideSpeed:1000,
items : 3,
loop: true,
nav:false,
margin: 30,
dots: true,
responsive:{
320:{
items:1
},
767:{
items:2
},
600:{
items:2
},
1000:{
items:3
}
}

});
</script>

Скачать

Категории: Слайдеры и Карусели | Секции для сайта

MonsterTem.ru

V.I.P ЭКСКЛЮЗИВ
boosty.to/monster-tem