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 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">« Prev</a> <a class="increment-control" href="#" id="next" title="go to the next slide">Next »</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.