article:
JS Plugin: noty
article:
Elements Design: Metro Uinvert Dock Icon Set

JS Plugin: Adaptor 3D content slider

Advertisement

"Adaptor is a light-weight content slider that aims to provide a simple interface for developers to create cool 2D or 3D slide animation transitions."


Plugin: Adaptor 3D content slider



Usage

"Create a view port for the 3D perspective and within that add the HTML to create a box containing slides of content."
<div class="slider-viewport"><!-- works as a viewport for the 3D transitions -->
  <div id="content-box"><!-- the 3d box -->
    <figure><!-- slide -->
      <img src="img/slide-1.png">
      <figcaption>This is slide one's description</figcaption>
    </figure>
    <figure>
      <img src="img/slide-2.png">
      <figcaption>This is slide two's description</figcaption>
    </figure>
    <figure>
      <img src="img/slide-3.png">
      <figcaption>This is slide three's description</figcaption>
    </figure>
    <figure class="slide">
      <img src="img/slide-4.png">
      <figcaption>This is slide four's description</figcaption>
    </figure>
  </div>
</div>

and

;(function (w, $, ) {
  w.jqBoxSlider.registerAnimator('fade', (function () {
    var adaptor = {};
    // setup slide and box css
    adaptor.initialize = function ($box, $slides, settings) {
      // cache the original css for reset or destroy
      adaptor._cacheOriginalCSS($box, 'box', settings);
      adaptor._cacheOriginalCSS($slides, 'slides', settings);
      if ('static auto'.indexOf($box.css('position')) !== -1) {
        $box.css('position', 'relative');
      }
      $box.css({height: $slides.eq(0).height(), overflow: 'hidden'});
      $slides
        .css({ position: 'absolute', top: 0, left: 0 })
        .filter(':gt(0)').hide();
    };
    // fade current out and next in
    adaptor.transition = function (settings) {
      settings.$nextSlide.fadeIn(settings.speed);
      settings.$currSlide.fadeOut(settings.speed);
    };
    // reset the original css
    adaptor.destroy = function ($box, settings) {
      $box.children().css(settings.origCSS.slides);
      $box.css(settings.origCSS.box);
    };
    return adaptor;
  }()));
}(window, jQuery || Zepto));


Options

- speed (default: 800) The time interval in milliseconds within which the slide animation will complete
- autoScroll (default: false) Set true to automatically transition through the slides
- timeout (default: 5000) The time interval between slide transitions. For use with autoscroll
- pause (default: null) A DOM element, jQuery object or selector for an element that when clicked will toggle the autoscoll state of the slider. When the slider is in a paused state the element will be applied a class name of paused
- pauseOnHover (default: false) Pause an auto-scrolling slider when the users mouse hovers over it. For use with autoscroll
- next (default: null) A DOM element, jQuery object or selector for an element that when clicked will advance the slider to the next slide
- prev (default: null) A DOM element, jQuery object or selector for an element that when clicked will advance the slider to the previous slide
- effect (default: 'scrollVert3d') The slide animation effect to use when scrolling through content slides




source
github
download

Advertisement
Tags: plugin, jquery, js, slider, layout, develop, website, web, design

Leave a Comment

No Comment

© Creative3x Ltd.