Mostslider - Customisation

This site covers all options and the api to customize the mostslider.

Download latest (.zip) 650kb

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
aniMethod auto auto
jQuery
css		 Defines how animation should be done. I recommend to use it with Modernizr as "auto" will read the classes of the html tag. If css-transitions are supported the slider will us them, otherwise it will fall back to jQuery animations.
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 at Social 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]-->

How to

Option Description
Ad an
option		 To and an option via javascript simply call the slider like this:
$("#slider").mostSlider({
   aniSpeed: 1000,
   pauseTime: 6000,
   transparancy: true,
   metrics: {
           width: 940,
           height: 450
   },
   contentClass: "content",
   sbsContent: true,
   contentAniDelay: 300,
});
thumbnails To show thumbnails instead of a dot for each slide you have to activate the thumbnail option. Then you have to set the 
data-thumb
attribute on each slide element and set it to an url of a picture that should be displayed as thumbnail. It is highly recommended to use the same metrics for each thumbnail.
Example:
<div data-thumb="slides/thumbs/1.jpg">
responsive_images Add the 
data-responsive-images="true"
attribute to an image that should be changes during rescaling. Specify the images that should be used with 
data-image-tablet="url-to-tablet-image"
and 
data-image-desktop="url-to-desktop-image"
IMPORTANT:
Put the url from the smallest image that should be used for mobile devices inside the default 
src="url-to-mobile-image"
tag.
linkable This enables that you can link to each slide in a slider with a specific url. (Can only be used in one slider per site)
By add adding:
/?slider=number_of_slide
to your url, you can link to a specific slide on the enabled slider. If you already have some other GET options in your URL, simply add:
&slider=number_of_slide
at the end of your url.
Social Buttons To add social buttons to a slide you have to enable the js option and set your socialUrl and your twitterID.

Twitter

To add a twitter button to your slide you have to set the
data-social
attribute on your slide element to "twitter".
Example:
<div href="#" data-social="twitter">

Pinterest

To add a pin it button to your slide you have to set the
data-social
attribute on your slide element to "pinterest". Then you have give the image that should be pinned the class "pinterest".
Example:
<div href="#" data-social="pinterest">
   <img src="img/demo-images/1.jpg" class="bg pinterest" />
</div>

Facebook

To add a facebook-like button to your slide you have to set the
data-social
attribute on your slide element to "facebook".
Example:
<div href="#" data-social="facebook">

Addition

It is possible to use several sharing buttons on one slide.

Social

If you would like to follow me on the progression on mostslider, here are the links.

Github Twitter Facebook

Licence

Mostslider is licensed under the MIT Licence.

The MIT License (MIT)

Copyright (c) 2013 Julian Handl

Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions:

The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.

THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.