Minimus Slider (mini muslider) is the compact brother of the jQuery content slider μslider (to be read "muslider") by musings.it.
2018.02.27 v.1.7 added new parameters for vertical scrolling of tall images inside the slider, lazy load refactored, move method rewritten, code polished
2017.06.16 v.1.6 got rid of .off() to detach events, polished some code
2016.11.08 v.1.5 touch parameters adjusted
2016.09.09 v.1.4 added new parameter for setting a width reference for the slider + minor bug fixes
2015.09.28 v.1.3 minor bug fixes
2014.09.15 v.1.2 added Hi Resolution images support
2014.05.12 v.1.1 code optimization and minor debug
2014.03.06 v.1.0 initial release
1. First create an HTML structure like this:
<div id="my_slider" class="minimus-slider">
<!-- images -->
<!-- for images lazy loading insert a placeholder in "src" and the path to the image in "data-src" -->
<!-- for hi resolution images suport insert the path to the hi resolution image in "data-src-2x" -->
<div class="minimus-slide">
<img src="images/placeholder.gif" data-src="path/to/img.jpg" data-src-2x="path/to/hi-res-img.jpg" alt="alt text" title="img caption" />
<!-- insert an image "title" if you want a caption for your image -->
</div>
<!-- HTML5 audio -->
<div class="minimus-slide">
<audio controls="controls" preload="none">
<source src="path/to/audio.ogg" type="audio/ogg" />
<source src="path/to/audio.mp3" type="audio/mpeg" />
<p>Your browser does not support HTML5 audio element</p>
</audio>
</div>
<!-- HTML5 video -->
<div class="minimus-slide">
<video width="width" height="height" controls="controls" poster="poster.png" preload="none">
<source src="path/to/video.ogg" type="video/ogg" />
<source src="path/to/video.mp4" type="video/mp4" />
<p>Your browser does not support HTML5 video element</p>
</video>
</div>
...
</div>
<!-- navigation controls -->
<div class="minimus-navslide">
<span class="minimus-prev">previous slide</span>
<span class="minimus-start">start auto play</span>
<span class="minimus-stop">stop auto play</span>
<span class="minimus-next">next slide</span>
</div>
2. Then add some CSS rules like these:
.minimus-slider {
position: relative;
margin: 0 auto;
padding: 0;
overflow: hidden;
}
.minimus-slide {
position: absolute;
left: 0;
top: 0;
}
.minimus-navslide {
/* style as you wish, this is only an example */
position: relative;
margin: 0 auto;
padding: 0;
width: 100%;
text-align: center;
}.minimus-navslide span {
position: relative;
cursor: pointer;
}
.minimus-caption {
/* style as you wish, this is only an example */
position: absolute;
bottom: -2.625em;
width: 100%;
background: rgba(20,20,20,0.7);
color: #f7f7f7;
border: none;
border-top: 1px solid #404040;
}
3. Remember to include these files in your <head> section
<!-- base CSS rules for minimus -->
<link rel="stylesheet" type="text/css" media="screen" href="path/to/minimus_style.css"/>
<!-- your jQuery version -->
<script type="text/javascript" src="path/to/jquery-last.min.js"></script>
<!-- your minimus version -->
<script type="text/javascript" src="path/to/jquery.minimus-1.7.min.js"></script>
4. At the end call minimus:
$(document).ready(function(){
$("#my_slider").minimus();
});
5. You're done! Relax and congratulate yourself for the good job.
ratio (float number or "adjust")
As in μslider, it is the ratio between the height and the width of the slider. It can be a float number or you can set it to "adjust".
If ratio is a float number, the slider will maintain the defined proportions, the slide content dimensions will be set accordingly to the slider width and height and it will be centered
(cropping if necessary to avoid content deformation); on the contrary if ratio is set to "adjust" the slider width and height will be adjusted relative to the content ratio.
Default value: 0.5625 (9:16 height to width proportion). How to set:
$(document).ready(function(){
$("#my_slider").minimus({
"ratio": "adjust"
});
});
width_reference (string)
By default Minimus adjusts its width taking its parent <div> width as a reference, but in some cases this is not practical (if your Minimus is in a hidden tab for instance). In this case you can explicitly set the ID of the <div> you want Minimus to take into account as a reference for its width using this parameter.
Default value: slider parent <div>. How to set:
$(document).ready(function(){
$("#my_slider").minimus({
"width_reference": "my_reference_div"
});
});
animation_start (string)
It determines how the animation will start: manually or automatically.
Accepted values: manual, auto. Default value: manual. How to set:
$("#my_slider").minimus({
"animation_start": "auto"
});
animation_type (string)
It determines the kind of animation: horizontal slide, vertical slide or fade.
Accepted values: horizontal, vertical, fade. Default value: horizontal. How to set:
$("#my_slider").minimus({
"animation_type": "fade"
});
animation_duration (integer)
It defines the animation duration (in milliseconds). Default value: 600. How to set:
$("#my_slider").minimus({
"animation_duration": 800
});
animation_interval (integer)
Is active only if "animation_start": "auto", its the time interval between slides (in milliseconds). Default value: 4000. How to set:
$("#my_slider").minimus({
"animation_start": "auto",
"animation_interval": 3000
});
valign (string)
Vertical position of the image with respect to the slider container.
Accepted values: top, center, bottom. Default value: center (that means no vertical animation). How to set:
$("#my_slider").minimus({
"valign": "top"
});
vscroll_type (string)
Vertical scroll animation of the image inside the slider container. It works only if the image is taller than the slider, if "valign" is set to "top" or "bottom" and if "vscroll_start" is not "none".
Accepted values: forward, forward-backward, forward-jumpback. Default value: forward. How to set:
$("#my_slider").minimus({
"valign": "top",
"vscroll_type", "forward-backward"
});
vscroll_duration (integer)
It defines the vertical scroll animation duration (in milliseconds). Default value: 5000. How to set:
$("#my_slider").minimus({
"vscroll_duration": 8000
});
vscroll_start (string)
Vertical scroll animation starting mode.
Accepted values: none, hover, auto. Default value: none (no vertical animation). How to set:
$("#my_slider").minimus({
"vscroll_start": "auto"
});
We will be happy to help you with Minimus! If you need a customization or a special jQuery plugin for your project feel free to contact us, we will be glad to send you a quote! Just drop us a message:
By sending us a message you say that you read our privacy policy
Or use this contact form:
Are you happy with Minimus Slider?
You can help us! Share the love and consider donating! It will help us maintain, improve and enhance Minimus. Thank you!
Check them out here!
