This time I will share jQuery Plugin and tutorial about Responsive Touch-enabled jQuery Slider Plugin – Related Products Slider, hope it will help you in programming stack.
Related Products Slider is a responsive, touch-friendly jQuery slider/carousel plugin created for products animation, but it can possess many other features. This slider can be used for e-commerce store and for presenting new employees of the company.
Each slide consists of three parts:
- Main Image
- Banner
- Products slider
More Features:
- 100% Responsive and Mobile-Friendly. You can customize the slider for any device.
- Multiple selection of slider type. 77 Animation Effects.
- Easy to Customize.
- Unlimited number of slides for a slider.
- You will get 32 properties for creating a unique and original slider.
- You can put your company banner on each slide and install an additional slider with products for each slide.
- Directional navigation.
- Touch screen support.
- Documentation included.
How to use it:
1. Load the main stylesheet and animation CSS in the head of the document.
1 |
<link rel="stylesheet" href="/css/related-product-slider.css"> |
2 |
<link rel="stylesheet" href="/css/animate.css"> |
2. Load the necessary JavaScript files right before the closing body tag.
1 |
<script src="jquery.min.js"></script> |
2 |
<script src="/js/related-product-slider.min.js"></script> |
3. Insert images to the slider.
01 |
<div class="mx-product-slider"> |
03 |
<img src="1.jpg" alt="" /> |
06 |
<img src="2.jpg" alt="" /> |
09 |
<img src="3.jpg" alt="" /> |
4. If you need to add a banner on a slide, use the following code:
01 |
<div class="mx-product-slider"> |
07 |
<img src="1.jpg" alt="" /> |
10 |
<div class="mx-slide-banner"> |
12 |
<img src="banner-1.png" alt=""> |
5. You can also add products for each slide:
01 |
<div class="mx-product-slider"> |
07 |
<img src="1.jpg" alt="" /> |
10 |
<div class="mx-slide-banner"> |
12 |
<img src="banner-1.png" alt=""> |
17 |
<ul class="mx-related-products"> |
22 |
<span class="mx-price">$7.90</span> <img src="product1.png" alt="" /> |
29 |
<span class="mx-price">$7.90</span> <img src="product1.png" alt="" /> |
6. Initialize the slider on document ready.
1 |
$(document).ready(function(){ |
3 |
$('.mx-product-slider').relatedProducts(); |
7. Advanced usages. Overide the followint options and pass them as an object to the relatedProducts() function.
001 |
$('.mx-product-slider').relatedProducts({ |
