Join the social network of Tech Nerds, increase skill rank, get work, manage projects...
 

  • How to Make SlideShow in HTML5

    @harish.pal
    Recommendations Offline Message

    • 0
    • 0
    • 0
    • 0
    • 0
    • 0
    • 0
    • 0
    • 368
    Comment on it

    In the past year, We were using Javascript and jQuery for image slideshow(image Slider), But nowadays we can make slideshow easily with the help of HTML5. In this blog I am going to discuss about how to make slideshow in HTML5 with complete explanation and codes . You can easily generate professional and attractive slideshow in HTML5.

    HTML 5 Slideshow

    Below is following Code:

    <!DOCTYPE html>

 <html>

 <head>

 <meta http-equiv="X-UA-Compatible" content="IE=Edge">

 <meta content="text/html; charset=utf-8" http-equiv="Content-Type"> 

<title>Display Slide Show</title> 

<style> #slideShowImages { border: 1px gray solid; background-color: lightgray; } #slideShowImages img { border: 0.8em black solid; padding: 3px; } </style>

 </head> 

<body>

 <div id="slideShowImages"> <img class='imagem&#95;artigo' src="img/photos/1.png" alt="Slide 1" />
 <img class='imagem&#95;artigo' src="img/photos/2.png" alt="Slide 2" /> 
<img class='imagem&#95;artigo' src="img/photos/3.png" alt="Slide 3" /> 
<img class='imagem&#95;artigo' src="img/photos/4.png" alt="Slide 4" /> </div> 

<button id="slideShowButton"></button>

<script src="slideShow.js"> 

</script> 

</body> 

</html>

    To run this code , You need save this code in file with extension.html . Also note that image should located in same folder as your .html file. Make sure you include slideShow.js file at your server.

    Hope you enjoy this blog. If you have an query regarding Html, feel free to post at FindNerds Html help Forum .


    html5 slideshow slideshow images html5 HTML5
    Comment on it

 0 Comment(s)

Sign In
Forgot Password?
                           OR                           
Create an account !!
                           OR                           
Register

Sign up using

                           OR                           
Forgot Password
Fill out the form below and instructions to reset your password will be emailed to you:
Reset Password
Fill out the form below and reset your password: