jQuery Plugin For Product Social Share Carousel - Carousel Sharer

jQuery Plugin For Product Social Share Carousel - Carousel Sharer
File Size: 23.6 KB
Views Total:
Last Update:
Publish Date:
Official Website: Go to website
License: MIT
   

Carousel Sharer is a jQuery plugin which allows you to loop through a set of products and share them with comments on Facebook, Twitter, Google plus and Pinterest. Based on jQuery anyslider plugin.

How to use it:

1. Include the required jQuery library and jQuery anyslider plugin on your web page.

<script src="//code.jquery.com/jquery-1.11.1.js"></script>
<script src="jquery.anyslider.js"></script>

2. Include the jQuery carousel sharer plugin after jQuery library.

<link rel="stylesheet" href="newshare.css">
<script src="newshare.js"></script>

3. Create a social bar which allows to switch the social networking services.

<div id="snsicons">
  <div class="iconbox">
    <button id="facebook-button" class="selectedsns"> </button>
  </div>
  <div class="iconbox">
    <button id="twitter-button"> </button>
  </div>
  <div class="iconbox">
    <button id="googleplus-button"> </button>
  </div>
  <div class="iconbox">
    <button id="pinterest-button"> </button>
  </div>
</div>

4. Create a container for the product image carousel.

<div id="sliderbox">
  <div id="midbox" class="contentbox"> </div>
</div>

5. Create a button to share the current product.

<div id="sharebanner">
  Share <span id="sharedesignname"></span> with your friends!
</div>

6. Create a button to share the current product.

<div id="sharebanner">
  Share <span id="sharedesignname"></span> with your friends!
</div>

7. Check out the source codes of newshare.js to learn about how to add your own product images.


This awesome jQuery plugin is developed by shaosh. For more Advanced Usages, please check the demo page or visit the official website.