ShopSlider Responsive Shop Slider for Commercial Sites
ShopSlider is a jQuery Slider plugin that is used to display items on your sites. This Slider is designed with smart resonsive style that detects automatically the screen size and determine the best way to display items. Additionally, this plugin also support tab features for you easily combine many sliders at same position.
Demos:
ShopSlider Features:
- Smart Responsive Design.
- Support Multi Tab.
- Support Multi Sliders.
- Touch Swipe or Click or Left/Right Keys to Move Next/Prev Item Packs.
- Auto Play, Pause.
- Support Ajax and Inline Content.
- Many Presets Styles and Effects to Customize.
- Light Weight.
- Works on Almost Platforms and Browsers.
- Easy Setup.
Change Logs:
28 Mar 2013: Update version 1.3.
- Optimize Touch Swipe event ( just work on mobile devices ).
- Optimize Responsive feature.
- Left and Right Arrow Keys to Move Next/Prev Item Packs.
- Add Active Class for The Active Tab.
- Update jQuery 1.9.1 and jQuery Mobile 1.3..0.
- Remove jQuery UI and Touch Punch plugin.
- Remove Easing Effects. Now the plugin just accept “swing” value. If you want to use more Easing Effects you can include jQuery Easing plugin by yourself.
07 Nov 2012: Update version 1.2.
- Optimize source code.
- Auto Hide Control Buttons when The Slider has only one slide.
31 Oct 2012: Update version 1.1.
- Support Multi Sliders in a Same Page.
- Support Touch Swipe to Move Next/Prev.
12 Oct 2012: First Version.
Credits:
ShopSlider is developed by SONHLAB.com and use these third parties:
- jQuery Library.
- jQuery Mobile.
Table of Contents:
- Setup ShopSlider Plugin.
- Call ShopSlider.
- HTML Structures.
- Parameters.
[ga_res]
Section 1: Setup ShopSlider Plugin.
First of all, to ensure everything works correctly, please use <!DOCTYPE html> at top of the page.
Include the following code into HEAD section of the page.
Include CSS files:
<link rel="stylesheet" href="css/shopslider.css" type="text/css" /> <meta name="viewport" content="width=device-width, user-scalable=no" />
Include Javascript files:
<!-- jQuery Library --> <script type="text/javascript" src="js/jquery/jquery.min.191.js"></script> <!-- jQuery Mobile --> <script type="text/javascript" src="js/jquery/jquery.mobile.custom.min.130.js"></script> <!-- ShopSlider Plugin --> <script type="text/javascript" src="js/shopslider.min.js"></script>
Setup complete.
Section 2: Call ShopSlider Plugin.
To call the plugin we need to add a script like bellow into the <head> tag:
$('#shopslider').shopslider({
enableTab:1,
ssEffectIn: 'moveleft',
ssEasingIn: 'swing',
ssDurationIn: 400,
ssEffectOut: 'fade',
ssEasingOut: 'swing',
ssDurationOut: 400,
ssDelay: 5000,
ssAutoPlay: 1,
EnableKeys: true,
enableSwipe: 1
});
Call the plugin complete.
Section 3: HTML Structure.
This section should be read along with the example file ( “demo.php” file ) also contained in the download package.
Create ShopSlider View:
<!-- ShopSlider View -->
<div id="shopslider">
<!-- Tab -->
<div class="ss-tabs">
<div class="ss-tab" data-tabid="tab1"><span>Tab 1</span></div>
<div class="ss-tab" data-tabid="tab2"><span>Tab 2</span></div>
</div>
<!-- End Tab -->
<!-- Item View - ss-activeview to use detect active tab -->
<div class="ss-itemview" data-ssid="tab1">
</div>
<div class="ss-itemview ss-activeview" data-ssid="tab2">
</div>
<!-- End Item View -->
</div>
<!-- ShopSlider View -->
* ss-acitveview class is used to set the active view ( This is what users see on the site, others will be hidden ).
When a tab is clicked the Plugin will detect data-tabid value then set ss-activeview class for Item View has data-ssid value = data-tabid value. Then The plugin will find in ShopSlider Station an Item Pack has id = data-ssid value and transfer all items in this pack to the Active View. If the Plugin can not find an Item Pack has id = data-ssid value it will use AJAX to load content in “content/shopslider/data-ssid-value.php”
Create Prev/Next buttons:
<!-- ShopSlider Control -->
<div id="ss-control">
<div id="ss-next">Next</div>
<div id="ss-prev">Prev</div>
</div>
<div class="clearspace"></div>
<!-- End ShopSlider Control -->
Create ShopSlider Station *:
* If you use ajax load you need to create Item Packs in files in “content/shopslider” folder. Please see files in “content/shopslider” folder.
<!-- ShopSlider Station -->
<div id="ss-station">
<!-- Item Pack - Tab 1 -->
<div id="tab1">
<!-- Item Pack 1.1 -->
<div class="ss-itempack">
<div class="ss-item">
<div class="ss-itemimage">
<img src="" alt="" class="ss-responsive-img" />
</div>
<div class="ss-itemdetail">
<div class="ss-itemname">Item 1.1 Title</div>
<a href="#" target="_blank" class="ss-addcart">Buy</a>
<div class="ss-price">$5</div>
</div>
</div>
</div>
<!-- End Item Pack 1.1 -->
<!-- Item Pack 1.2 -->
<div class="ss-itempack">
<div class="ss-item">
<div class="ss-itemimage">
<img src="" alt="" class="ss-responsive-img" />
</div>
<div class="ss-itemdetail">
<div class="ss-itemname">Item 1.2 Title</div>
<a href="#" target="_blank" class="ss-addcart">Buy</a>
<div class="ss-price">$5</div>
</div>
</div>
</div>
<!-- End Item Pack 1.2 -->
<!-- Item Pack 1.3 -->
<div class="ss-itempack">
<div class="ss-item">
<div class="ss-itemimage">
<img src="" alt="" class="ss-responsive-img" />
</div>
<div class="ss-itemdetail">
<div class="ss-itemname">Item 1.3 Title</div>
<a href="#" target="_blank" class="ss-addcart">Buy</a>
<div class="ss-price">$5</div>
</div>
</div>
</div>
<!-- End Item Pack 1.3 -->
</div>
<!-- End Tab 1 -->
<!-- Item Pack - Tab 2 -->
<div id="tab2">
<!-- Item Pack 2.1 -->
<div class="ss-itempack">
<div class="ss-item">
<div class="ss-itemimage">
<img src="" alt="" class="ss-responsive-img" />
</div>
<div class="ss-itemdetail">
<div class="ss-itemname">Item 2.1 Title</div>
<a href="#" target="_blank" class="ss-addcart">Buy</a>
<div class="ss-price">$5</div>
</div>
</div>
</div>
<!-- End Item Pack 2.1 -->
<!-- Item Pack 2.2 -->
<div class="ss-itempack">
<div class="ss-item">
<div class="ss-itemimage">
<img src="" alt="" class="ss-responsive-img" />
</div>
<div class="ss-itemdetail">
<div class="ss-itemname">Item 2.2 Title</div>
<a href="#" target="_blank" class="ss-addcart">Buy</a>
<div class="ss-price">$5</div>
</div>
</div>
</div>
<!-- End Item Pack 2.2 -->
<!-- Item Pack 2.3 -->
<div class="ss-itempack">
<div class="ss-item">
<div class="ss-itemimage">
<img src="" alt="" class="ss-responsive-img" />
</div>
<div class="ss-itemdetail">
<div class="ss-itemname">Item 2.3 Title</div>
<a href="#" target="_blank" class="ss-addcart">Buy</a>
<div class="ss-price">$5</div>
</div>
</div>
</div>
<!-- End Item Pack 2.3 -->
</div>
<!-- End Tab 2 -->
</div>
<!-- End ShopSlider Station -->
End HTML Structure.
Section 4: Parameters.
Parameters:
| Parameters | Properties | Description |
| ext | string | This param is used to set content file extension. Default Value: php. |
| enableTab | boolean | This param is used to enable/disable Tab feature Value: 1 (enable) | 0 (disable). |
| ssEffectIn | string | This param is used to set Display Effect. Value: fade, moveleft, moveright, dropdown, riseup. |
| ssEasingIn | string | This param is used to set Display Easing Effect. Value: swing. |
| ssDurationIn | integer | This param is used to set Display Effect Duration. Default Value: 400. |
| ssEffectOut | string | This param is used to set Hidden Effect. Value: fade, moveleft, moveright, dropdown, riseup. |
| ssEasingOut | string | This param is used to set Hidden Easing Effect. Value: swing. |
| ssDurationOut | integer | This param is used to set Hidden Effect Duration. Default Value: 400. |
| ssDelay | integer | This param is used to set delay time. Default Value: 5000 ( 5 seconds ). |
| ssAutoPlay | boolean | This param is used to enable/disable Auto Play feature. Value: 1 (enable) | 0 (disable). |
| enableSwipe | boolean | This param is used to enable/disable Touch Swipe Feature. Value: 1 (enable) | 0 (disable). |
| EnableKeys | boolean | This param is used to enable/disable Left and Right Arrow Keys. Value: true (enable) | false (disable). |
[endedwords product=””]http://talk.sonhlab.com/room/shopslider-jquery-plugin[/endedwords]