jQuery Product and News Slider

jQuery Product and News Slider

Released 7 years ago , Last update 6 years ago

A Jquery news slider that shows news/products in a fancy and highly customizable way.

Present your news/posts or products in a cool way!

You can fully customize this component, including:

  • Thumbnails position (top/bottom/left/right) and size based on position.
  • Captions visibility and positioning (top/middle/bottom).
  • Links beaviour.
  • Size (make it fit your column width/height).
  • Auto sizing setup (let the component decide the better size for you).
  • Timing/Intervals.
  • Full CSS editable.

Fully tested on:

  1. IE8+
  2. FF4+
  3. Chrome 10+
  4. Safari 5+


The HCNS plugin is extremely simple to use.

1 Create a new HTML file.

2 Copy the 'css' and 'js' folders into the same directory where your HTML file is.

3 Create an 'img' folder and news.xml file in the same folder where your HTML file is and place some images in it. Modifiy news.xml as you need.

In this example we will assume that the large images are named pic1.jpg, pic2.jpg, pic3.jpg and so on. And that their corresponding thumbnails are named pic1small.jpg, pic2small.jpg, pic3_small.jpg, etc.

4 Import the default and HCNS style sheets:

<link type="text/css" rel="stylesheet" href="css/style.css"></link>
<link type="text/css" rel="stylesheet" href="css/hcns.css"></link>     

5 Import the latest version of jQuery and the HCNS plugin files:

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js"></script>
<script defer src="js/plugins.js"></script>
<script defer src="js/script.js"></script>

6 Add the following markup to the body of the HTML file:

<div id="hcns_main">

7 Modify /js/script.js to setup your options:

    'xml': 'news.xml', //your XML file
    'showCaptionsInThumbs': 'true', //define if show captions over thumbnails
    'captionsVerticalAlign': 'top', //if captions on, define their position (top/middle/bottom).
    'openMainLinkInBlank': 'true', //determine if main link opens in new window or not.
    'thumbsPosition': 'top', //define thumbnails section position (top/bottom/left/right).
    'width': '600px', 
    'height': '300px',
    'autoSizeHeight': 'true', //auto adjusts height based on thumbnails count.
    'autoSizeWidth': 'true', //auto adjusts width based on thumbnails count.
    'timing': '5000' //define interval between main item changes.

You can now test the HTML file in a browser to see your slider working.


14 day 14-day money-back guarantee


Personal License

  • Perpetual license

  • 1 site, 1 server

  • No distribution (hosted use only)

  • Commercial use

2 licenses, starting from From » $14.99 View Licenses

Get A Quote

What do you need?
  • Custom development
  • Integration
  • Customization / Reskinning
  • Consultation
When do you need it?
  • Soon
  • Next week
  • Next month
  • Anytime

Thanks for getting in touch!

Your quote details have been received and we'll get back to you soon.

Or enter your name and Email