Introduction

This is a simple application for beginners that shows how to create a slider carousel of images using HTML 5 and CSS tools. We know that HTML 5 is the advanced version of HTML. Basically HTML 5 can be used to develop 3D applications. This article is intended to help with the use of HTML5 tools to develop slider carousel images applications. CSS is the acronym for Cascading Style Sheet that is used for design. CSS defines how HTML elements are to be displayed. Canvas is an important tag of HTML 5 that is used to show the image and text in an HTML 5 application. I hope this article helps to create slider carousel images applications using HTML 5 and CSS tools.
Step 1: First open an HTML editor such as Notepad.
wakakakakak.gif
Step 2: Create a Folder on a desktop.
folder.gif
Step 3: Open Visual Studio.
new.gif
webapplication.gif
Step 4: Add an HTML file to your web application.
html.gif
Step 5: Now in this step we define a style that is applied to slider carousel images. In the <style> tag we define some properties. They are font-family, font-size and holder class.
Code
  1. <style>
  2. body
  3. {
  4. background-color:#ff99cc;
  5. background-repeat:no-repeat;
  6. overflow-x:hidden;
  7. }
  8. input#text {width:500px;}
  9. input#range {}
  10. textarea#text {width:500px; height:300px;}
  11. img#zoom
  12. {
  13. border:10px solid #eee;
  14. cursor:pointer;
  15. -webkit-opacity:1.0;
  16. -webkit-transition: all 0.2s ease-out;
  17. -webkit-box-shadow: #333 0px 10px 10px;
  18. }
  19. div#zoom_container
  20. {
  21. position:absolute;
  22. top:200px;
  23. height: 250px;
  24. width:1000px;
  25. margin:0 auto;
  26. z-index:1000;
  27. display:none;
  28. }
  29. div#dummy img {display:none;}
  30. div#container
  31. {
  32. height: 250px;
  33. width:1000px;
  34. margin: 75px auto;
  35. -webkit-perspective: 700;
  36. }
  37. div#buttons
  38. {
  39. width:385px;
  40. padding:7px 20px 0 20px;
  41. position:relative;
  42. margin:15px auto;
  43. text-align:center;
  44. background-color: rgba(200,200,200,0.3);
  45. border:1px solid #aaa;
  46. z-index:0;
  47. -webkit-border-radius: 20px;
  48. }
  49. header
  50. {
  51. font-family: Sans-Serif;
  52. font-size:12px;
  53. text-align:center;
  54. color: #ff99cc;
  55. }
  56. input[type="button"]{ font-size: 24px;}
  57. input#range {
  58. width:300px;
  59. }
  60. ul
  61. {
  62. width:100%;
  63. list-style:none;
  64. margin:0px auto;
  65. -webkit-transform-style: preserve-3d;
  66. }
  67. li
  68. {
  69. -webkit-opacity: 1.0;
  70. height:500px;
  71. }
  72. li.img
  73. {
  74. position:absolute;
  75. -webkit-transition: all 0.3s ease-out;
  76. -webkit-transform-origin: 50% 5%;
  77. cursor:pointer;
  78. }
  79. </style>
Step 6 : Now in this step we create canvas elements and also define a shape of images of a regular square.
Code
  1. var rxt = canvas.getContext('2d');
  2. rxt.beginPath();
  3. rxt.moveTo(radius, 0);
  4. rxt.lineTo(canvas.width - radius, 0);
  5. rxt.quadraticCurveTo(canvas.width, 0, canvas.width, radius);
  6. rxt.lineTo(canvas.width, canvas.height - radius);
  7. rxt.quadraticCurveTo(canvas.width, canvas.height, canvas.width - radius, canvas.height);
  8. rxt.lineTo(radius, canvas.height);
  9. rxt.quadraticCurveTo(0, canvas.height, 0, canvas.height - radius);
  10. rxt.lineTo(0, radius);
  11. rxt.quadraticCurveTo(0, 0, radius, 0);
  12. rxt.clip();
  13. rxt.drawImage(img, sx, sy, sw, sh, 0, 0, side, side);
  14. $(canvas).click(coverflow.popup(img));
Step 7: Now in this step we define a function that is used to show a popup of images.
Code
  1. popup: function (img)
  2. {
  3. return function ()
  4. {
  5. var _height = img.naturalHeight;
  6. var _width = img.naturalWidth;
  7. var w = false;
  8. if (_height > _width) w = true;
  9. var sx, sy, sw, sh;
  10. if (w)
  11. {
  12. sh = long_side;
  13. sw = long_side / _height * _width;
  14. }
  15. else
  16. {
  17. sh = long_side / _width * _height;
  18. sw = long_side;
  19. }
  20. var cx = $('<img/>');
  21. cx.attr('src', img.src);
  22. cx.attr('width', sw);
  23. cx.attr('height', sh);
  24. cx.attr('id', 'zoom');
  25. cx.css('margin', (((long_side / 2) - sh) / 2) + 'px ' + ((985 - sw) / 2) + 'px');
  26. cx.css('-webkit-opacity', 0);
  27. cx.click(function ()
  28. {
  29. coverflow.popdown();
  30. });
  31. $('#zoom_container').show().append(cx);
  32. setTimeout(function () { cx.css('-webkit-opacity', 1); }, 10);
  33. }
Step 8: The complete application is given below.
body.gif
Step 9: Now in this step we create a function that shows multiple flow objects by a range of movement and push into a queue.
Code
  1. move: function (diff)
  2. {
  3. coverflow.popdown();
  4. var abs = diff < 0 ? diff * -1 : diff;
  5. var vector = 1;
  6. if (diff > 0) vector = -1;
  7. for (var i = 0; i < abs; i++)
  8. {
  9. var flow = { 'vector': vector, 'speed': 0.03 }
  10. queue.push(flow);
  11. }
  12. return true;
  13. }
Step 10: Run the application in a browser.
Output
ramu.gif
ramu3.gif
ramu4.gif
ranu5.gif
Resources
Here are some useful resources: