Blazing fast fullscreen slider with Nex

INTRODUCTION

I have brought to you a lot of free and beautiful jquery slider in previous post, and today I will introduce a brand new one, a fantastic full screen slider with great performance and elegant beauty. I am sure you will be impressed from the first look.

Nex slider is a blazing fast fullscreen slider optimized for best performances and compatible with all platforms. It allows you to embed images, videos and even google maps in the same slider..

FEATURES

• Customizable slider look
• Optimized Speed
• Touch Support
• Keyboard Support
• Pattern Support
• SEO Friendly
• 10 types of effects: Fade, Slide [left,right,top,bottom], Zoom, Skew, Rotate, Random, None
• 5 Predifined Color themes: amethyst, coral, sun, turquoise, and the default one
• Support of image filters: brightness,contrast,grayscale,hue-rotate,saturate,sepia.
• Different Content types: image, video, map
• Customizeable map style: ROADMAP, SATELLITE, HYBRID, TERRAIN
• Customizable maps: zoom size, show infowindow, or hide it
• Video Support from youtube and vimeo
• 2 types of thumbnails: circles and squares
• Compatible Browsers: Firefox, Chrome, Safari, IE9-IE11

HOW TO USE

1. Include CSS,JS

<link rel='stylesheet' href='https://cdn.rawgit.com/RiseLedger/Nex/master/css/nex.min.css'>
<script src='//ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js'></script>
<script src='https://cdn.rawgit.com/RiseLedger/Nex/master/js/Animo.min.js'></script>
<script src='https://cdn.rawgit.com/RiseLedger/Nex/master/js/nex.min.js'></script>

2. Create your slide's data in javascript:

<script type="text/javascript">
    var slides = [
        {
            link        : "http://path/to/fullscreen/image/1.png",
            thumb       : "http://path/to/thumb/image/1.png"
        },

        {
            link        : "http://path/to/fullscreen/image/2.png",
            thumb       : "http://path/to/thumb/image/2.png"
        },

        {
            link        : "http://path/to/fullscreen/image/3.png",
            thumb       : "http://path/to/thumb/image/3.png"
        }
    ];
</script>

3. Call Nex to do the rest

<script type="text/javascript">
    new Nex({data: slides});
</script>

DEMO

See the Pen nex - fullscreen slider by Thanh Nguyen (@genievn) on CodePen.

CUSTOMIZATION