Adaptor - Cool 3D jQuery Content Slider Plugin

Adaptor is an awesome, responsive jQuery Content Slider which can be used to showcase any web content with more than 9 pretty cool transition effects.

You may also like:

• Book Showcase with 3D Transform Effects
• Flexible 3D Flipping Cube Pluigin - HexaFlip
• 3D Triple Panel Image Slider Plugin with jQuery
• Responsive Image Cover Flow Plugin with jQuery and CSS3 - flipster
• 3D Image Transitions Animations
• Content Flip Plugin - BookBlock

How to use it:

1. Insert your images into the slider following the markup structure like these:

<div id="viewport">
  <div id="box">
    <figure class="slide jbs-current">
      <img src="1.jpg">
    </figure>
    <figure class="slide">
      <img src="2.jpg">
    </figure>
    <figure class="slide">
      <img src="3.jpg">
    </figure>
    <figure class="slide">
      <img src="4.jpg">
    </figure>
    <figure class="slide">
      <img src="5.jpg">
    </figure>
  </div>
</div>

2. Create navigation & pagination controls for the slider. OPTIONAL.

<nav class="slider-controls">
  <a class="increment-control" href="#" id="prev" title="go to the next slide">&laquo; Prev</a>
  <a class="increment-control" href="#" id="next" title="go to the next slide">Next &raquo;</a>

  <ul id="controls">
    <li><a class="goto-slide current" href="#" data-slideindex="0"></a></li>
    <li><a class="goto-slide" href="#" data-slideindex="1"></a></li>
    <li><a class="goto-slide" href="#" data-slideindex="2"></a></li>
    <li><a class="goto-slide" href="#" data-slideindex="3"></a></li>
    <li><a class="goto-slide" href="#" data-slideindex="4"></a></li>
  </ul>
</nav>

3. Insert jQuery JavaScript library and the jQuery Adaptor plugin into the HTML document.

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

4. Initialize the plugin to generate a basic slider.

$('#box').boxSlider();

5. Change the default transition effect.

• scrollVert3d (default)
• scrollHorz3d
• tile3d
• tile
• scrollVert
• scrollHorz
• blindLeft
• blindDown
• fade

$('#box').boxSlider({
  effect: 'scrollVert3d'
});

6. Determine whether or not to automatically transition between these slides. Default: false.

$('#box').boxSlider({
  autoScroll: true,
  pauseOnHover: true
});

7. Determine whether or not to automatically resize the slider to fit the screen width. Default: true.

$('#box').boxSlider({
  responsive: true
});

8. Config the transition effect.

$('#box').boxSlider({
  speed: 800,
  timeout: 5000,
  perspective: 1000
});

9. API methods.

// go to slide 2
$('#box').boxSlider('showSlide', 1);

// go to the next slide
$('#content-box').boxSlider('next');

// back to the previous slide
$('#content-box').boxSlider('prev');

// play/pause the slider
$('#box').boxSlider('playPause');

// get/set an option
$('#content-box').boxSlider('option', 'speed');
$('#content-box').boxSlider('option', 'speed', 2000); 

// destroy the slider
$('#content-box').boxSlider('destroy');

Change logs:

2019-12-11

• JS updated
• Doc updated

2016-02-07

• Show slide in reverse for previous index. 

2014-11-04

• Fix styling and start code refactor

2014-10-17

• Fix styling and start code refactor
• Make fade responsive

---

This awesome jQuery plugin is developed by p-m-p. For more Advanced Usages, please check the demo page or visit the official website.