Responsive Flexible jQuery Multi slide Slider Plugin miSlider - Download Responsive & Flexible jQuery Multi-slide Slider Plugin - miSlider

Download Responsive & Flexible jQuery Multi-slide Slider Plugin – miSlider

By Posted on

This time I will share jQuery Plugin and tutorial about Responsive & Flexible jQuery Multi-slide Slider Plugin – miSlider, hope it will help you in programming stack.

Responsive Flexible jQuery Multi slide Slider Plugin miSlider - Download Responsive & Flexible jQuery Multi-slide Slider Plugin - miSlider
File Size: 1.83 MB
Views Total: 16922
Last Update:
Publish Date:
Official Website: Go to website
License: MIT
   

Demo Download

miSlider is a responsive, flexible and customizable jQuery & HTML5 slider plugin that displays as many slides of content as possible on your screen and enlarges the current slide with next/prev navigation.

More features:

  • Fully responsive and configurable.
  • Multiple sliders on one page.
  • Auto play.and Carousel-like endless loop.
  • Arrows & dots navigation.
  • Cross-browser. Works on modern browsers and IE8+.
  • Callback events supported.

How to use it:

1. Include the latest version of jQuery library in the document.

view source
1 <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>

2. Include the JQuery miSlider plugin’s files after jQuery library.

view source
1 <link href="styles/mislider.css" rel="stylesheet" type="text/css" />
2 <script src="scripts/mislider.js" type="text/javascript"></script>

3. Create the slide elements for your slider following the markup structure like this.

view source
01 <div class="mis-stage">
02 <!-- The element to select and apply miSlider to - the class is optional -->
03 <ol class="mis-slider">
04 <!-- The slider element - the class is optional -->
05 <li class="mis-slide">
06 <!-- A slide element - the class is optional -->
07 <a href="#" class="mis-container">
08 <!-- A slide container - this element is optional, if absent the plugin adds it automatically -->
09 <figure>
10 <!-- Slide content - whatever you want -->
11 <img src="images/garden01.jpg" alt="Pink Water Lillies">
12 <figcaption>Pink Water Lillies</figcaption>
13 </figure>
14 </a> </li>
15 <li class="mis-slide"> <a href="#" class="mis-container">
16 <figure> <img src="images/garden02.jpg" alt="Pond with Lillies">
17 <figcaption>Pond with Lillies</figcaption>
18 </figure>
19 </a> </li>
20 <li class="mis-slide"> <a href="link" class="mis-container">
21 <figure> <img src="images/garden03.jpg" alt="Hidden Pond">
22 <figcaption>Hidden Pond</figcaption>
23 </figure>
24 </a> </li>
25 <li class="mis-slide"> <a href="#" class="mis-container">
26 <figure> <img src="images/garden04.jpg" alt="Shrine">
27 <figcaption>Shrine</figcaption>
28 </figure>
29 </a> </li>
30 <li class="mis-slide"> <a href="#" class="mis-container">
31 <figure> <img src="images/garden05.jpg" alt="White Water Lillies">
32 <figcaption>White Water Lillies</figcaption>
33 </figure>
34 </a> </li>
35 <li class="mis-slide"> <a href="#" class="mis-container">
36 <figure> <img src="images/garden06.jpg" alt="Garden Walkway">
37 <figcaption>Garden Walkway</figcaption>
38 </figure>
39 </a> </li>
40 <li class="mis-slide"> <a href="#" class="mis-container">
41 <figure> <img src="images/garden07.jpg" alt="Lilly with Bee">
42 <figcaption>Lilly with Bee</figcaption>
43 </figure>
44 </a> </li>
45 </ol>
46 </div>

4. Sample CSS to custom the styles of your slider.

view source
01 .mis-stage {
02 background-color: #fff;
03 }
04 .mis-slider {
05 margin-top: 138px;
06 height: 80px;
07 background-color: #eee;
08 }
09 .mis-slider li a {
10 text-decoration: none;
11 color: #666;
12 display: block;
13 }
14 .mis-slider li figcaption {
15 font-size: 1.5em;
16 }
17 .mis-slider li img {
18  
19 max-width: 270px;
20 width: 100%;
21 border-radius: 135px;
22 border: none;
23 }
24 .mis-slide {
25 width: 360px;
26 height: 360px;
27 padding: 40px;
28 margin-top: -138px
29 }
30 .mis-nav-buttons a {
31 color: #fff;
32 }

5. Initialize the plugin and setup the slider whatever you like.

view source
01 <script type="text/javascript">
02 jQuery(function ($) {
03

Share this:

Related posts: