advanced Mobily Slider with jQuery
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
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; }
The article source:http://playground.mobily.pl/jquery/mobily-slider.html
You might also like
Tags
accordion accordion menu animation navigation animation navigation menu carousel checkbox inputs css3 css3 menu css3 navigation date picker dialog drag drop drop down menu drop down navigation menu elastic navigation form form validation gallery glide navigation horizontal navigation menu hover effect image gallery image hover image lightbox image scroller image slideshow multi-level navigation menus rating select dependent select list slide image slider menu stylish form table tabs text effect text scroller tooltips tree menu vertical navigation menu