Stacked-card Style Responsive Image Slider Plugin - MxSlider

MxSlider is a jQuery slider plugin used for generating a responsive image carousel / slider that allows to switch between images with a fixed parallax effect just like stacked cards.

How to use it:

1. The plugin depends on jQuery, so make sure you have that loaded. Afterwards, load the jQuery MxSlider plugin's files in the webpage where needed.

<link rel="stylesheet" href="css/MxSlider.css">
<script src="//code.jquery.com/jquery.min.js"></script>
<script src="js/MxSlider.js"></script>  

2. Add images and their descriptions into the slider.

<div class="sliderWrapper"> 
  <!-- Slider -->
  <div class="mySlider">
    <div> 
      <img src="1.png" alt="">
      <div class="sliderDescription"> 
        Slide Description 1
      </div>
    </div>
    <div> 
      <img src="2.png" alt="">
      <div class="sliderDescription"> 
        Slide Description 2
      </div>
    </div>
    <div> 
      <img src="3.png" alt="">
      <div class="sliderDescription"> 
        Slide Description 3
      </div>
    </div>
  </div>
  <!-- Slider --> 
</div>

3. The extra CSS snippets to style the image descriptions and navigation controls.

<div class="sliderWrapper"> 
  <!-- Slider -->
  <div class="mySlider">
    <div> 
      <img src="1.png" alt="">
      <div class="sliderDescription"> 
        Slide Description 1
      </div>
    </div>
    <div> 
      <img src="2.png" alt="">
      <div class="sliderDescription"> 
        Slide Description 2
      </div>
    </div>
    <div> 
      <img src="3.png" alt="">
      <div class="sliderDescription"> 
        Slide Description 3
      </div>
    </div>
  </div>
  <!-- Slider --> 
</div> 

4. Initialize the plugin with some options to render an image slider on the webpage.

$('.mySlider').MxSlider({
  autoPlay: true,
  dots: true,
  timeSlide: 500
}); 

5. Options and defaults.

$('.mySlider').MxSlider({

  // display navigation arrows
  nav: true,

  // display pagination dots
  dots: false,

  // animation speed
  timeSlide: 1000,

  // autoplay
  autoPlay: false,

  // autoplay interval
  autoPlaySpeed: 5000 
  
});

---

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