Adaptor - Cool 3D jQuery Content Slider Plugin

File Size: 1.19 MB
Views Total: 30389
Last Update:
Publish Date:
Official Website: Go to website
License: MIT
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:

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 class="slide">
      <img src="2.jpg">
    <figure class="slide">
      <img src="3.jpg">
    <figure class="slide">
      <img src="4.jpg">
    <figure class="slide">
      <img src="5.jpg">

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>

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.


5. Change the default transition effect.

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

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

  autoScroll: true,
  pauseOnHover: true

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

  responsive: true

8. Config the transition effect.

  speed: 800,
  timeout: 5000,
  perspective: 1000

9. API methods.

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

// go to the next slide

// back to the previous slide

// play/pause the slider

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

// destroy the slider

Change logs:


  • JS updated
  • Doc updated


  • Show slide in reverse for previous index. 


  • Fix styling and start code refactor


  • 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.