Create Slideshow Using HTML and CSS Only
Hey Guys, Welcome To Our Blog, In Today’s Blog We Are Going To See How To Create An Slideshow Using HTML and CSS Only.
The Slideshow will represent the context in a slideshow format that is similar to the presentation. Here the context we have used is images that consist of three to five. So we will make the background images slideshow using HTML & CSS.
So, Let’s Begin Our BG Image Slideshow Project By Adding The Source Codes. For That, First, We Are Using The Html Code.
50+ HTML, CSS & JavaScript Projects With Source Code
Slideshow Html Code:-
<ul class="slideshow">
<li><span></span></li>
<li><span>2</span></li>
<li><span></span></li>
<li><span></span></li>
<li><span></span></li>
</ul>
Now the HTML Code is Added. In this code, we first create an unordered list class with the name slideshow, and inside we add five list tags for images to a slideshow that will be done by CSS. Also, the span tag was added for making specific alignment on it.
Create Registration Successful Message In Html And Css Code
So that’s off for HTML, Now Let’s move on to CSS for Making the images a slideshow.
CSS Html Code:-
.slideshow {
list-style-type: none;
}
/** SLIDESHOW **/
.slideshow,
.slideshow:after {
top: -16px; /*Not sure why I needed this fix*/
position: fixed;
width: 100%;
height: 100%;
left: 0px;
z-index: 0;
}
.slideshow li span {
position: absolute;
width: 100%;
height: 100%;
top: 0px;
left: 0px;
color: transparent;
background-size: cover;
background-position: 50% 50%;
background-repeat: no-repeat;
opacity: 0;
z-index: 0;
animation: imageAnimation 30s linear infinite 0s;
}
.slideshow li:nth-child(1) span {
background-image: url("https://uploads-ssl.webflow.com/5976a3655fcd654cb3d604ca/5bfa14d04ae3429879830ee4_home-hero.jpg");
}
.slideshow li:nth-child(2) span {
background-image: url("https://uploads-ssl.webflow.com/5976a3655fcd654cb3d604ca/5c00c9ecd82b40364fc97f4b_bridge.jpg");
animation-delay: 6s;
}
.slideshow li:nth-child(3) span {
background-image: url("https://uploads-ssl.webflow.com/5976a3655fcd654cb3d604ca/5c00c9963ea913260bb41b0e_powerlines.jpg");
animation-delay: 12s;
}
.slideshow li:nth-child(4) span {
background-image: url("https://uploads-ssl.webflow.com/5976a3655fcd654cb3d604ca/5bfa14d04ae3429879830ee4_home-hero.jpg");
animation-delay: 18s;
}
.slideshow li:nth-child(5) span {
background-image: url("https://uploads-ssl.webflow.com/5976a3655fcd654cb3d604ca/5c00c9963ea913260bb41b0e_powerlines.jpg");
animation-delay: 24s;
}
@keyframes imageAnimation {
0% { opacity: 0; animation-timing-function: ease-in; }
8% { opacity: 1; animation-timing-function: ease-out; }
17% { opacity: 1 }
25% { opacity: 0 }
100% { opacity: 0 }
}
@keyframes titleAnimation {
0% { opacity: 0 }
8% { opacity: 1 }
17% { opacity: 1 }
19% { opacity: 0 }
100% { opacity: 0 }
}
.no-cssanimations .cb-slideshow li span {
opacity: 1;
}Simple Portfolio Website Using Html And Css With Source Code
Now we have added the Complete CSS code for the project. So let me explain this code simply by adding a specific explanation with the code.
The First Thing here we do is add the list style to none in which the borders and cursors get diminished when we touch on it. Then We add 3 to 5 images using the Nth Child Property by giving values for specific images inside the nth child and the span which is used in HTML is now used in CSS code to call it out for adding images.
Further, we are fixing the animation delay for 6s which means each will slideshow after 6s of visible.
.slideshow {
list-style-type: none;
}
.slideshow li:nth-child(1) span {
background-image: url("https://uploads-ssl.webflow.com/5976a3655fcd654cb3d604ca/5bfa14d04ae3429879830ee4_home-hero.jpg");
}
.slideshow li:nth-child(2) span {
background-image: url("https://uploads-ssl.webflow.com/5976a3655fcd654cb3d604ca/5c00c9ecd82b40364fc97f4b_bridge.jpg");
animation-delay: 6s;
}
.slideshow li:nth-child(3) span {
background-image: url("https://uploads-ssl.webflow.com/5976a3655fcd654cb3d604ca/5c00c9963ea913260bb41b0e_powerlines.jpg");
animation-delay: 12s;
}
.slideshow li:nth-child(4) span {
background-image: url("https://uploads-ssl.webflow.com/5976a3655fcd654cb3d604ca/5bfa14d04ae3429879830ee4_home-hero.jpg");
animation-delay: 18s;
}
.slideshow li:nth-child(5) span {
background-image: url("https://uploads-ssl.webflow.com/5976a3655fcd654cb3d604ca/5c00c9963ea913260bb41b0e_powerlines.jpg");
animation-delay: 24s;
}
Ecommerce Website Using HTML, CSS, & JavaScript (Source Code)
The Second Thing is we add the properties to the unordered class ( slideshow ) to align all the images to correct positions using top, left, width, height, position, and z-index properties to make it look better & User Responsive.
After that, we call out the list tag with span for making changes in background images like width and height for size of images, top and left for alignments and position to fix as it is and some of the background properties like size, cover, repeat, etc… and lastly we finish it by adding the animation with name and timing for background images.
.slideshow,
.slideshow:after {
top: -16px; /*Not sure why I needed this fix*/
position: fixed;
width: 100%;
height: 100%;
left: 0px;
z-index: 0;
}
.slideshow li span {
position: absolute;
width: 100%;
height: 100%;
top: 0px;
left: 0px;
color: transparent;
background-size: cover;
background-position: 50% 50%;
background-repeat: no-repeat;
opacity: 0;
z-index: 0;
animation: imageAnimation 30s linear infinite 0s;
}
The Third thing is we have now started animating the background images for the slideshow using keyframes for calling animation and again calling out the animation name inside of it we are fixing the opacity for blurring and timing function for the animation to go on which way. Each percentage has separate values that make animate images until it reaches the end. the specific animation will happen on a specific journey of animation till reaching the end.
@keyframes imageAnimation {
0% { opacity: 0; animation-timing-function: ease-in; }
8% { opacity: 1; animation-timing-function: ease-out; }
17% { opacity: 1 }
25% { opacity: 0 }
100% { opacity: 0 }
}
Restaurant Website Using HTML and CSS
The Last Step involves the addition of animation for images to reduce their blur when performing the slideshow. for that, specific lines are used.
@keyframes titleAnimation {
0% { opacity: 0 }
8% { opacity: 1 }
17% { opacity: 1 }
19% { opacity: 0 }
100% { opacity: 0 }
}
Now We have Completed Adding the CSS code and Hence We came to the end of this project but before we can make sure to view our project preview in the given Output Section.
Final Output Of Slideshow Using HTML and CSS:-
Now We have Successfully created our Slideshow Using HTML and CSS. You can use this project for your personnel needs and the respective lines of code are given with the code pen link mentioned below.
100+ Front-end Projects for Web developers (Source Code)
ADVERTISEMENT
If you find out this Blog helpful, then make sure to search Codewithrandom on google for Front End Projects with Source codes and make sure to Follow the Code with Random Instagram page.
ADVERTISEMENT
REFER CODE – Jen
ADVERTISEMENT
WRITTEN BY – Ragunathan S
ADVERTISEMENT
