Responsive Touch-enabled jQuery Slider Plugin - Related Products Slider

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.

<link rel="stylesheet" href="/css/related-product-slider.css"> 
<link rel="stylesheet" href="/css/animate.css">

2. Load the necessary JavaScript files right before the closing body tag.

<script src="jquery.min.js"></script> 
<script src="/js/related-product-slider.min.js"></script>

3. Insert images to the slider.

<div class="mx-product-slider">
  <div>
    <img src="1.jpg" alt="" />
  </div>
  <div>
    <img src="2.jpg" alt="" />
  </div>
  <div>
    <img src="3.jpg" alt="" />
  </div>
</div>

4. 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="1.jpg" alt="" />

    <!-- banner -->
    <div class="mx-slide-banner">
      <a href="#">
        <img src="banner-1.png" alt="">
      </a>
    </div>

  </div>


  <!-- next slide ... -->

</div>

5. You can also add products for each slide:

<div class="mx-product-slider"> 

  <!-- first slide -->
  <div> 

    <!-- main image -->
    <img src="1.jpg" alt="" />

    <!-- banner -->
    <div class="mx-slide-banner">
      <a href="#">
        <img src="banner-1.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="product1.png" alt="" />
        </a>
      </li>

      <!-- product 2 -->
      <li>
        <a href="#">
          <span class="mx-price">$7.90</span> <img src="product1.png" alt="" />
        </a>
      </li>

    <!-- product 3 ... -->

    </ul> 

  </div>

  <!-- next slide ... -->

</div>

6. Initialize the slider on document ready.

$(document).ready(function(){

  $('.mx-product-slider').relatedProducts();

});

7. Advanced usages. Overide the followint options and pass them as an object to the relatedProducts() function.

$('.mx-product-slider').relatedProducts({

  /*
  *   SET "NEXT" AND "PREVIOUS" ARROWS
  *   Type:     Boolean 
  *   Default:  true
  */
  'nav'       : true,     

  /*
  *   SET AUTOPLAY
  *   Type:     Boolean 
  *   Default:  true
  */
  'autoplay'      : true,    


  /*
  *   SCROLL SLIDER INTERVAL
  *   Type:     Number 
  *   Default:  8000
  */ 
  'slideInterval'   : 8000,    

  /*
  *   SLIDER SCROLLING SPEED
  *   Type:     Number 
  *   Default:  1000
  */
  'slideSpeed'    : 1000,     

  /*
  *   VERTICAL MOVEMENT
  *   Type:     Boolean 
  *   Default:  false
  */
  'vertical'      : false,    

  /*
  *   SET THE DOTS
  *   Type:     Boolean 
  *   Default:  true
  */
  'dots'        : true,     

  /*
  *   SET THE DOTS COLOR
  *   Type:     String 
  *   Default:  '#ffffff'
  */
  'dotsColor'     : '#ffffff',  

  /*
  *   SET THE COLOR OF THE ACTIVE POINT
  *   Type:     String 
  *   Default:  '#757373'
  */
  'dotsActiveColor' : '#757373',  

  /*
  *   SET THE POSITION OF THE POINTS
  *   Type:         String 
  *   Default:      'bottomLeft'
  *
  *   Possible options :  'topLeft'
  *           'topCenter'
  *           'topRight'
  *           'bottomLeft'
  *           'bottomCenter'
  *           'bottomRight'
  */
  'dotsPosition'    : 'bottomLeft',

  /*
  *   SET THE WIDTH OF THE WRAPPER DOTS
  *   Type:     Number 
  *   Default:  400
  * Units of measurement - pixels
  *   (Default max-width = 400px)
  * If 0 is set, the width will be 100%.
  * In this case, the points will always be centered
  */
  'dotsWrapWidth'   : 400,      

  /*
  *   MOUSE DRAG ENABLED
  *   Type:     Boolean 
  *   Default:  true
  */
  'mouseDrag'     : true,     

  /*
  *   ENABLE BANNERS
  *   Type:     Boolean 
  *   Default:  true
  */
  'bannerEnable'      : true,     

  /*
  *   SET THE BANNER POSITION
  *   Type:         String 
  *   Default:      'topRight'
  *
  *   Possible options :  'topLeft'
  *           'topRight'
  *           'topCenter'
  *           'bottomLeft'
  *           'bottomRight'
  *           'bottomCenter'
  */
  'bannerPosition'    : 'topRight',   

  /*
  *   SET THE TYPE OF ANIMATION
  *   Type:         String    | Bollean
  *   Default:      'slideInUp' | false
  * More animation types can be found
  * on the official site:
  * https://daneden.github.io/animate.css/
  */
  'bannerAnimated'    : 'slideInUp',  

  /*  'bannerEachAnimated' :              */
  /*  ['slideInDown','slideInLeft','slideInRight']  */     
  'bannerEachAnimated' : [],
                           
  /*
  *   SET ANIMATION DURATION
  *   Type:         String 
  *   Default:      'fast'
  *
  * Possible options :  'slow'    = 2s
  *           'slower'  = 3s
  *           'fast'    = 800ms
  *           'faster'  = 500ms
  */
  'bannerDurationAnimation'   : 'fast', 

  /*
  *   SET ANIMATION DELAY
  *   Type:         Number 
  *   Default:      500
  */
  'bannerDelayAnimation'    : 500,    

  /*
  *   SET AN ENDLESS ANIMATION CYCLE
  *   Type:         Boolean 
  *   Default:      false
  */
  'bannerInfiniteAnimation'   : false,  

  /*
  *   SET THE WIDTH OF THE WRAPPER TO THE BANNER
  *   Type:     Number 
  *   Default:  900
  * Units of measurement - pixels
  *   (Default max-width = 900px)
  * If 0 is set, the width will be 100%.
  * In this case, the points will always be centered
  */
  'bannerWrapWidth'     : 900,    

  /*
  *   SET THE HEIGHT OF THE WRAPPER TO THE BANNER
  *   Type:     Number 
  *   Default:  400
  * Units of measurement - pixels
  *   (Default max-width = 400px)
  * If 0 is set, the width will be 100%.
  * In this case, the points will always be centered
  */
  'bannerWrapHeight'      : 400,    

  /*
  * SET THE SPACE AROUND THE BANNER
  * Type:     Number 
  *   Default:  30
  */
  'bannerSpaceAround'     : 30,   
                          
  /*
  *   ENABLE SLIDER WITH PRODUCTS
  *   Type:         Boolean 
  *   Default:      true
  */
  'productSliderEnable'   : true,   


  /*
  *   SET THE POSITION OF THE SLIDER WITH THE PRODUCTS
  *   Type:         String 
  *   Default:      'bottomRight'
  *
  *   Possible options :  'topLeft'
  *           'topRight'
  *           'topCenter'
  *           'bottomLeft'
  *           'bottomRight'
  *           'bottomCenter'
  */
  'productPositionSlider' : 'bottomRight',

  /*
  *   SLIDER SCROLLING SPEED
  *   Type:     Number 
  *   Default:  600
  */
  'productSlideSpeed'     : 600,  

  /*
  *   SET THE NUMBER OF VISIBLE SLIDES
  *   Type:     Number
  *   Default:  3 
  */
  'productNumberVisible'    : 3,    

  /*
  *   SET THE TYPE OF ANIMATION
  *   Type:         String    | Bollean
  *   Default:      'slideInUp' | false
  *   More animation types can be found
  *   on the official site:
  *   https://daneden.github.io/animate.css/
  */
  'productSliderAnimated'   : 'slideInUp',

  /*
  *   SET ANIMATION DURATION
  *   Type:         String 
  *   Default:      'fast'
  *
  *   Possible options :  'slow'    = 2s
  *           'slower'  = 3s
  *           'fast'    = 800ms
  *           'faster'  = 500ms
  */
  'productDurationAnimation'  : 'fast', 

  /*
  *   SET ANIMATION DELAY
  *   Type:         Number 
  *   Default:      500
  */
  'productDelayAnimation'   : 500,    

  /*  comma separated. For example:         */
  /*  'productEachSliderAnimated' :           */
  /*  ['slideInDown','slideInLeft','slideInRight']  */
  'productEachSliderAnimated'  : [],                    

  /*
  *   SET AN ENDLESS ANIMATION CYCLE
  *   Type:         Boolean 
  *   Default:      false
  */
  'productInfiniteAnimation'  : false, 

  /*
  *   SET THE WIDTH OF THE SLIDER
  *   Type:     Number 
  *   Default:  900
  * Units of measurement - pixels
  *   (Default max-width = 900px)
  * If 0 is set, the width will be 100%.
  */
  'productWidthSlider'    : 900,    

  /*
  *   SET SLIDER HEIGHT
  *   Type:     Number 
  *   Default:  290
  * Units of measurement - pixels
  *   (Default max-width = 290px)
  * If 0 is set, the width will be 100%.
  */
  'productHeightSlider'   : 290,    

  /*
  *   SET CERTAIN STYLES DEPENDING ON SCREEN SIZE
  *   Type:     Object 
  *   Default:  {}
  * Note: An object must have at least one property.
  */
  'responsive'        : {}   
   
});

---

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