Slideshow Html Code for Website



  • The Slideshow in HTML is used to Show an ultimate UI experience to the user.
  • We can see many websites have its own Slideshow in HTML.
  • Let’s us see a simple Slideshow in HTML with a responsive design.

Sample coding for Slideshow Html Code for Website

Tryit<!DOCTYPE html>
<html>
   <head>
        <title>Wikitechy Slideshow HTML</title>
        <link rel="stylesheet" type="text/css" href="slide.css"> 
   </head>
    <body>
        <h2>Slideshow HTML Code For Website</h2>
        <div id="slider">
            <div id="mask">
                <ul>
                    <li class="first"><img src="img1.png"/></li>
                    <li class="second"><img src="img2.png"/></li>
                    <li class="third"><img src="img3.png"/></li>
                    <li class="fourth"><img src="img4.png"/></li>
                    <li class="fifth"><img src="img5.png"/></li>
                </ul>
                <div class="progress-bar"></div>
            </div>
    </body>
</html>

Code Explanation for Slideshow Html Code for Website

code explanation for  Slideshow Html Code for Website

  1. The External CSS style sheet file slide.css will be linked for apply styles to the Slideshow in HTML.
  2. The id “slider” for assign CSS styles to the slide.
  3. The id “mask” for assign CSS styles to the slide for make animation mask.
  4. The list of images to make the slide show.
  5. The Progress bar has been placed the bottom of the slide for more UI Experience

Sample coding for Slideshow Html Code for Website slide.css

Tryit
    

#slider {
	background:#000;
	border:5px solid #eaeaea;
	box-shadow:1px 1px 5px rgba(0,0,0,0.7);
	height:320px;
	width:680px;
	margin:40px auto 0;
	overflow:visible;
	position:relative;
}
#mask {
	overflow:hidden;
	height:320px;
}
#slider ul {
	margin:0;
	padding:0;
	position:relative;
}
#slider li {
	width:680px;
	height:320px;
	position:absolute;
	top:-325px;
	list-style:none;
}
#slider li.first {
	-moz-animation:cycle 25s linear infinite;
	-webkit-animation:cycle 25s linear infinite;		
}
#slider li.second {
	-moz-animation:cycletwo 25s linear infinite;
	-webkit-animation:cycletwo 25s linear infinite;		
}
#slider li.third {
	-moz-animation:cyclethree 25s linear infinite;
	-webkit-animation:cyclethree 25s linear infinite;		
}

#slider li.fourth {
	-moz-animation:cyclefour 25s linear infinite;
	-webkit-animation:cyclefour 25s linear infinite;		
}
#slider li.fifth {
	-moz-animation:cyclefive 25s linear infinite;
	-webkit-animation:cyclefive 25s linear infinite;		
}
#slider:hover li, 
#slider:hover .progress-bar {
	-moz-animation-play-state:paused;
	-webkit-animation-play-state:paused;
}
.progress-bar { 
	position:relative;
	top:-5px;
	width:680px; 
	height:10px;
	background:blue;
	-moz-animation:fullexpand 25s ease-out infinite;
	-webkit-animation:fullexpand 25s ease-out infinite;
}

/* ANIMATION */
@-moz-keyframes cycle {
	0%  { top:0px; }
	4%  { top:0px; } 
	16% { top:0px; opacity:1; z-index:0; } 
	20% { top:325px; opacity:0; z-index:0; } 
	21% { top:-325px; opacity:0; z-index:-1; }
	92% { top:-325px; opacity:0; z-index:0; }
	96% { top:-325px; opacity:0; }
	100%{ top:0px; opacity:1; }
	
}
@-moz-keyframes cycletwo {
	0%  { top:-325px; opacity:0; }
	16% { top:-325px; opacity:0; }
	20% { top:0px; opacity:1; }
	24% { top:0px; opacity:1; } 
	36% { top:0px; opacity:1; z-index:0; } 
	40% { top:325px; opacity:0; z-index:0; }
	41% { top:-325px; opacity:0; z-index:-1; } 
	100%{ top:-325px; opacity:0; z-index:-1; }
}
@-moz-keyframes cyclethree {
	0%  { top:-325px; opacity:0; }
	36% { top:-325px; opacity:0; }
	40% { top:0px; opacity:1; }
	44% { top:0px; opacity:1; } 
	56% { top:0px; opacity:1; } 
	60% { top:325px; opacity:0; z-index:0; }
	61% { top:-325px; opacity:0; z-index:-1; } 
	100%{ top:-325px; opacity:0; z-index:-1; }
}
@-moz-keyframes cyclefour {
	0%  { top:-325px; opacity:0; }
	56% { top:-325px; opacity:0; }
	60% { top:0px; opacity:1; }
	64% { top:0px; opacity:1; }
	76% { top:0px; opacity:1; z-index:0; }
	80% { top:325px; opacity:0; z-index:0; }
	81% { top:-325px; opacity:0; z-index:-1; }
	100%{ top:-325px; opacity:0; z-index:-1; }
}
@-moz-keyframes cyclefive {
	0%  { top:-325px; opacity:0; }
	76% { top:-325px; opacity:0; }
	80% { top:0px; opacity:1; }
	84% { top:0px; opacity:1; }
	96% { top:0px; opacity:1; z-index:0; }
	100%{ top:325px; opacity:0; z-index:0; }
}

@-webkit-keyframes cycle {
	0%  { top:0px; }
	4%  { top:0px; }
	16% { top:0px; opacity:1; z-index:0; } 
	20% { top:325px; opacity:0; z-index:0; }
	21% { top:-325px; opacity:0; z-index:-1; }
	50% { top:-325px; opacity:0; z-index:-1; }
	92% { top:-325px; opacity:0; z-index:0; }
	96% { top:-325px; opacity:0; }
	100%{ top:0px; opacity:1; }
	
}
@-webkit-keyframes cycletwo {
	0%  { top:-325px; opacity:0; }
	16% { top:-325px; opacity:0; }
	20% { top:0px; opacity:1; }
	24% { top:0px; opacity:1; } 
	36% { top:0px; opacity:1; z-index:0; } 
	40% { top:325px; opacity:0; z-index:0; }
	41% { top:-325px; opacity:0; z-index:-1; }  
	100%{ top:-325px; opacity:0; z-index:-1; }
}
@-webkit-keyframes cyclethree {
	0%  { top:-325px; opacity:0; }
	36% { top:-325px; opacity:0; }
	40% { top:0px; opacity:1; }
	44% { top:0px; opacity:1; } 
	56% { top:0px; opacity:1; z-index:0; } 
	60% { top:325px; opacity:0; z-index:0; } 
	61% { top:-325px; opacity:0; z-index:-1; }
	100%{ top:-325px; opacity:0; z-index:-1; }
}
@-webkit-keyframes cyclefour {
	0%  { top:-325px; opacity:0; }
	56% { top:-325px; opacity:0; }
	60% { top:0px; opacity:1; }
	64% { top:0px; opacity:1; }
	76% { top:0px; opacity:1; z-index:0; }
	80% { top:325px; opacity:0; z-index:0; }
	81% { top:-325px; opacity:0; z-index:-1; }
	100%{ top:-325px; opacity:0; z-index:-1; }
}
@-webkit-keyframes cyclefive {
	0%  { top:-325px; opacity:0; }
	76% { top:-325px; opacity:0; }
	80% { top:0px; opacity:1; }
	84% { top:0px; opacity:1; }
	96% { top:0px; opacity:1; z-index:0; }
	100%{ top:325px; opacity:0; z-index:0; }
}

/* ANIMATION BAR */
@-moz-keyframes fullexpand {
    0%, 20%, 40%, 60%, 80%, 100% { width:0%; opacity:0; }
    4%, 24%, 44%, 64%, 84% { width:0%; opacity:0.3; }
   16%, 36%, 56%, 76%, 96% { width:100%; opacity:0.7; }
   17%, 37%, 57%, 77%, 97% { width:100%; opacity:0.3; }
   18%, 38%, 58%, 78%, 98% { width:100%; opacity:0; }	
}
@-webkit-keyframes fullexpand {
    0%, 20%, 40%, 60%, 80%, 100% { width:0%; opacity:0; }
    4%, 24%, 44%, 64%, 84% { width:0%; opacity:0.3; }
   16%, 36%, 56%, 76%, 96% { width:100%; opacity:0.7; }
   17%, 37%, 57%, 77%, 97% { width:100%; opacity:0.3; }
   18%, 38%, 58%, 78%, 98% { width:100%; opacity:0; }	
}

  

Output for Slideshow Html Code for Website

Output for Slideshow Html Code for Website

  1. That the Slideshow in HTML has been created and displayed with auto change effect.

Browser Support for Slideshow Html Code for Website

Yes Yes Yes Yes Yes

Related Searches to Slideshow Html Code for Website