Image slider or slideshow commonly shows one large image. The images get manually forward and backward, allowing you to click on the forward and backward button.
In this blog Image Slider, there are five images but only a single image will appear at the front. There are buttons on the left and right side of the image which works manually by clicking on either side of the buttons. These buttons slide these images forward and backward one by one on a button click. By clicking on the button you can forward or backward the images as you want. This forward and backward function is performed by using JavaScript.
The source code of this Image Slider is given below, if you want the source code of this program, you can copy it. You can use this Image Slider with your creativity and can take this project to the next level.
Image 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've to make a file with a .html extension.
@import url('https://fonts.googleapis.com/css?family=Muli&display=swap');
* {
box-sizing: border-box;
}
body {
display: flex;
align-items: center;
justify-content: center;
min-height: 100vh;
margin: 0;
}
body::after {
background-image: inherit;
background-position: center center;
background-size: cover;
content: '';
position: absolute;
top: 0;
left: 0;
width: 100vw;
height: 100vh;
z-index: -2;
transition: 0.4s ease;
}
body::before {
background-color: rgba(0, 0, 0, 0.7);
content: '';
position: absolute;
top: 0;
left: 0;
width: 100vw;
height: 100vh;
z-index: -1;
}
.slider-container {
box-shadow: 0 3px 6px rgba(0,0,0,0.16), 0 3px 6px rgba(0,0,0,0.23);
position: relative;
overflow: hidden;
height: 70vh;
width: 70vw;
}
.slide {
background-position: center center;
background-size: cover;
position: absolute;
top: -15vh;
left: -15vw;
height: 100vh;
width: 100vw;
opacity: 0;
transition: 0.4s ease;
z-index: 1;
}
.slide.active {
opacity: 1;
}
.arrow {
background-color: transparent;
border: 2px solid #fff;
color: #fff;
cursor: pointer;
font-size: 30px;
padding: 20px;
position: fixed;
top: 50%;
transform: translateY(-50%);
}
.arrow:focus {
outline: 0;
}
.left-arrow {
left: calc(15vw - 65px);
}
.right-arrow {
right: calc(15vw - 65px);
}
.credit a{
text-decoration: none;
color: #000;
font-weight: 800;
color: #fff;
}
.credit {
position: fixed;
bottom:20px;
left:40%;
font-family: Verdana, Geneva, Tahoma, sans-serif;
margin: 10px;
color: #fff;
}
const body = document.body;
const slides = document.querySelectorAll('.slide');
const leftBtn = document.getElementById('left');
const rightBtn = document.getElementById('right');
let activeSlide = 0;
leftBtn.addEventListener('click', () => {
activeSlide--;
if(activeSlide < 0) {
activeSlide = slides.length - 1;
}
setBgToBody();
setActiveSlide();
});
rightBtn.addEventListener('click', () => {
activeSlide++;
if(activeSlide > slides.length - 1) {
activeSlide = 0;
}
setBgToBody();
setActiveSlide();
});
setBgToBody();
function setBgToBody() {
body.style.backgroundImage = slides[activeSlide].style.backgroundImage;
}
function setActiveSlide() {
slides.forEach(slide => {
slide.classList.remove('active');
});
slides[activeSlide].classList.add('active');
}
Thank you for reading our blog. If you face any problem in creating this Image 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