Blog Post Carousel using HTML CSS JS

Almost every well-reputed website has got a blog site that is linked to its main website. On the main website, we find a small sample of the articles that are found on the blog site. Normally these blog post sections remain still. If we use an owl carousel to make the owl section look like a carousel, what if we use it to make the rest of the post look like a slideshow? Well, sounds good, right? We are going to make a carousel Slider that you can use directly in your project. If you want to collect the source code, we recommend you watch the below video once. You will be able to understand the code better with this. Regular videos on front-end developments are uploaded by us. If you want to learn more about front-end web development, you can subscribe to our YouTube channel.

I hope you watched the video to understand how the project was done. The framework we used to limit our work is called the bootstrap framework. The framework has saved us from using a lot of things. The first thing we did was use a section heading for the project. For every single post, we have used an image, a post title, and an icon area where the post admin name and date are given. There was a call-to-action button added underneath the random text that was added. Six posts have been taken so far. Adding a class called 'owl-carousel' to the parent div is required to use the owl carousel. You can watch the above video to style the elements of every post. The code for the owl carousel was implemented at the end of the project. It is possible to create a separate file for the js code, but for the sake of this project, we have added it to the HTML file. You can change how the carousel looks on smaller devices with the initiation code. One post will appear at a time for the smaller devices as a result of the customization we have done. For the larger devices, there will be three posts and for the medium devices, there will be two posts. You can also control the speed of the carousel here.

You may also like:

Blog Post Carousel using HTML CSS JS [ Source Code ]:

The first thing you need to do is create two files, one for HTML and one for CSS. External CSS should be added to your web pages. Adding bootstrap and owl carousel files will help your project work. After that, copy the code provided in the code below box and paste it into your project. You can get the source code from the below download button if the code doesn't work.

ADD HTML:

<!DOCTYPE html>
<html lang="en">
<!--divinectorweb.com-->
<head>
    <meta charset="UTF-8">
    <title>How To Create Post Carousel Slider using HTML CSS JavaScript</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 -->
		
		<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>
</body>
</html>

ADD CSS:

.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;
}

I hope the code was implemented well. We publish free source codes for everyone so you can return often. You can reach people who are similar to you by sharing the articles on the website. We appreciate your visit to our website.

DOWNLOAD CODE

Blog Post Carousel using HTML CSS JS [ Source Code ]:

Post a Comment

Post a Comment

About Us

Contact Form

Blog Post Carousel using HTML CSS JS

Blog Post Carousel using HTML CSS JS [ Source Code ]:

You might like

Post a Comment

Post a Comment

Contact Form