Adaptor, an extensible jQuery content slider

Posted on June 16, 2012 by Phil 18 comments

This jQuery plugin is a free and lightweight content slider for creating cool 3D (and 2D) slideshows for featured content on your website. In older browsers that do not support CSS3 with 3D transitions the plugin detects them and degrades gracefully to a simple transition maintaining the rich user experience for everyone. The plugin is powered by jQuery and CSS and is designed to be easy to add to an existing web page with the minimal effort on the designer or developer’s part. If you are a developer and want to spice things up a bit the plugin exposes a simple API for adding animation effects and extending it’s core functionality with paging controls and feedback indicators.

Get the code from Github View demo

The full developer documentation for the plugin can be found on the Github project pages—the same place you can download the latest version of the code. This post aims to provide a high level example of how to set the plugin up along with a demo of the available effects and extensions.

Setting up the HTML

For 3D effects the HTML will need an outer box within which the animated box will rotate—I call this the view port. Next is the box itself within which the content slides will be added. The view port and box must be the same size as the content slides otherwise the animation effects won’t look good. Below is an example of how to configure the HTML.

<div class="slider-viewport"><!-- works as a viewport for the 3D transitions -->
  <div class="content-box"><!-- the 3d box -->
    <figure><!-- first 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>

With the above, if each .slide image is 600px x 400px then the view port and box should also be that size. It is also a good idea to initially constrain the height of the viewport and prevent the overflow so that all of the content slides don’t appear to spew down the page and jump back up once the plugin initialises. Below is the CSS for the HTML example above.

.slider-viewport, .content-box, .slide { width: 600px; height: 400px }
.content-box { overflow: hidden } /* stop slides overflowing */

The overflow will be set back to visible once the plugin has been initialised

Including the jQuery

Include the latest version of jQuery in your page and then include box-slider-all.jquery.min.js below it. For other builds with custom animations please visit the Github project.

<script src="js/jquery.min.js"></script>
<script src="js/box-slider-all.jquery.min.js"></script>

Next select the box, not the view port, and apply the plugin with your desired options. You can view all available options on the Github project pages.

$('.content-box').boxSlider({
    autoScroll: true
  , timeout: 5000
  , speed: 1200
  , pauseOnHover: true
});

Get involved

I’d love to see other people add effects, I plan to add plenty more myself! If you develop your own effects I’d ask you share those by either sending me your code or collaborating on Github. I hope you enjoy!!