Hello readers, Today In this article we’ll show you how to create an Automatic Image Slider With Buttons Using HTML, CSS & JS. This type of Automatic Image Slider is used on the websites for the webpage for slider. One of the most beautiful and good-looking designs of an Automatic Image Slider.
You easily create this Automatic Image Slider With Buttons Using HTML, CSS & JS . then this article will definitely help you. For this, you need to have an idea about basic HTML, CSS and JavaScript then you can understand the following codes. It is designed in a completely modern way.
Some Information About This Automatic Image Slider
A slider is a common web element that is used on a variety of websites. This slider can automatically change the image. There are also two buttons that can be used to change the image manually.
Watch the video tutorial to create Automatic Image Slider
If you want to learn how to make it completely, you can watch the video tutorial below. Here I have shown how I made these Automatic Image Slider step by step completely beautifully. So you can learn how to make these Automatic Image Slider Design. This is a youtube video. If you can learn something from the video or if the video seems helpful to you, you must like and subscribe to the video. As a result, I get motivated to create other new designs.
Hopefully, the above video tutorial has helped you to create this Automatic Image Slider Tutorial. If you like the video tutorial, be sure to like the video and comment on it so I can encourage you to create new designs.
You might like this:
- Create Custom Scrollbar Using CSS
- Neumorphism Analog Clock Using HTML, CSS & JS
- Responsive Footer Design using HTML & CSS
Automatic Image Slider | Source Codes
You have to create an HTML, CSS & JS File For this Automatic Image Slider. After creating these files just paste the following codes into your file.
The First Step, create an HTML file with the name of index.html and paste the given codes in your HTML file. Remember, you’ve to create a file with .html extension. You’ve to download files from the given download button to use.
HTML CODE:
<!doctype html>
<html lang="en">
<head>
<!-- Required meta tags -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>CSS Slider</title>
<!----CSS link----->
<link rel="stylesheet" href="style.css">
<!----FontAwesome CDN Link---->
<link rel="stylesheet" href="https://pro.fontawesome.com/releases/v5.10.0/css/all.css">
</head>
<body>
<div class="slider-ctr">
<figure class="slide"><img src="./image/img1.jpeg">
<figcaption>
<div class="title">Sky</div>
<div class="author">Aleksandra</div>
</figcaption>
</figure>
<figure class="slide"><img src="./image/img2.jpeg">
<figcaption>
<div class="title">River</div>
<div class="author">Ales krivec</div>
</figcaption>
</figure>
<figure class="slide"><img src="./image/img3.jpeg">
<figcaption>
<div class="title">Rain</div>
<div class="author">Wilson Lau</div>
</figcaption>
</figure>
<figure class="slide"><img src="./image/img4.jpeg">
<figcaption>
<div class="title">Ocean</div>
<div class="author">Rosan Harmens</div>
</figcaption>
</figure>
<div class="slider-control">
<div class="control prev disabled">
<i class="fas fa-chevron-left"></i>
</div>
<div class="control next">
<i class="fas fa-chevron-right"></i>
</div>
</div>
</div>
<!---JS CDN Link---->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<!---Custom CDN Link---->
<script src="js.js"></script>
</body>
</html>
Second Step, you have to create a CSS file with the name of style.css and paste the given codes in your CSS file. Remember, you’ve to create a file with .css extension.
CSS CODE:
@import url(https://fonts.googleapis.com/css?family=Roboto:400,300);
html,
body {
height: 100%;
position: relative;
font-family: Roboto;
background: #f8f8f8;
overflow: hidden;
}
.slider-ctr {
width: 700px;
height: 440px;
margin-top: -220px;
margin-left: -350px;
position: absolute;
top: 50%;
left: 50%;
box-sizing: border-box;
border: 10px solid white;
border-radius: 5px;
overflow: hidden;
box-shadow: 0 10px 15px 3px rgba(0,0,0,.15), 0 5px 20px 3px rgba(0,0,0,.1);
}
.slider-ctr:after {
content: "";
position: absolute;
top: 0;
left: 0;
bottom: 0;
right: 0;
background: linear-gradient(to bottom, transparent 70%, rgba(0,0,0,0.6) 100%);
pointer-events: none;
z-index: 9;
}
.slider-control {
position: absolute;
bottom: 30px;
right: 30px;
width: 80px;
overflow: hidden;
border-radius: 3px;
box-shadow: 0 3px 3px 3px rgba(0,0,0,.15);
z-index: 99;
}
.control {
width: 50%;
height: 40px;
display: block;
float: left;
text-align: center;
line-height: 40px;
cursor: pointer;
transition: .3s all ease;
background: #fff;
}
.control i {
pointer-events: none;
transition: .3s all ease;
}
.control.disabled{
pointer-events: none;
background: #fff;
}
.control.disabled i{
opacity: .5;
}
.slide {
position: absolute;
top: 0;
left: 0;
bottom: 0;
right: 0;
transition: .45s all cubic-bezier(0.65, 0.05, 0.36, 1);
clip-path: inset(0 0 0 0);
}
.slide:before {
content: "";
position: absolute;
top: 0;
left: 0;
bottom: 0;
right: 0;
background: rgba(0,0,0,.125);
}
.slide.slide-on {
clip-path: inset(0 100% 0 0);
}
.slide.text-on .title {
transition: .3s all cubic-bezier(0.65, 0.05, 0.36, 1) .45s;
clip-path: inset(0 0 0 0);
}
.slide.text-on .author {
transition: .3s all cubic-bezier(0.65, 0.05, 0.36, 1) .6s;
clip-path: inset(0 0 0 0);
}
.slide img{
display: block;
}
.slide figcaption {
position: absolute;
top: 30px;
left: 30px;
}
.slide .title {
font-size: 50px;
margin-bottom: 2px;
color: #fff;
transition: .3s all cubic-bezier(0.65, 0.05, 0.36, 1) .45s;
clip-path: inset(0 0 0 100%);
font-weight: 400;
letter-spacing: 10px;
text-transform: uppercase;
position: relative;
}
.slide .author {
font-size: 16px;
color: #fff;
opacity: .8;
transition: .3s all cubic-bezier(0.65, 0.05, 0.36, 1) .45s;
clip-path: inset(0 0 0 100%);
font-weight: 300;
letter-spacing: 3px;
position: relative;
z-index: 9;
}the third step, you have to create a JS file with the name of js.js and paste the given codes in your js file. Remember, you’ve to create a file with .js extension.
JS Code:
// buttons
var sliderControl = document.querySelector(".slider-control");
// slides informations
var slides = document.querySelectorAll(".slide"),
slidesLength = slides.length;
// slides array
var slidesArr = [].slice.call(slides);
// reverse array sorting
slidesArr = slidesArr.reverse();
// slide current
var slideCurrent = 0;
sliderControl.addEventListener("click", function(e){
target = e.target;
// get next button
if(target.classList.contains("next")){
next = e.target,
prev = next.previousElementSibling,
nextSlide = slidesArr[slideCurrent + 1],
slide = slidesArr[slideCurrent];
slide.classList.add("slide-on");
slide.classList.remove("text-on");
nextSlide.classList.add("text-on");
slideCurrent += 1;
if(slideCurrent > 0) {
prev.classList.remove("disabled");
}
if(slideCurrent === slidesLength - 1){
next.classList.add("disabled");
}
}
// get prev button
if(target.classList.contains("prev")){
slideCurrent -= 1;
prev = e.target,
next = prev.nextElementSibling,
prevSlide = slidesArr[slideCurrent + 1],
slide = slidesArr[slideCurrent];
prevSlide.classList.remove("text-on");
slide.classList.remove("slide-on");
slide.classList.add("text-on");
if(slideCurrent === slidesLength - 2){
next.classList.remove("disabled");
}
if(slideCurrent === 0){
prev.classList.add("disabled");
}
}
});
balapaCop("Image Slider", "#999");now you’ve successfully created these Automatic Image Slider. If your code does not work or facing any error/problem to comment down or contact us through the contact page. otherwise, you can download all source code.
