Mostslider

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

Download latest (.zip) 650kb

Basic image sliding

HTML

<!DOCTYPE html> <html> <head> <title>mostSlider</title> <link rel="stylesheet" type="text/css" href="themes/default/default.css" /> </head> <body> <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> <script src="//code.jquery.com/jquery-1.10.1.min.js"></script> <script src="mostslider.min.js" type="text/javascript"></script> <script> $(document).ready(function(){ var slider = $("#slider").mostSlider(); }); </script> </body> </html>

Tip

If you want to slide only the images without the links, simply drop the links and just put the images inside the slider.

Image and content sliding

Carina

Oliver

Karin

HTML

<!DOCTYPE html> <html> <head> <title>mostSlider</title> <link rel="stylesheet" type="text/css" href="themes/default/default.css" /> </head> <body> <div class="slider-wrapper default"> <div id="slider"> <a href="#" target="_blank"> <h2 class="content from-left" style="position:absolute;top:70%;right:70%;">Karin</h2> <img src="1.jpg" class="bg" /> </a> <a href="#" target="_blank"> <h2 class="content from-bottom" style="position:absolute;top:70%;left:70%;">Oliver</h2> <img src="2.jpg" class="bg" /> </a> <a href="#" target="_blank"> <h2 class="content from-right" style="position:absolute;top:20%;left:70%;">Carina</h2> <img src="3.jpg" class="bg" /> </a> </div> </div> <script src="//code.jquery.com/jquery-1.10.1.min.js"></script> <script src="mostslider.js" type="text/javascript"></script> <script> $(document).ready(function(){ var slider = $("#slider").mostSlider({ socialButtons: true, socialUrl: "http://julianhandl.github.io/mostslider/", twitterID: "jurihandl", metrics: { width: 658, height: 439 }, background_center: true }); }); </script> </body> </html>

Tip

One of the most difficult thing about a slider that slides images and content is to let the slider know what should be the background image and what should be the content.

I couldn't come up with an intelligent algorithm for this problem yet, so you have to add the class ".bg" to the image that should be the background image.

Content elements must have the ".content" class (customizable). They need to be positioned absolute with top, right, bottom and left css attributes. You can also add an effect class to each content element called ".from-top", ".from-right", ".from-bottom", ".from-left" and ".fade".

Content sliding

mbp

We create awesome websites.

Website

Webapplikation

Webportal

Technology

Agencyservice

Hosting

mbp

Next Gen-Web: Responsive Design

HTML

<!DOCTYPE html> <html> <head> <title>mostSlider</title> <link rel="stylesheet" type="text/css" href="themes/default/default.css" /> <link rel="stylesheet" type="text/css" href="//netdna.bootstrapcdn.com/font-awesome/3.2.1/css/font-awesome.css" /> </head> <body> <div class="slider-wrapper default"> <div id="slider"> <div> <div style="position:absolute;bottom:27%;width:100%;text-align:center"> <img src="mbp.png" alt="mbp" style="display:inline;width:50%;height:auto;"> </div> <div class="content from-top" style="position:absolute;top:77%;width:100%;text-align:center"> <h4>We create awesome websites.</h4> </div> </div> <div> <h4 class="content from-left" style="position:absolute;top:29%;right:51%;width:32%;"><i class="icon-coffee"></i> Website</h4> <h4 class="content from-right" style="position:absolute;top:29%;left:51%;width:32%;"><i class="icon-rocket"></i> Webapplikation</h4> <h4 class="content from-left" style="position:absolute;top:44%;right:51%;width:32%;"><i class="icon-desktop"></i> Webportal</h4> <h4 class="content from-right" style="position:absolute;top:44%;left:51%;width:32%;"><i class="icon-globe"></i> Technology</h4> <h4 class="content from-left" style="position:absolute;top:59%;right:51%;width:32%;"><i class="icon-check-sign"></i> Agencyservice</h4> <h4 class="content from-right" style="position:absolute;top:59%;left:51%;width:32%;"><i class="icon-cloud"></i> Hosting</h4> </div> <div> <div style="position:absolute;bottom:30%;width:100%;text-align:center"> <img src="responsive.png" alt="mbp" style="display:inline;width:50%;height:auto;"> </div> <div class="content from-top" style="position:absolute;top:77%;width:100%;text-align:center"> <h4>Next Gen-Web: Responsive Design</h4> </div> </div> </div> </div> <script src="//code.jquery.com/jquery-1.10.1.min.js"></script> <script src="mostslider.js" type="text/javascript"></script> <script> $(document).ready(function(){ var slider = $("#slider").mostSlider({ aniSpeed: 1000, pauseTime: 6000, transparancy: true, metrics: { width: 940, height: 450 }, contentClass: "content", sbsContent: true, contentAniDelay: 300, }); }); </script> </body> </html>

Tip

You need to wrap a div around each slide. Inside these divs you can do nearly everything.

The slider options are described below.

Donation

If you use MostSlider in commercial projects and you're satisfied with it, please consider a donation.

Donate

Social

If you would like to follow me and get updated on mostslider, use this links to stay in touch.

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.

<