This is a step by step guide to installing "RELATED PRODUCTS SLIDER". It includes a list of properties for customizing a vonderful slider for your website.
If you have any questions, write to me in the facebook.
I will be glad to help.
A. Introduction
B. Features
C. Installation
RELATED PRODUCTS SLIDER is a jQuery plugin created for products animation, but it can possess many other features. This slider can be used for e-commerce and for presenting new employees of the company.
Each slide consists of three parts:
- Main Image;
- Banner;
- Products slider.
You can see it for real in the demo version.
First, add CSS files to the <head> tag:
<head>
<!-- Style -->
<link rel="stylesheet" href="./assets/css/related-product-slider.css">
<!-- Animate -->
<link rel="stylesheet" href="./assets/css/animate.css">
</head>
The next step is to connect the JavaScript files. You need to add the related-product-slider.min.js script after the jQuery library.
To make the page load faster, you can insert this file at the bottom of your site page.
<body>
<!-- jQuery -->
<script src="./assets/jquery/jquery-3.3.1.min.js"></script>
<!-- Related Products Slider -->
<script src="./assets/js/related-product-slider.min.js"></script>
</body>
Use the following HTML markup to begin installing of the slider:
<div class="mx-product-slider">
<div>
<img src="./assets/img/slide-1/slide-1.jpg" alt="" />
</div>
<div>
<img src="./assets/img/slide-2/slide-2.jpg" alt="" />
</div>
<div>
<img src="./assets/img/slide-3/slide-3.jpg" alt="" />
</div>
</div>
If you need to add a banner on a slide, use the following code:
<div class="mx-product-slider">
<!-- first slide -->
<div>
<!-- main image -->
<img src="./assets/img/slide-1/slide-1.jpg" alt="" />
<!-- banner -->
<div class="mx-slide-banner">
<a href="#">
<img src="./assets/img/slide-2/banner-2.png" alt="">
</a>
</div>
</div>
<!-- next slide ... -->
</div>
You can also add products for each slide.
<div class="mx-product-slider">
<!-- first slide -->
<div>
<!-- main image -->
<img src="./assets/img/slide-1/slide-1.jpg" alt="" />
<!-- banner -->
<div class="mx-slide-banner">
<a href="#">
<img src="./assets/img/slide-2/banner-2.png" alt="">
</a>
</div>
<!-- Related productss slider -->
<ul class="mx-related-products">
<!-- product 1 -->
<li>
<a href="#">
<span class="mx-price">$7.90</span>
<img src="./assets/img/slide-2/product1.png" alt="" />
</a>
</li>
<!-- product 2 -->
<li>
<a href="#">
<span class="mx-price">$7.90</span>
<img src="./assets/img/slide-2/product1.png" alt="" />
</a>
</li>
<!-- product 3 ... -->
</ul>
</div>
<!-- next slide ... -->
</div>
Once you have installed HTML markup, you can start the plugin.
The main call of the plugin looks like this: $( '.mx-product-slider' ).relatedProducts();. Where $( '.mx-product-slider' ) is a slider wrapper and .relatedProducts(); is the main function of the slider.
In general, the structure of the code looks like this:
<!DOCTYPE html>
<html lang="en">
<head>
<!-- Viewport -->
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<!-- Style -->
<link rel="stylesheet" href="./assets/css/related-product-slider.css">
<!-- Animate -->
<link rel="stylesheet" href="./assets/css/animate.css">
</head>
<body>
<div class="mx-product-slider">
<!-- Slider body... -->
</div>
<!-- jQuery -->
<script src="./assets/jquery/jquery-3.3.1.min.js"></script>
<!-- Related Products Slider -->
<script src="./assets/js/related-product-slider.min.js"></script>
<script>
$( document ).ready( function() {
$( '.mx-product-slider' ).relatedProducts();
} );
</script>
</body>
</html>
You can customize your slider by simply setting the properties object in the main function.
$( '.mx-product-slider' ).relatedProducts( {
'dots': false,
'autoplay' : true,
// ...
} );
You can also customize the slider for any screen size. To do this, you need to add a "responsive" property to your main function.
$( '.mx-product-slider' ).relatedProducts( {
'dots': false,
'autoplay' : true,
// ...
// responsive
'responsive': {}
} );
For example, you need to set up a banner position on screens of sizes 768, 992 and larger. Use this code for this task:
$( '.mx-product-slider' ).relatedProducts( {
// these properties will work by default
'dots': false,
'autoplay' : true,
// ...
'bannerPosition' : 'topRight',
// In this case, this property will be ignored on screens larger than 768 pixels.
// responsive
'responsive': {
// breakpoint from 768 up
768 : {
'bannerPosition' : 'topLeft'
},
// breakpoint from 992 up
992 : {
'bannerPosition' : 'bottomRight'
}
}
} );
A list of properties that you can use for a "responsive" object can be found here.
Sometimes you will have to change the main images of slides if a user comes to your website using a mobile device. "Related Products Slider" plugin has this feature.
First of all, set the corresponding properties of the slider wrap:
- Apply the property Image Changer - data-new-image="true"
- Set the maximum width of the device where these images appear - data-max-width="768"
- And finally, you need to specify the source of the additional image for each main image - <img src="./assets/img/slide-1/slide-1.jpg" alt="" data-image-src="./assets/img/slide-1/bg-768.jpg" />
In general, it looks like this:
<div class="mx-product-slider" data-new-image="true" data-max-width="768">
<!-- first slide -->
<div>
<!-- main image -->
<img src="./assets/img/slide-1/slide-1.jpg" alt="" data-image-src="./assets/img/slide-1/bg-768.jpg" />
</div>
<!-- next slide ... -->
</div>
In the table below, you can find all the properties that you can use in the "Related Products Slider" plugin.
The "Responsive" column indicates whether you can use this property from the table in the responsive: {} object.
Property name | Type | Default value | Description | Responsive |
---|---|---|---|---|
Main Settings | ||||
'nav' | Boolean | true | SET DIRECTIONAL NAVIGATION | ✔ |
'autoplay' | Boolean | true | SET AUTOPLAY | |
'slideInterval' | Number | 8000 | SLIDES CHANGING INTERVAL | |
'slideSpeed' | Number | 1000 | SLIDES SCROLLING SPEED | |
'vertical' | Boolean | false | VERTICAL MOVEMENT | ✔ |
'mouseDrag' | Boolean | true | MOUSE DRAG ENABLED | |
Dots Settings | ||||
'dots' | Boolean | true | SHOW DOTS NAVIGATION | ✔ |
'dotsColor' | String | '#ffffff' | SET THE DOTS COLOR | |
'dotsActiveColor' | String | '#757373' | SET THE COLOR OF THE ACTIVE DOT | |
'dotsPosition' | String | 'bottomLeft' |
SET THE POSITION OF THE DOTS
Possible options:
|
|
'dotsWrapWidth' | Number | 400 |
SET THE WIDTH OF THE DOTS WRAPPER
Units of measurement - pixels. |
|
Banner Settings | ||||
'bannerEnable' | Boolean | true | SHOW BANNERS | ✔ |
'bannerPosition' | String | 'topRight' |
SET THE BANNER POSITION
Possible options:
|
✔ |
'bannerAnimated' | String Bollean |
'slideInUp' |
SET THE TYPE OF ANIMATION
More animation types can be found on the official site: Animate.css by Daniel Eden. |
|
'bannerEachAnimated' | Array | ['slideInDown', 'slideInLeft'] |
SET A SPECIFIC ANIMATION FOR EACH SLIDE
Specify a specific animation for each slide. The names of the animations are comma separated. |
|
'bannerDurationAnimation' | String | 'fast' |
SET ANIMATION DURATION
Possible options:
|
|
'bannerDelayAnimation' | Number | 500 | SET ANIMATION DELAY | |
'bannerInfiniteAnimation' | Boolean | false | SET AN ENDLESS ANIMATION CYCLE | |
'bannerWrapWidth' | Number | 900 |
SET THE WIDTH OF THE BANNER WRAPPER
Units of measurement - pixels. |
✔ |
'bannerWrapHeight' | Number | 400 |
SET THE HEIGHT OF THE BANNER WRAPPER
Units of measurement - pixels. |
✔ |
'bannerSpaceAround' | Number | 30 |
SET THE SPACE AROUND THE BANNER
Units of measurement - pixels. |
✔ |
Configuration of the products slider | ||||
'productSliderEnable' | Boolean | true | SHOW THE SLIDER WITH PRODUCTS | ✔ |
'productPositionSlider' | String | 'bottomRight' |
SET THE POSITION OF THE SLIDER WITH THE PRODUCTS
Possible options:
|
✔ |
'productSlideSpeed' | Number | 600 | SLIDES SCROLLING SPEED | |
'productNumberVisible' | Number | 3 | SET THE NUMBER OF VISIBLE SLIDES | |
'productSliderAnimated' | String | 'slideInUp' |
SET THE TYPE OF ANIMATION
More animation types can be found on the official site: Animate.css by Daniel Eden. |
|
'productDurationAnimation' | String | 'fast' |
SET ANIMATION DURATION
Possible options:
|
|
'productDelayAnimation' | Number | 500 | SET ANIMATION DELAY | |
'productEachSliderAnimated' | Array | ['slideInDown', 'slideInLeft'] |
SET A SPECIFIC ANIMATION FOR EACH SLIDER
Specify a specific animation for each slider. The names of the animations are comma separated. |
|
'productInfiniteAnimation' | Boolean | false | SET AN ENDLESS ANIMATION CYCLE | |
'productWidthSlider' | Number | 900 |
SET THE WIDTH OF THE SLIDER WRAPPER
Units of measurement - pixels. |
✔ |
'productHeightSlider' | Number | 290 |
SET THE HEIGHT OF THE SLIDER WRAPPER
Units of measurement - pixels. |
✔ |
Responsive | ||||
'responsive' | Object | {} |
SET CERTAIN STYLES DEPENDING ON SCREEN SIZE
Note: An object must have at least one property. |