Create Slider Carousel Images Using HTML5

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 a HTML 5 application. I hope this article helps to create slider carousel images applications using HTML 5 and CSS tools.

Step 1 : First open a HTML editor such as Notepad.

• Open start->Notepad.
• The name of editor is "Image".

Step 2 : Create a Folder on a desktop.

• Right-click on desktop->new->Folder.
• Name of folder is "Tom".

Step 3 : Open Visual Studio.

• Go to file -> New->Projects.
• Crete an ASP. NET Web Application.
• Name it "ImageSlide.aspx".

Step 4 : Add a HTML file to your web application.

• Right-click on Solution Explorer.
• Add->add new item->HTML form.
• The Name of the HTML form is "Html.html".

Step 5 : Now in this step we define a style that is applied on slider carousel images. In the <style> tag we define some properties. They are font-family, font-size and holder class.

Code

<style>

    body
    {

      background-color:#ff99cc;

      background-repeat:no-repeat;

      overflow-x:hidden;

    }

    input#text {width:500px;}

    input#range {}

    textarea#text {width:500px; height:300px;}

    img#zoom
      {

      border:10px solid #eee;

      cursor:pointer;

     -webkit-opacity:1.0;

     -webkit-transition: all 0.2s ease-out;

     -webkit-box-shadow: #333 0px 10px 10px;

    }

    div#zoom_container
      {

      position:absolute;

      top:200px;

      height: 250px;

      width:1000px;

      margin:0 auto;

      z-index:1000;

      display:none;

          }

    div#dummy img {display:none;}

    div#container
     {

      height: 250px;

      width:1000px;

      margin: 75px auto;

     -webkit-perspective: 700;

    }

    div#buttons
      {

      width:385px;

      padding:7px 20px 0 20px;

      position:relative;

      margin:15px auto;

      text-align:center;

      background-color: rgba(200,200,200,0.3);

      border:1px solid #aaa;

      z-index:0;

     -webkit-border-radius: 20px;

    }

    header
     {

      font-family: Sans-Serif;

      font-size:12px;

      text-align:center;

      color: #ff99cc;

    }

    input[type="button"]{ font-size: 24px;}

    input#range {

      width:300px;

    }

    ul
     {

      width:100%;

      list-style:none;

      margin:0px auto;

     -webkit-transform-style: preserve-3d;

    }

    li
     {

     -webkit-opacity: 1.0;

      height:500px;

     }

    li.img
    {

      position:absolute;

      -webkit-transition: all 0.3s ease-out;

      -webkit-transform-origin: 50% 5%;

      cursor:pointer;

    }
</style>

Step 6 : Now in this step we create canvas elements and also define a shape of images of a regular square.

Code

var rxt = canvas.getContext('2d');

          rxt.beginPath();

          rxt.moveTo(radius, 0);

          rxt.lineTo(canvas.width - radius, 0);

          rxt.quadraticCurveTo(canvas.width, 0, canvas.width, radius);

          rxt.lineTo(canvas.width, canvas.height - radius);

          rxt.quadraticCurveTo(canvas.width, canvas.height, canvas.width - radius, canvas.height);

          rxt.lineTo(radius, canvas.height);

          rxt.quadraticCurveTo(0, canvas.height, 0, canvas.height - radius);

          rxt.lineTo(0, radius);

          rxt.quadraticCurveTo(0, 0, radius, 0);

          rxt.clip();

          rxt.drawImage(img, sx, sy, sw, sh, 0, 0, side, side);

          $(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

popup: function (img)
               {

     return function ()
               {

     var _height = img.naturalHeight;

     var _width = img.naturalWidth;

     var w = false;

     if (_height > _width) w = true;

     var sx, sy, sw, sh;

     if (w)

       {

     sh = long_side;

     sw = long_side / _height * _width;

      } else {

     sh = long_side / _width * _height;

     sw = long_side;

         }

     var cx = $('<img/>');

     cx.attr('src', img.src);

     cx.attr('width', sw);

     cx.attr('height', sh);

     cx.attr('id', 'zoom');

     cx.css('margin', (((long_side / 2) - sh) / 2) + 'px ' + ((985 - sw) / 2) + 'px');

     cx.css('-webkit-opacity', 0);

     cx.click(function ()
       {

     coverflow.popdown();

         });

    $('#zoom_container').show().append(cx);

       setTimeout(function () { cx.css('-webkit-opacity', 1); }, 10);

}

Step 8 : The complete application is given below.

Step 9 : Now in this step we create a function shat shows multiple flow objects by a range of movement and push into a queue.

Code

 move: function (diff)
    {

    coverflow.popdown();

    var abs = diff < 0 ? diff * -1 : diff;

    var vector = 1;

    if (diff > 0) vector = -1;

    for (var i = 0; i < abs; i++) {

    var flow = { 'vector': vector, 'speed': 0.03 }

    queue.push(flow);

          }

    return true;

}

Step 10 : Run the application in a browser.

Output

resources

Here is some useful resources:

• Image Slider Using Silverlight 4
• Silverlight- Slider Control Part 2
• Multiple Image Upload in ASP.NET
• Image Slider in Silverlight 4 using XML Data