Ads 468 X 60

Nex Blazing Fast FullScreen Slider

JavaScript – Nex – Blazing Fast FullScreen Slider | CodeCanyon


Nex Blazing Fast FullScreen Slider his title this type of JavaScript/Sliders This time I will review,made by ser-html, JavaScript/Sliders is sold at a price of $8 in themeforest.

Nex - Blazing Fast FullScreen Slider - CodeCanyon Item for Sale

blazing fast // customizeable // full screen // gpu accelerated // nex // optimized speed // sleek // slider //





























Created30 August 13
Last Update30 August 13
Compatible BrowsersIE9, IE10, Firefox, Safari, Opera, Chrome
Software VersionjQuery
High ResolutionNo
Files IncludedJavaScript JS, HTML, CSS




“Nex” – Blazing Fast Fullscreen Slider


General Overview


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.


It’s speed is based upon the fact that it is based on the Animo library which implements custom features from modern browsers like “requestAnimationFrame” and “Gpu Acceleration”


That said Nex, doesn’t need any other libraries at all (except jquery) to implement all it’s functionality, you can see the speed of the slider on the demo page.


It’s very easy to implement, even for beginners due to the fact that it is uses jquery, usage should be no trouble at all.


Down below you can see a quick example on how to implement the library.


Installation Process:


Nex is super easy to install, just follow these steps of installation



  1. Include the scripts and the css files

    <link rel="stylesheet" href="nex.min.css" /><br /> <script type="text/javascript" src="http://code.jquery.com/jquery-1.10.0.min.js"></script> <br /> <script type="text/javascript" src="Animo.min.js"></script> <br /> <script type="text/javascript" src="nex.min.js"></script> <br />



  2. Then all you have to do is init the Nex slider like so: new Nex(params); and inside of it you can pass an object with customization params


If you would like to use google maps in the slider you will need to include this script above any other scripts:


<script type="text/javascript" src="https://maps.googleapis.com/maps/api/js?v=3&sensor=false"></script>


Key Features



  • Customizable slider look

  • Optimized Speed

  • Pattern Support

  • SEO Friendly

  • 10 types of effects:

    1. Fade

    2. Slide from left

    3. Slide from right

    4. Slide from top

    5. Slide from bottom

    6. Zoom

    7. Skew

    8. Rotate

    9. Random

    10. None



  • 5 Predifined Color themes: amethyst, coral, sun, turquoise, and the default one

  • Support of image filters: brightness,contrast,grayscale,hue-rotate,saturate,sepia. (Note that they currently are working only under chrome, opera and safari)

  • 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

  • Compressed and uncompressed files


Credits


Big thanks to Joanna Kustra which allowed me to use her awesome images in the slider


Licenses:


jQuery – Released under the MIT license


Animo Library written by me (Rise Ledger). Released under the MIT license


Google Maps – Creative Commons Attribution 3.0 License


Changelog


1.0.0 – Nex Release Version



0 comments:

Post a Comment