Minimus slider (mini muslider)

VW camper
bikes
cable car
locomotive
mining
plane
cargo

Minimus Slider (mini muslider) is the compact brother of the jQuery content slider μslider (to be read "muslider") by musings.it.

Characterisics

Download Minimus Slider

Version log

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

How to set up Minimus Slider

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.3.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.

Configurable parameters

1. Dimensions parameter

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"
	});
});

2. Animation parameters (identical to those of μslider)

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
});

Help and contacts

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:





Share the love!

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!



Would you like to browse more plugins by musings.it?

Check them out here!
musings web design codecanyon Coding Divas