Adaptor - JQuery 3D Content Slider

Adaptor is a javascript library that allows create 2D or 3D slide animation transitions. You can choose options for displaying such as: Vertical 3D scroll, Horizontal 3D scroll, 3D tiles, 2D tiles, Vertical scroll, Horizontal scroll, Blind left, Blind down, Fade. You enables to navigate between slides by clicking/taping the navigation thumbnails or clicking navigation arrows.

Features

Fully responsive and works great on every device (Desktop, Tablet, Mobile)
Many effects
Auto play
Thumbnails support

Live Demo

How to Use

Add the css below to your html page

<link rel="stylesheet" href="http://onlinefreetools.net/wp-content/uploads/demo/slider/jquery-box-slider/css/screen.css" />

Create a container where you want to render slider

<div id="page">
    <section>
        <div id="viewport">
            <div id="box">
                <figure class="slide jbs-current">
                    <img
                        src="http://onlinefreetools.net/wp-content/uploads/demo/slider/jquery-box-slider/img/the-battle.jpg">
                </figure>
                <figure class="slide">
                    <img
                        src="http://onlinefreetools.net/wp-content/uploads/demo/slider/jquery-box-slider/img/hiding-the-map.jpg">
                </figure>
                <figure class="slide">
                    <img
                        src="http://onlinefreetools.net/wp-content/uploads/demo/slider/jquery-box-slider/img/theres-the-buoy.jpg">
                </figure>
                <figure class="slide">
                    <img
                        src="http://onlinefreetools.net/wp-content/uploads/demo/slider/jquery-box-slider/img/finding-the-key.jpg">
                </figure>
                <figure class="slide">
                    <img
                        src="http://onlinefreetools.net/wp-content/uploads/demo/slider/jquery-box-slider/img/lets-get-out-of-here.jpg">
                </figure>
            </div>
        </div>

        <footer>
            <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>
        </footer>
    </section>

    <aside id="effect-switcher">
        <h4>Select an effect</h4>
        <ul id="effect-list">
            <li><a href="#" class="effect current" data-fx="scrollVert3d">Vertical 3D scroll</a></li>
            <li><a href="#" class="effect" data-fx="scrollHorz3d">Horizontal 3D scroll</a></li>
            <li><a href="#" class="effect" data-fx="tile3d">3D tiles</a></li>
            <li><a href="#" class="effect" data-fx="tile">2D tiles</a></li>
            <li><a href="#" class="effect" data-fx="scrollVert">Vertical scroll</a></li>
            <li><a href="#" class="effect" data-fx="scrollHorz">Horizontal scroll</a></li>
            <li><a href="#" class="effect" data-fx="blindLeft">Blind left</a></li>
            <li><a href="#" class="effect" data-fx="blindDown">Blind down</a></li>
            <li><a href="#" class="effect" data-fx="fade">Fade</a></li>
        </ul>
    </aside>

</div>

Load jQuery library together with the JQuery 3D Content Slider library into your code

<script src="http://onlinefreetools.net/wp-content/uploads/demo/slider/jquery-box-slider/js/lib/modernizr.min.js">
</script>
<script
    src="http://onlinefreetools.net/wp-content/uploads/demo/slider/jquery-box-slider/js/box-slider-all.jquery.min.js">
</script>
<script>
    $(function () {
        var $images = $('.slide > img');
        var imagesLeftToLoad = $images.length;
        $images.on('load', function () {
            imagesLeftToLoad -= 1;

            if (imagesLeftToLoad === 0) {
                init();
            }
        });

        var init = function () {
            // This function runs before the slide transition starts
            var switchIndicator = function ($c, $n, currIndex, nextIndex) {
                // kills the timeline by setting it's width to zero
                $timeIndicator.stop().css('width', 0);
                // Highlights the next slide pagination control
                $indicators.removeClass('current').eq(nextIndex).addClass('current');
            };

            // This function runs after the slide transition finishes
            var startTimeIndicator = function () {
                // start the timeline animation
                $timeIndicator.animate({
                    width: '100%'
                }, slideInterval);
            };

            var $box = $('#box'),
                $indicators = $('.goto-slide'),
                $effects = $('.effect'),
                $timeIndicator = $('#time-indicator'),
                slideInterval = 5000,
                defaultOptions = {
                    speed: 1200,
                    autoScroll: true,
                    timeout: slideInterval,
                    next: '#next',
                    prev: '#prev',
                    pause: '#pause',
                    onbefore: switchIndicator,
                    onafter: startTimeIndicator
                },
                effectOptions = {
                    'blindLeft': {
                        blindCount: 15
                    },
                    'blindDown': {
                        blindCount: 15
                    },
                    'tile3d': {
                        tileRows: 6,
                        rowOffset: 80
                    },
                    'tile': {
                        tileRows: 6,
                        rowOffset: 80
                    }
                };

            // initialize the plugin with the desired settings
            $box.boxSlider(defaultOptions);
            // start the time line for the first slide
            startTimeIndicator();

            // Paginate the slides using the indicator controls
            $('#controls').on('click', '.goto-slide', function (ev) {
                $box.boxSlider('showSlide', $(this).data('slideindex'));
                ev.preventDefault();
            });

            // This is for demo purposes only, kills the plugin and resets it with
            // the newly selected effect
            $('#effect-list').on('click', '.effect', function (ev) {
                var $effect = $(this),
                    fx = $effect.data('fx'),
                    extraOptions = effectOptions[fx];

                $effects.removeClass('current');
                $effect.addClass('current');
                switchIndicator(null, null, 0, 0);
                $box
                    .boxSlider('destroy')
                    .boxSlider($.extend({
                        effect: fx
                    }, defaultOptions, extraOptions));
                startTimeIndicator();

                ev.preventDefault();
            });
        };
    });
</script>