How to Create a Full-Screen Carousel Slider

In this blog, we will share a snippet about How to Create a Full-Screen Carousel Slider using the Owl carousel 2 jquery slider plugin. Before collecting the source code watch the video tutorial below. Videos relating to front-end development can be found on our Youtube channel. If you like what you see, you can subscribe to the channel.

We hope you have watched the video tutorial. In this snippet, we have shown how to create a website homepage layout with an owl carousel in it. First, We have created a homepage layout that has a navbar, banner text, call-to-action button, etc. The Owl carousel slider is used as background in this homepage layout. Owl Carousel is a popular jQuery slider plugin that allows you to create beautiful and responsive carousels. It was created by a developer named David Deutch. This slider plugin supports almost all browsers. We start with three slides that make up a carousel. Each of those slides contains a headline, a subtitle, and two call-to-action buttons. For Initializing the Carousel we have used the default slider code from the owl carousel 2 plugin website. You can find the details in the video mentioned above.

You May Also Like:

How to Create a Full-Screen Carousel Slider [ Source Code ]:

The first thing you need to do is make two files. There are two files, one is an HTML and the other is a CSS. Attach the external CSS file to the HTML file. You can either link the CDN file or the downloaded version of the Owl Carousel Plugin, we used it in our snippet. Add the latest jquery file as well because the plugin is dependent on Jquery. After that, copy the code from the box below and paste it into your file. You can open the project in the browser and see if it works or not. If the code is not working then you should download the source code from the button below.

ADD HTML:

<!DOCTYPE html>
<html lang="en">
<!--divinectorweb.com-->
<head>
	<meta charset="UTF-8">
	<title>How to create a website Layout| Owl carousel full width image slider</title>
	<link href="https://fonts.googleapis.com/css2?family=Montserrat:wght@400;500&display=swap" rel="stylesheet">
	<link href="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.3.4/assets/owl.carousel.css" rel="stylesheet">
	<link href="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.3.4/assets/owl.theme.default.css" rel="stylesheet">
	<link href="style.css" rel="stylesheet">
</head>
<body>
	<div id="wrapper">
		<div class="owl-carousel" id="slider-area">
			<div style="background-image: url(img/1.jpg)"></div>
			<div style="background-image: url(img/2.jpg)"></div>
			<div style="background-image: url(img/3.jpg)"></div>
		</div>
		<div class="nav-area">
			<div class="nav">
				<a href="#">Home</a> 
				<a href="#">about</a> 
				<a href="#">portfolio</a> 
				<a href="#">services</a> 
				<a href="#">contact</a>
			</div>
		</div>
		<div class="slider-text">
			<h2>Creative <span>Agency</span></h2>
			<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Iusto, beatae.</p><a href="#">learn More</a> <a class="btn" href="#">Contact Us</a>
		</div>
	</div>
	<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.3.4/owl.carousel.min.js"></script> 
	<script>
	$('#slider-area').owlCarousel({
	   loop: true,
	   autoplay: true,
	   responsive: {
	       0: {
	           items: 1
	       },
	       600: {
	           items: 1
	       },
	       1000: {
	           items: 1
	       }
	   }
	})        
	</script>
</body>
</html>

ADD CSS:

body {
	margin: 0;
	padding: 0;
}
#wrapper {
	position: relative;
	height: 100vh;
}
#slider-area {
	position: absolute;
	height: 100vh;
	width: 100%;
	top: 0;
	left: 0;
	z-index: -1;
}
#slider-area::after {
	content: '';
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background: rgba(0, 0, 0, 0.8);
}
#slider-area .owl-item div {
	height: 100vh;
	width: 100%;
	background-repeat: no-repeat;
	-webkit-background-size: cover;
	background-size: cover;
	background-position: center center;
}
#wrapper #nav-area {
	position: absolute;
	top: 5%;
	left: 50%;
	text-align: center;
	z-index: 1;
}
.nav-area {
	text-align: center;
	padding: 26px 0;
}
.nav a {
	font-family: montserrat;
	text-decoration: none;
	color: #fff;
	text-transform: uppercase;
	font-size: 20px;
	margin: 0 15px;
	padding: 10px;
	transition: all .6s ease;
}
.nav a:hover {
	background: coral;
}
.slider-text {
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	text-align: center;
}
.slider-text h2 {
	font-family: montserrat;
	font-size: 55px;
	margin: 0;
	color: #fff;
	text-transform: uppercase;
}
.slider-text h2 span {
	color: coral;
}
.slider-text p {
	font-size: 18px;
	color: #fff;
}
.slider-text a {
	text-decoration: none;
	background: coral;
	color: #fff;
	display: inline-block;
	padding: 12px 45px;
	margin: 15px;
	text-transform: uppercase;
	font-family: montserrat;
	font-weight: 500;
	border: 2px solid #fff;
}
.slider-text a.btn {
	background-color: transparent;
}

We hope you have done a good job implementing the code. There are a lot of front-end-related snippets on our website. Clicking the "load more" button on the homepage will allow you to visit those. If you enjoy the articles and snippets on this website, please share them with other like-minded people. We want to thank you for visiting our website, we're glad you found it.

DOWNLOAD CODE

How to Create a Full-Screen Carousel Slider [ Source Code ]:

Post a Comment

Post a Comment

About Us

Contact Form

How to Create a Full-Screen Carousel Slider

How to Create a Full-Screen Carousel Slider [ Source Code ]:

You might like

Post a Comment

Post a Comment

Contact Form