Simple Analog Clock using HTML, CSS and JavaScript
If you want to make an analog clock using JavaScript then this article will help you. We all know that there are two types of watches, one analog and the…
If you want to make an analog clock using JavaScript then this article will help you. We all know that there are two types of watches, one analog and the…
In this article, you will learn how to make a digital clock with the help of HTML CSS, and JavaScript programming code. In a previous article, I showed you how…
Create a Drop-down menu bar by viewing this article using Html and CSS. The drop-down menu will help organize the content of the website. Earlier I showed you how to…
In this article, You will learn how to create a Glassmorphism login form using HTML and CSS. I have shown many more types of login forms and Glassmorphism login forms…
In this article, we are going to learn how to create a simple image slider using HTML, CSS, and JavaScript programming code.
Image sliders are now used for different tasks on different websites. This type of slider is mainly used on the homepage of the website or in the gallery within the website.
Using this type of CSS image slider you can arrange a large number of pictures neatly together. In any case, developers usually think of using different plugins or jQuery to create sliders.
If you want to create an image slider with simple JavaScript without using plugins or jQuery then this article will definitely help you.
This is a very simple and beautiful image slider. In this case, I have used three images and used the left and right buttons to change them. I have used a border around the simple image slider which indicates the size of this slide well.
In this case, there is a place to give specific text for each image, which means you can add some information about that image.
If you want to see its live demo, you can see the demo below. From there you can copy the required source code and use it in your own project.
See the Pen
image slider 3 by shantanu jana (@fghty)
on CodePen.
If you want to get the required source code, you can download the required source code using the download button below the article.
If you are a beginner and want to know how I made this design then you should definitely follow the tutorial below.
Below I have shown which programming code I have used to create any element of this design. This requires you to have knowledge of basic HTML CSS and JavaScript.
First of all, you have to create an HTML and CSS file. Then attach that CSS file to the HTML file.
Copy the HTML programming code below and paste it into the body section of your HTML file.
<div class=”carousel-container”>
<!–Nav Button(prev, next)–>
<div class=”carousel”>
<1–Image item–>
</div>
</div>
The code below is the basic design of the image slider. The following CSS codes have been used to design the background of this slider.
body{
background-color: rgb(58, 58, 58);
margin-top: 100px;
}
.carousel-container {
width: 600px;
height: 400px;
position: relative;
margin: 0 auto;
}
If you have seen the demo above, you will understand that I have used two buttons to change the images in this slider. The HTML and CSS code below helped to create and design that button.
<div class=”navigation”>
<div class=”prev nav-btn”><</div>
<div class=”next nav-btn”>></div>
</div>
.navigation .prev { position: absolute; z-index: 10; font-size: 25px;
top: 40%;
left: 10px;
font-weight: 700;
}
.navigation .next {
right: 10px;
position: absolute;
font-size: 25px;
z-index: 10;
top: 40%;
}
.navigation .nav-btn {
background: rgba(255, 255, 255, 0.55);
cursor: pointer;
border-radius: 50%;
width: 30px;
height: 30px;
display: flex;
justify-content: center;
align-items: center;
padding: 5px;
box-shadow: 2px 2px 10px rgba(0, 0, 0, 0.4);
}
.navigation .nav-btn:hover {
background: white;
}