Wednesday, 27 April 2016

Product Showcase - Slider with Icons - jQuery plugin


Step 1: Upload Package to Server

Upload the folder product-slider to your hosting server.

You can also host specific file on your server that are mandatory for the plugin -

  1. The jQuery file jquery-1.9.1.min.js or any latest version you want
  2. The ProductShowcase Javascript file product-slider.js
  3. The ProductShowcase CSS file product-slider.css

Step 2: HTML

Create a container element in your HTML having the class product-slider. Then add child elements inside the container each representing a slide.

<div class="product-slider"> <div class="is-icon" data-icon="./images/icon1.jpg" data-image="./images/image1.jpg" data-title="Icon Slider" data-description="The Fastest 2KB Image Slider" data-button-text="Download Now!" data-button-link="" data-selected="true"></div> <div class="is-icon" data-icon="./images/icon6.jpg" data-image="./images/image6.jpg" data-title="Works on any device.." data-text-highlight="true"></div> </div>

Step 3: Data Attributes

Every slide can have some data attributes. A detailed description of each attribute is below

data-image Link to the background image for the slide.
data-icon Link to a thumbnail image for the slide's icon.
data-title Title of the slide.
data-description Description of the slide.
data-button-text Display a button with the specified text
data-button-link Link to open when the button is clicked
data-selected true/false - indicating if the slide is shown when the page is loaded.
data-highlight true/false - indicating if the title & description need to be highlighted.
data-align left/center/right - text alignment for the slide (title, description & button).

Step 4: Javascript

Call the plugin in your Javascript as below

$(".product-slider").productShowcase({ //Maximum height in pixels that the Slider can attain maxHeight:"450px", //The width of the Slider. Better specified in percentage width:"80%", //The size of the Slide Icons in pixels. iconSize:"60px" });


  1. I read some articles on this site and I think your blog is really interesting and has great information. Thank you for your sharing.

  2. The blog or and best that is extremely useful to keep I can share the ideas of the future as this is really what I was looking for, I am very comfortable and pleased to come here. Thank you very much.

  3. Thank you very much for the information you shared, it's all I've been looking for <a

  4. It's great because of the knowledge you share with us, I will always follow your blog and will share your blog with my friends

  5. • You have posted a incredibly detail document. I examine your entire article and I really like it, I actually understand your point of view.

  6. • I really like this article please keep it up.

  7. Thank you so much for commenting, it is lovely and really makes my day!
    bouncing balls
    the impossible game