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" });

No comments:

Post a Comment