"Related Products Slider" Documentation by Maksym Marko

RELATED PRODUCTS SLIDER
Responsive jQuery Slider Plugin

Created: 29.08.2018

By: Maksym Marko

Facebook: Maksym Marko

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.

Contents

A. Introduction

B. Features

C. Installation

D. Basic calling

E. Advanced settings

F. Properties list

Introduction

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.

Features

Installation

Add CSS

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>
Add JS

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>
Set HTML

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>

Basic calling

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>

Advanced settings

Additional properties

You can customize your slider by simply setting the properties object in the main function.

$( '.mx-product-slider' ).relatedProducts( {
'dots': false,
'autoplay' : true,
// ...

} );
Responsive

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.

Change the main image of the slide

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>

Properties list

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:

  • 'topLeft'
  • 'topCenter'
  • 'topRight'
  • 'bottomLeft'
  • 'bottomCenter'
  • 'bottomRight'

'dotsWrapWidth' Number 400 SET THE WIDTH OF THE DOTS WRAPPER

Units of measurement - pixels.
(Default max-width = 400px)
If 0 is set, the width will be 100%. In this case, the dots will always be centered.

Banner Settings
'bannerEnable' Boolean true SHOW BANNERS
'bannerPosition' String 'topRight' SET THE BANNER POSITION

Possible options:

  • 'topLeft'
  • 'topCenter'
  • 'topRight'
  • 'bottomLeft'
  • 'bottomCenter'
  • 'bottomRight'

'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.

For example: 'bannerEachAnimated': ['slideInDown','slideInLeft','slideInRight']

Now the first three slides of your slider will have a new type of animation.
If you have more than three slides, starting with the fourth, they will have the default animation.

'bannerDurationAnimation' String 'fast' SET ANIMATION DURATION

Possible options:

  • 'slow' = 2s
  • 'slower' = 3s
  • 'fast' = 800ms
  • 'faster' = 500ms

'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.
(Default max-width = 900px)
If 0 is set, the width will be 100%. In this case, the banner wrapper will always be centered.

'bannerWrapHeight' Number 400 SET THE HEIGHT OF THE BANNER WRAPPER

Units of measurement - pixels.
(Default max-height = 400px)
If 0 is set, the height will be 100%.

'bannerSpaceAround' Number 30 SET THE SPACE AROUND THE BANNER

Units of measurement - pixels.
(Space around by default = 30px)

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:

  • 'topLeft'
  • 'topCenter'
  • 'topRight'
  • 'bottomLeft'
  • 'bottomCenter'
  • 'bottomRight'

'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:

  • 'slow' = 2s
  • 'slower' = 3s
  • 'fast' = 800ms
  • 'faster' = 500ms

'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.

For example: 'bannerEachAnimated': ['slideInDown','slideInLeft','slideInRight']

Now the first three slider of your slider will have a new type of animation.
If you have more than three slides, starting with the fourth, they will have the default animation.

'productInfiniteAnimation' Boolean false SET AN ENDLESS ANIMATION CYCLE
'productWidthSlider' Number 900 SET THE WIDTH OF THE SLIDER WRAPPER

Units of measurement - pixels.
(Default max-width = 900px)
If 0 is set, the width will be 100%. In this case, the slider will always be centered.

'productHeightSlider' Number 290 SET THE HEIGHT OF THE SLIDER WRAPPER

Units of measurement - pixels.
(Default max-height = 290px)
If 0 is set, the height will be 100%.

Responsive
'responsive' Object {} SET CERTAIN STYLES DEPENDING ON SCREEN SIZE

Note: An object must have at least one property.

Go To Contents