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>

Source Code

Download

For more Advanced Usages, please check the demo page or visit the official website.