Welcome to my website U-GINE MEDIA. In this website I teach tutorials and share source code on some programming (HTML, CSS & JavaScript) tutorials.
Before we get started, do well to subscribe to my channel to never miss out on any update that I post every single day.
In this tutorial topic "How To Make An Image Slider With Background Slideshow Using HTML CSS JavaScript", we will learn how to create it following these simple easy steps.
Share this to your programmer friends. If y'all learnt something today, make sure to let me in the comments.
If interested in watching the video before running the code below, you can click the play button to get started.
Code Begins
- First, create a folder with any name you like. Then, make the necessary files inside it.
- Create a file called index.html to serve as the main file.
- Create a file called style.css for the CSS code.
- Create a file called script.js for the JavaScript code.
- Go to Font Awesome and embed their cdnjs library link to your main file
- Finally, download the Images folder and put it in your project directory. This folder contains default showcase images for the website. You can also use your own images.
To start, add the following HTML codes to your index.html file. These codes include essential HTML markup with different semantic tags, such as div, form, input, button, image, etc., to build the website layout.
<!DOCTYPE html>
<html lang="en">
<head>
<link rel="stylesheet" href="index.css">
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Create A Website With Auto Image Slider</title>
</head>
<body>
<div class="container">
<div class="overlay"></div>
<!-- <div class="bg_image"><img src="white horse.jpg" alt=""></div> -->
<div class="headers">
<div class="logo"><h1>Logo</h1></div>
<div class="lists">
<ul>
<li><a href="">Home</a></li>
<li><a href="">About Us</a></li>
<li><a href="">Contact Us</a></li>
</ul>
</div>
</div>
<div class="description">
<span>Welcome</span>
<h1>Lenovo</h1>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Explicabo beatae aspernatur assumenda maxime. Eaque voluptatem quidem recusandae veritatis? Tempora sit cupiditate hic voluptatem maxime veritatis possimus rerum officiis aliquam accusantium!</p>
</div>
<div class="image_slider">
<div class="image_container">
<img src="castelmezzano.jpg" alt="">
<img src="iceland.jpg" alt="">
<img src="mountains-862870.jpg" alt="">
<img src="snow-3193865.jpg" alt="">
</div>
</div>
</div>
</body>
</html>
Finally, add the following CSS codes to your style.css file to make your AI image generator website beautiful and user-friendly. You can customize the different CSS properties, such as color, background, font, etc., to give a personalized touch to your website.
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
position: relative;
color: #fff;
width: 100%;
min-height: 100vh;
background: url(white\ horse.jpg);
background-repeat: no-repeat;
background-size: cover;
background-position: center;
animation: bAnime 11s linear infinite;
}
.headers {
display: flex;
justify-content: space-between;
align-items: center;
width: 90%;
margin: 0 auto;
position: relative;
top: 30px;
}
.headers .logo h1 {
font-family: "Arial";
color: rgb(255,255,255);
}
.headers .lists ul {
list-style: none;
}
.headers .lists ul li {
display: inline;
margin: 0 15px;
}
.headers .lists ul li a {
color: rgb(255,255,255);
text-decoration: none;
font-weight: 700;
text-transform: uppercase;
font-family: sans-serif;
}
.description {
position: absolute;
top: 50%;
left: 60px;
transform: translateY(-50%);
font-family: sans-serif;
}
.description span {
color: orangered;
font-weight: 700;
font-size: 15px;
text-transform: uppercase;
}
.description h1 {
font-size: 55px;
}
.description p {
max-width: 100%;
width: 500px;
line-height: 1.5;
}
.image_slider {
width: 430px;
/* border: 2px solid red; */
position: absolute;
top: 50%;
right: 60px;
transform: translateY(-30%);
padding: 5px;
overflow: hidden;
}
.image_container {
display: flex;
gap: 20px;
animation: imganime 11s linear infinite;
transition: all 4s linear;
}
.image_container img {
width: 200px;
height: 250px;
object-fit: cover;
object-position: center;
border: 2px solid #fff;
border-radius: 20px;
}
@keyframes imganime {
0% {
transform: translateX(0);
}5% {
transform: translateX(0);
}10% {
transform: translateX(0);
}15% {
transform: translateX(0);
}
20% {
transform: translateX(-220px);
}25% {
transform: translateX(-220px);
}30% {
transform: translateX(-220px);
}35% {
transform: translateX(-220px);
}45% {
transform: translateX(-220px);
}
50% {
transform: translateX(-440px);
}55% {
transform: translateX(-440px);
}60% {
transform: translateX(-440px);
}65% {
transform: translateX(-440px);
}70% {
transform: translateX(-440px);
}
75% {
transform: translateX(-650px);
}80% {
transform: translateX(-650px);
}85% {
transform: translateX(-650px);
}90% {
transform: translateX(-650px);
}95% {
transform: translateX(-650px);
}100% {
transform: translateX(0);
}
}
@keyframes bAnime {
0% {
background-image: url(castelmezzano.jpg);
}5% {
background-image: url(castelmezzano.jpg);
}10% {
background-image: url(castelmezzano.jpg);
}15% {
background-image: url(castelmezzano.jpg);
}
20% {
background-image: url(iceland.jpg);
}25% {
background-image: url(iceland.jpg);
}30% {
background-image: url(iceland.jpg);
}35% {
background-image: url(iceland.jpg);
}45% {
background-image: url(iceland.jpg);
}
50% {
background-image: url(mountains-862870.jpg);
}55% {
background-image: url(mountains-862870.jpg);
}60% {
background-image: url(mountains-862870.jpg);;
}65% {
background-image: url(mountains-862870.jpg);
}70% {
background-image: url(mountains-862870.jpg);
}
75% {
background-image: url(snow-3193865.jpg);
}80% {
background-image: url(snow-3193865.jpg);
}85% {
background-image: url(snow-3193865.jpg);
}90% {
background-image: url(snow-3193865.jpg);
}95% {
background-image: url(snow-3193865.jpg);
}100% {
background-image: url(castelmezzano.jpg);
}
}
Conclusion and Final word
Now, we have reached the end of our code, for any information, you can comment any problem or code-not-working issues to resolve it, am always with you. You can also visit my YouTube Channel for more updates on HTML, CSS & JavaScript Designs. I believe you can create "An Image Slider With Background Slideshow Using HTML CSS JavaScript". and do so much more with codes. Go extremely far in exploring the world of HTML, CSS & JavaScript, its gonna be fun, trust me 😃.
Happy Coding Journey 🚀
0 Comments
We are happy to hear from you.