Image/Banner Slider

Wondering how can an image slider or a slideshow can be created? Image/banner slider is a great way to demonstrate all the top products or services your company provides. I saw many of the websites having them but din't knew how this can be done. One way to do this was to put Flash in there. But Flash becomes too heavy for this. This post demonstrates on how an image or banner slider can be created on your web application with simple javascript and jquery.

Few days back, out of the blue my client came up with the idea of putting the image slider of all the services he provides on the web application's Home Page. The idea was fantastic but I was little confused on how would I do this in .NET (or with simple HTML/javascript). I knew this can be done in Flash, but again Flash was not my cup of tea! I googled around to see if I can get some javascript or jquery that helps me accomplish this. And here I am! I found a wonderful Open Source Library that helps me create this slider.

Jssor Slider (both jQuery slider plugin and No-jQuery version) is touch swipe (touch+drag+move) & Responsive Image Slider with 360+ Javascript Slideshow Effects. With 30+ jQuery javascript+html simple code templates, it's easy to work out image slider, content slider, fade slideshow, thumbnail slider, nested slider, carousel slider, slider cluster, full width slider, grid slider, list slider, vertical slider, image gallery, banner slider, banner rotator, video gallery for website, webpage presentation. It supports all browsers and works on all mobile devices. It is one of the best performing sliders.

Jssor Slider comes with full open source javascript code library, thus user can develop, debug and deep customize slider of one's own. The following demostrates the usage of slider, including slider javascript code and slider HTML code.

Note that be sure to use 'jssor.core.js', 'jssor.utils.js' and 'jssor.slider.js' for development, and be sure to use 'jssor.slider.mini.js' for release. You know, all debug code will be removed after compression, to develop using 'jssor.slider.mini.js' may not meet your development needs.

Below is the most simple usage using jQuery

JAVASCRIPT CODE

<!-- it works the same with all jquery version from 1.x to 2.x -->
<script src="jquery.min.js"></script>
<script src="jssor.slider.mini.js"></script>
<script>
    jQuery(document).ready(function ($) {
        var options = { $AutoPlay: true };
        var jssor_slider1 = new $JssorSlider$('slider1_container', options);
    });
</script>

HTML CODE

<div id="slider1_container" style="position: relative; top: 0px; left: 0px; width: 600px; height: 300px;"&rt;
<div id="slider1_container" style="position: relative; top: 0px; left: 0px; width: 600px; height: 300px;">
    <!-- Slides Container -->
    <div u="slides" style="cursor: move; position: absolute; overflow: hidden; left: 0px; top: 0px; width: 600px; height: 300px;">
        <div><img u="image" src="image1.jpg" /></div>
        <div><img u="image" src="image2.jpg" /></div>
    </div>
</div>

That's it! You're done.

DEMO

Attachments and links :

• jssor.slider.min.js
• jssor slider
• Other jssor demos