“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

Leave a Reply

Your email address will not be published. Required fields are marked *

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>