Mostslider - jQuery content slider.

Jun 07, 2014 in Slideshow 3925 views

Download

Overview
Documents

User Rating: 4.1/5 ( 4 votes)

Your Rating:

Mostslider is a lightweight and easy to use jQuery content slider.

Minified version is only 10kb.
Easy to setup and use.
Sliding any content.
Responsive.
Built in social sharing buttons.
Linkable slides.

Source: julianhandl.github.io

1. INCLUDE CSS AND JS FILES

<link  rel="stylesheet" type="text/css" href="themes/default/default.css" />
<script src="//code.jquery.com/jquery-1.10.1.min.js"></script>
<script src="mostslider.min.js" type="text/javascript"></script>

2. HTML

<div class="slider-wrapper default">
	<div id="slider">
		<a href="#" target="_blank"><img src="1.jpg" /></a>
		<a href="#" target="_blank"><img src="2.jpg" /></a>
		<a href="#" target="_blank"><img src="3.jpg" /></a>
	</div>
</div>

3. JAVASCRIPT

$(document).ready(function(){
	var slider = $("#slider").mostSlider();
});

4. OPTIONS

Basic js options

Option	Default	Options	Description
animation	fade	fade slide slidedown slideup	Defines the type of animation.
aniSpeed	1000	Any number in ms	Defines the speed of animation.
autoPlay	false	true false	Turns autoPlay on and off.
pauseTime	3000	Any number in ms	Defines the time each slide is shown.
navigation	true	true false	Turn navigation arrows on and off.
hideArrows	true	true false	Toggles if arrows should be faded out when cursor leaves the slider.
metrics	width: 0, height: 0	width: x, height: y	This sets a ratio for your slider, so it will stay the same ratio when it grows or shrinks. This is important if you need your slider to be responsive and if you use only content on your slides and no filling objects like images. The easiest method is to set it to the dimensions your slider has at it's biggest size.

Advanced js options

Option	Default	Options	Description
background_center	false	true false	Uses the background image (class='bg') as css background for the slide. The images gets centered and scaled to show the best result. Basically it looks like a normal slide but the image isn't clickable. This can be used as a very basic method to prevent your images to be stolen.
thumbnails	false	true false	Turns thumbnail support on and off. See more at Thumbnails.
thumb_bg	false	true false	If this option is enabled the bullets will be given a css background instead of an image tag. Works only if the thumbnails option is enabled.
solidHeight	false	true false	Use only with metrics option. Your slider will stay at the same height during resizing.
responsive_images	false	true false	Use different images (different sizes of the same image) for different sizes of the slider. This reduces traffic and is usefull for responsive design. All other responsive options must be set. How to use it
responsive_break_tablet	481	integer	This sets the windows width where the slider switches from the tablet image to the mobile image. Use the last value where the tablet view is still active. So if the mobile view ranges from 480 - 0, use 481.
responsive_break_desktop	1024	integer	This sets the windows width where the slider switches from the desktop image to the tablet image. The method how to choose the correct value is described above.
linkable	false	true false	Activates specific urls for each slide. See more at Linkable.
transparancy	false	true false	Set this option to "true" if you are using transparent .png or .gif files. Otherwise the animation will look weird.
contentClass	".content"	string	Sets the class that defines animated content.
sbsContent	false	true false	If you have multiple animated content blocks on your slide, this option sets if all content is shown at once or step by step.
contentAniDelay	300	Any number in ms	Defines the delay between each content element when sbsContent is enabled.
socialButtons	false	ture false	Turnes the social sharing buttons on or off. See more atSocial Buttons.
socialUrl	""	An URL as string	Defines the main url of your site. This is important for facebook and pinterest sharing.
twitterID	""	Your twitter ID (username)	Defines your twitter ID. This is important for twitter sharing.

Miscellaneous options

Type

Option

Usage

class

.portrait

Use this option for portrait images that should not be cropped. Image will have the same height as slider and can be positioned via css. (Maybe center it?)
How a slide could look like:

<div data-thumb="image-thumb.jpg">
    <img src="image.jpg" class="portrait" />
</div>

markup

old IE

The slider looks for a class in the html tag to specify if IE8 or older is uesd to optimize some visuals.
Use this markup for your html document:

<!DOCTYPE html>
<!--[if lt IE 7 ]> <html class="ie6 no-js"> <![endif]-->
<!--[if IE 7 ]> <html class="ie7 no-js"> <![endif]-->
<!--[if IE 8 ]> <html class="ie8 no-js"> <![endif]-->
<!--[if IE 9 ]> <html class="ie9 no-js"> <![endif]-->
<!--[if (gt IE 9)|!(IE)]><!-->
<html class="no-js"> <!--<![endif]-->

JS Tutorial

Mostslider - jQuery content slider.

Related Articles