Hello developers, today in this blog, you'll learn to create a Hero Section Slider using HTML, CSS & JavaScript.
A hero section is a full-screen section that consists of a background image, video, illustrations, or animations, with some. The hero section is a website design term that is used to describe an oversized banner image at the top of a website that usually extends full width. Slider or slideshow commonly shows one large image, that gets automatically and also manually forward and backward, allowing you to click on the forward and backward buttons.
A hero section should consist of a title, a short description, a high-quality image or video which will slide manually and also automatically. Hero images are used to catch the visitor's attention and draw them into reading the article on the page.
In this blog (Hero Section Slider), there is a title, and there is a high-quality background image. The background image is in full screen, that is it occupies the full screen of the device.
The source code of this Hero Section Slider is given below, if you want the source code of this program, you can copy it. You can use this Hero Section Slider with your creativity and can take this project to the next level.
Hero Section Slider [Source Code]
To make this website, you would like to make three files: an HTML file, a CSS file & a JavaScript file. First, create an HTML file with the name of index.html and remember, you have to create a file with a .html extension.
*,
*::before,
*::after {
box-sizing: border-box;
}
html,
body {
padding: 0;
margin: 0;
background-color: #eee;
color: #fff;
font-family: sans-serif;
}
.slide {
text-decoration: none;
color: inherit;
}
.slide-btn {
display: none;
}
.carousel {
position: relative;
width: 100%;
height: 100vh;
overflow: hidden;
}
.carousel h1 {
text-align: center;
margin: 0 auto;
line-height: 75vh;
font-size: 10vmin;
}
.slide {
float: left;
height: 100%;
width: 0;
transition: width .3s linear;
padding: 0;
overflow: hidden;
white-space: nowrap;
}
.slide > * {
transition: transform .15s linear;
transform: scale(0);
}
.labels {
position: absolute;
bottom: 0;
width: 100%;
text-align: center;
}
.labels label {
display: inline-block;
background-color: transparent;
width: 15px;
height: 15px;
border-radius: 15px;
margin: .5vmin 2vmin;
border: 3px solid white;
}
.carousel .one,
.carousel .two,
.carousel .three,
.carousel .four,
.carousel .five {
background-position: center center;
background-size: cover;
}
.carousel .one {
background-image: url(https://cdn.pixabay.com/photo/2016/10/14/19/21/canyon-1740973__340.jpg);
}
.carousel .two {
background-image: url(https://cdn.pixabay.com/photo/2018/05/30/00/24/thunderstorm-3440450__340.jpg);
}
.carousel .three {
background-image: url(https://cdn.pixabay.com/photo/2016/08/09/21/54/lake-1581879__340.jpg);
}
.carousel .four {
background-image: url(https://cdn.pixabay.com/photo/2021/09/20/21/32/lake-6641880__340.jpg);
}
.carousel .five {
background-image: url(https://cdn.pixabay.com/photo/2015/04/23/22/00/tree-736885__480.jpg);
}
#slide-btn-1:checked ~ .one,
#slide-btn-2:checked ~ .two,
#slide-btn-3:checked ~ .three,
#slide-btn-4:checked ~ .four,
#slide-btn-5:checked ~ .five {
width: 100%;
}
#slide-btn-1:checked ~ .one > *,
#slide-btn-2:checked ~ .two > *,
#slide-btn-3:checked ~ .three > *,
#slide-btn-4:checked ~ .four > *,
#slide-btn-5:checked ~ .five > * {
transform: scale(1);
}
#slide-btn-1:checked ~ .labels label[for="slide-btn-1"],
#slide-btn-2:checked ~ .labels label[for="slide-btn-2"],
#slide-btn-3:checked ~ .labels label[for="slide-btn-3"],
#slide-btn-4:checked ~ .labels label[for="slide-btn-4"],
#slide-btn-5:checked ~ .labels label[for="slide-btn-5"] {
background-color: white;
}
.credit{
text-align: center;
color: #fff;
margin-top: 10px;
font-family: 'Trebuchet MS', 'Lucida Sans Unicode', 'Lucida Grande', 'Lucida Sans', Arial, sans-serif;
}
.credit a{
text-decoration: none;
color:#fff;
font-weight: bold;
}
var int;
function setInt() {
clearInterval(int);
int = setInterval(function() {
var btns = document.getElementsByName("carousel");
for(var i = 0; i < btns.length; i++) {
if(btns[i].checked) {
btns[i].checked = false;
if(i + 1 == btns.length) {
btns[0].checked = true;
}
else {
btns[i + 1].checked = true;
}
return;
}
}
}, 5000);
}
setInt();
Thank you for reading our blog. If you face any problem in creating this Hero Section Slider using HTML, CSS & JavaScript, then contact us or comment us. We’ll try to provide a solution to your problem as soon as possible.
Post a Comment
Thank you
Learning robo team