Submit your widget

advanced Mobily Slider with jQuery

Created 7 years ago   Views 55222   downloads 15864    Author mobily
advanced Mobily Slider with jQuery
View DemoDownload 489.7 KB
134
Share |

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