Sliderman.js v1.3.8

Examples — Sliderman.js Demos

Demo 1

Some alt text
Nulla luctus congue fermentum.
Integer elementum convallis lorem eu volutpat. Suspendisse fermentum arcu in lorem fringilla ultricies. Nam vel diam nisi.
Nullam nec velit vel leo tristique commodo.
Nulla facilisi. Fusce lacus massa, ullamcorper sed hendrerit quis, venenatis eget tortor.
Features: slides navigation, slides pagination, images' html-descriptions — always visible for illustration purposes
Effects: Matrix sliding (10x5), TopRight, delay 10 miliseconds, fading.
Description: Loading button is showing for 0.2 second just for illustration purposes and defined in display section by always_show_loading parameter.
<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>

Demo 2

Demo2 first
Featured model: Charlize Theron
Demo2 second
Featured model: Charlize Theron
Demo2 third
Featured model: Charlize Theron
Demo2 fourth
Featured model: Charlize Theron
Features: slides navigation, slides buttons, random effects.
Effects: Random effect from the following: 'Rain','Stairs','Fade', delay 10 miliseconds, fading.
Description: Buttons and descriptions are visible only on mouseover (hide: true) and slides are showing without pause while hovering images.
<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>

Demo 3

Features: no navigation, no buttons, 4 sliding effects (top, right, bottom, left), random.
Effects: Random effect from the following: 'Rain','Stairs','Fade', delay 10 miliseconds, fading.
Description: can be used as a simple promoslider.
<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>

Demo 4 - custom javascript manipulations

Features: example of manual handling of slider events, demonstration of custom easing method, new effect order and easing implementation in the sliderEffect object.
Effects: Custom effects using new values for order, easing parameters.
Description: demonstration of custom javascript manipulation.
Pros & Cons:
+ you can position any control elements (buttons, pagination etc) anywhere on the page.
+ you can add your own functionality to the slider. For example, preview of the next slide, or the bar with all thumbnails etc
- you need to know JavaScript
- JS code is usually bigger
Notes: This is an illustration example only. You might want to do bind events another way, adding some validation for different parameters, remove some functionality etc. For example, you don't have to generate the pages by using JavaScript. You can generate it on server-side before page is sent to user.
<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>
Продаж комп'ютерів в Івано-Франківську
BOOKS.IF.UA - Перший книжковий інтернет-магазин в Івано-Франківську
Інтернет-магазин цифрової та комп'ютерної техніки - TIPTOP.IF.UA, м. Івано-Франківськ
Продаж авто в Україні, оголошення. СуперАВТО - автомобільні оголошення
Рейтинг сайтів Прикарпаття
МЕТА - Украина. Рейтинг сайтов
Яндекс.Метрика