Responsive jQuery Any Html Content Slider - Mostslider

Mostslider is a simple, responsive, cross-browser and themeable jQuery slider plugin that supports any html elements like text, images, iframes and many more.

Features:

• Responsive design.
• Lightweight and easy to use.
• 4 transition effects: fade, slide, slideshow or slideup.
• 3 Built-in themes: default, thumbnail and thumbnail_scroll.
• Auto play when page fully loaded.
• Pager, thumbnails and arrows navigation.
• Social share button supported.

More examples:

• Content sliding
• Image content sliding
• Image sliding

Basic Usage:

1. Load the jQuery javascript library and jQuery mostslider plugin in the html document.

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<script src="mostslider.js" type="text/javascript"></script> 

2. Choose and load a theme CSS in the head section of the document.

<link rel="stylesheet" type="text/css" href="themes/default/default.css" />

3. Create the html for an image slider with animated text content.

<div class="slider-wrapper default">
<div id="slider"> 

<a href="#" target="_blank">
<h2 class="content from-left" style="position:absolute;top:70%;right:70%;">Content 1</h2>
<img src="1.jpg" class="bg" /> 
</a> 

<a href="#"" target="_blank">
<h2 class="content from-bottom" style="position:absolute;top:70%;left:70%;">Content 2</h2>
<img src="2.jpg" class="bg" /> 
</a> 

<a href="#"" target="_blank">
<h2 class="content from-right" style="position:absolute;top:20%;left:70%;">Content 3</h2>
<img src="3.jpg" class="bg" /> 
</a> 
...

</div>
</div>

4. Call the plugin with default settings.

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

5. All the configuration options.

<script>
$(document).ready(function(){
var slider = $("#slider").mostSlider({
// SET DEFAULT
// ANIMATION
// animation effect
animation: "fade",
// animation speed
aniSpeed: 1000,
// put slider image as background and center it - only avilable if metrics are set
background_center: false,

// SPEED
// slide automatically
autoPlay: true,
// time between slide
pauseTime: 3000,

// METRICS
// slider width and height
metrics: {
// RATIO
// max width
width: 0,
// max height
height: 0,
},
// stay the same height during resize
solidHeight: false,

// NAVIGATION
// use bullets as thumbnails
thumbnails: false,
// put thumbnailimage in background
thumb_bg: false,
// en/disable navigation
navigation: true,
// hide the arrows
hideArrows: true,

// FUNCTION
// enable linking to slides via url
linkable: false,

// CONTENT
// if content has transparancies
transparancy: false,
// specify the content class or animated content
contentClass: "content",
// proceed content animation StepByStey
sbsContent: false,
// time between each content animation step
contentAniDelay: 300,

// IMAGES
// user different images for different slider sizes
responsive_images: false,
// breakpoint between mobile and tablet (min tablet)
responsive_break_tablet: 481,
// breakpoint between tablet and desktop (min desktop)
responsive_break_desktop: 1024,

// enable social button for each slide
socialButtons: false,
// url for social buttons
socialUrl: "",
// twitter id
twitterID: ""});
});
</script>

Change logs:

2014-11-01

• Fixed bullet double select bug

2014-10-02

• fixes.

2014-10-01

• packed loading of social plugins into a function and call it when they are needed. Unnecessary loadings get prevented

2014-06-10

• fixed sliding animation

2014-06-06

• fixed thumbnail bug

2014-05-22

• fixed solidHeight issue

2014-05-21

• pushed the solidHeight option out of metrics, removed font from templates, added thumb_bg options to use thumb image as background

2014-05-07

• changed bg image centering for < ie9

2014-05-06

• added a parameter for solid height

2014-04-17

• added responsive image support

2014-04-16

• added responsive image support

2014-04-10

• included IE fix for background image size cover

2014-03-27

• fixed an overflow issue concerning the slides
• added a new featur for background centering

---

This awesome jQuery plugin is developed by julianhandl. For more Advanced Usages, please check the demo page or visit the official website.