Stacked-card Style Responsive Image Slider Plugin - MxSlider
File Size: | 9.29 KB |
---|---|
Views Total: | 1760 |
Last Update: | |
Publish Date: | |
Official Website: | Go to website |
License: | MIT |
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.