Sliderman.js v1.3.8

Nulla luctus congue fermentum.
Integer elementum convallis lorem eu volutpat. Suspendisse fermentum arcu in lorem fringilla ultricies. Nam vel diam nisi.

Link

Nullam nec velit vel leo tristique commodo.
Nulla facilisi. Fusce lacus massa, ullamcorper sed hendrerit quis, venenatis eget tortor.

<script type="text/javascript">

  Sliderman.effect({name: 'effectDemo1', cols: 10, rows: 5, delay: 10, fade: true, order: 'straight_stairs'});

  var slider = Sliderman.slider({container: 'SliderName', width: 640, height: 300, effects: 'effectDemo1',
    display: {
      pause: true, autoplay: 3000, always_show_loading: 200,
      description: {background: '#ffffff', opacity: 0.5, height: 50, position: 'bottom'},
      loading: {background: '#000000', opacity: 0.5, image: 'demos/demo_1/img/loading.gif'},
      buttons: {
        opacity: 1,
        prev: {className: 'SliderNamePrev', label: ''},
        next: {className: 'SliderNameNext', label: ''}
      },
      navigation: {container: 'SliderNameNavigation', label: ' '}
  }});

</script>

Featured model: Charlize Theron

Featured model: Charlize Theron

Featured model: Charlize Theron

Featured model: Charlize Theron

<script type="text/javascript">

  effectsDemo2 = 'rain,stairs,fade';
  var demoSlider_2 = Sliderman.slider({container: 'SliderName_2', width: 700, height: 450, effects: effectsDemo2,
    display: {
      autoplay: 3000,
      loading: {background: '#000000', opacity: 0.5, image: 'demos/demo_2/img/loading.gif'},
      buttons: {
        hide: true,
        opacity: 1,
        prev: {className: 'SliderNamePrev_2', label: ''},
        next: {className: 'SliderNameNext_2', label: ''}
      },
      navigation: {container: 'SliderNameNavigation_2', label: '<img src="img/clear.gif" />'}
    }
  });

</script>

<script type="text/javascript">

  demo3Effect1 = {name: 'myEffect31', top: true, move: true, duration: 400};
  demo3Effect2 = {name: 'myEffect32', right: true, move: true, duration: 400};
  demo3Effect3 = {name: 'myEffect33', bottom: true, move: true, duration: 400};
  demo3Effect4 = {name: 'myEffect34', left: true, move: true, duration: 400};
  demo3Effect5 = {name: 'myEffect35', rows: 3, cols: 9, delay: 50, duration: 100, order: 'random', fade: true};
  demo3Effect6 = {name: 'myEffect36', rows: 2, cols: 4, delay: 100, duration: 400, order: 'random', fade: true, chess: true};

  effectsDemo3 = [demo3Effect1,demo3Effect2,demo3Effect3,demo3Effect4,demo3Effect5,demo3Effect6,'blinds'];

  var demoSlider_3 = Sliderman.slider({container: 'SliderName_3', width: 800, height: 200, effects: effectsDemo3,
    display: {autoplay: 3000}
  });

</script>

Previous

Next

<script type="text/javascript">
  // This is a demo for more advanced users, who are familiar with JavaScript
  // We're also using jQuery library for easier selecting elements and bind actions to them
  $(document).ready(function() {

    // lets define our custom easing. we will use it for some of the effects below
    demo4Easing = { name: 'pow2', method: function(x) { return Math.pow(x,2); }};

    demo4Effect1 = {name: 'myEffect41', rows: 6, cols: 12, fade: true, easing: 'swing', order: 'cross', delay: 100, duration: 400};
    demo4Effect2 = {name: 'myEffect42', rows: 6, cols: 12, fade: true, easing: 'swing', order: 'cross', delay: 100, duration: 400, reverse: true};
    demo4Effect3 = {name: 'myEffect43', rows: 6, cols: 12, fade: true, easing: 'pow2', order: 'rectangle', delay: 200, duration: 1000};
    demo4Effect4 = {name: 'myEffect44', rows: 6, cols: 12, fade: true, easing: 'pow2', order: 'rectangle', delay: 200, duration: 1000, reverse: true};
    demo4Effect5 = {name: 'myEffect45', rows: 3, cols: 10, zoom: true, move: true, right: true, easing: 'swing', order: 'circle', delay: 150, duration: 800};
    demo4Effect6 = {name: 'myEffect46', rows: 3, cols: 10, zoom: true, move: true, left: true, easing: 'swing', order: 'circle', delay: 150, duration: 800, reverse: true};
    demo4Effect7 = {name: 'myEffect47', rows: 5, cols: 1, zoom: true, move: true, bottom: true, easing: 'bounce', order: 'circle', delay: 150, duration: 800};
    demo4Effect8 = {name: 'myEffect48', rows: 5, cols: 1, zoom: true, move: true, top: true, easing: 'bounce', order: 'circle', delay: 150, duration: 800, reverse: true};

    effectsDemo4 = [demo4Effect1,demo4Effect2,demo4Effect3,demo4Effect4,demo4Effect5,demo4Effect6,demo4Effect7,demo4Effect8];

    var demoSlider_4 = Sliderman.slider({
      container: 'SliderName_4',
      width: 600,
      height: 300,
      effects: effectsDemo4,
      display: {
        autoplay: 3000, // interval is set to 3 seconds. We are not using slideshow in this example.
        autostart: false, // slideshow won't start on page load.
        first_slide: true, // first slide will be shown immediately onload without animation
        effects_order: 'effects' // setting order to the effects priority.
      },
      events: {
        // after method will be executed after all animation is complete
        after: function() {
          // removing active class from all links
          $("#SliderName_4_navigation").find("a").removeClass("active_page");
          // setting the active page class to the new slide.
          $("#SliderName_4_page_" + demoSlider_4.get('current')).addClass("active_page");
        }
      }
    });

    // building navigation manually
    var demoSlider_4TotalSlides = demoSlider_4.get('length');
    var demoSlider_4Navigation = $("#SliderName_4_navigation");

    // adding pages to the navigation bar
    for (var i = 0; i < demoSlider_4TotalSlides; i++)
    {
      demoSlider_4Navigation.append('<a href="javascript:void()" class="SliderName_4_page" id="SliderName_4_page_' + i + '">' + (i+1) + '</a>');
    }

    // adding current_page class to the first page
    $("#SliderName_4_page_0").addClass("active_page");

    // positioning pages' container in the center of its ancestor element
    demoSlider_4Navigation.css({'marginLeft': '-' + parseInt(demoSlider_4Navigation.width()/2) + 'px'}).fadeIn("fast");

    // next button click
    $("#sliderNextBtn").click(function() {
      demoSlider_4.next();
    });

    // previous button click
    $("#sliderPrevBtn").click(function() {
      demoSlider_4.prev();
    });

    // clicking on pages
    $("#SliderName_4_navigation").find("a.SliderName_4_page").click(function() {
      demoSlider_4.go( $(this).attr("id").replace("SliderName_4_page_", "") );
    });

  });
</script>