MobilySlider

MobilySlider is advanced slideshow plugin for jQuery (5KB).

• can add inline HTML content (awesome!)
• looping
• auto generated pagination
• auto generated arrows
• autoplay
• fade, horizontal, vertical slide transition effect
• pause on hover
• callback functions

Changelog:

03.10.2011 - fixed animation bug in FF6 and Chrome
02.02.2011 - added fade transition

Featured on:

Speckyboy

JavaScript:

$('.slider').mobilyslider({
	content: '.sliderContent', // class for slides container
	children: 'div', // selector for children elements
	transition: 'horizontal', // transition: horizontal, vertical, fade
	animationSpeed: 300, // slide transition speed (miliseconds)
	autoplay: false, 
	autoplaySpeed: 3000, // time between transitions (miliseconds)
	pauseOnHover: false, // stop animation while hovering
	bullets: true, // generate pagination (true/false, class: sliderBullets)
	arrows: true, // generate next and previous arrow (true/false, class: sliderArrows)
	arrowsHide: true, // show arrows only on hover
	prev: 'prev', // class name for previous button
	next: 'next', // class name for next button
	animationStart: function(){}, // call the function on start transition
	animationComplete: function(){} // call the function when transition completed
});

HTML:

<div class="slider">
	<div class="sliderContent">
		<div class="item">
			<!-- any html content! -->
		</div>
		<!-- next slides -->
	</div>
</div>

CSS:

.slider {
	width:; /* specify width and height values */
	height:;
	position:relative;
}

.sliderContent {
	width:; /* specify width and height values */
	height:;
	float:left;
	position:relative;
	overflow:hidden;
}

.sliderContent .item {
	width:; /* specify width and height values */
	height:;
	position:absolute;
	background:#fff;
}

Comments:

Limo

25.08.11, 14:02

Love it - Thank you! :)

Keep rocking!

Harish

10.08.11, 10:05

Hello,
Thanks a tonne. I have tried so many sliders as I specifically wanted to have 100% width and use the images as backgrounds. Almost everyone had issues except your script.
Works perfect.
Thanks again.

Cesar

04.08.11, 20:09

Great slider over-all. One question, is there a way to control it via external buttons?

For example if you had small thumbnail images that when clicked took the slider to the appropriate slide.

randolph romero

30.04.11, 05:37

Hi, nice script, does it work on mobile phones like iphone and android?

Jan

18.04.11, 22:20

Hello Marcin ,

thankyou very very much for sharing this excellent peace of your work!

Your slider will soon be in use at pensionkramer.de - I consider donating to support your work and your wedding day ;-)

One thing to add to make it complete would be the option to cycle the images randomly.

Regards from Munich!

Martijn

14.03.11, 11:55

Great component. Best generic JQuery <div> slideshow I've seen yet.
Would be nice if it had methods for accessing next/prev/specific pages.

James

05.03.11, 19:27

Any update on preloading images? Is there a way to do it through Jquery separately? Great work!!!

Graham

24.02.11, 21:15

Does it work if I make each image link to something?

Marcin Dziewulski

23.02.11, 08:48

@TonyS

There is no need to change anything because it's working well in IE6 and IE7.

TonyS

22.02.11, 18:35

Any idea why this doesn't work for IE7? Can you suggest an adjustment I could make to get it to work for IE 6/7?

I do quite like your slider however, many visitors to our site are still using IE 6/7 so the slider MUST work for them as well. And I can't make a donation until it works cross browser.

Is this possible or do you recommend I look for another slider?

Rgds
TonyS

• Next
• Last

Write a Comment

Name:

Email:

Comment:

Captcha code: