Modern Fullscreen Content Slider For jQuery - Nex

Nex is a cross-browser, customizable, touch-enabled content slider which allows you to showcase images, videos, Google maps in a pleasant way.

Key features:

• 10 built-on transition effects: Fade, slideLeft, slideRight, slideTop, slideBottom, Zoom, Skew, Rotate, Random, None
• 2 thumbnail navigation types: Circle and Square.
• 5 color themes: Amethyst, Coral, Sun, Turquoise, Default.
• 7 built-in image filters: Brightness, Contrast, Greyscale, Saturate, Sepia, Hue Rotate, None.
• 5 gallery types: Images, Videos, Maps, Mixed, Single.
• Supports both Youtube and Vimeo videos.
• Easy to update and maintain. Load data directly from an array of strings.

Basic usage:

1. Load jQuery and the Animo JS animation library in your document.

<script src="//code.jquery.com/jquery-1.11.2.min.js"></script>
<script src="Animo.min.js"></script>

2. Load the jQuery Nex plugin's JavaScript and CSS in the document.

<link rel="stylesheet" href="nex.min.css"> 
<script src="nex.min.js"></script>

3. Include Google Maps API V3 if you want to embed google maps into the slider.

<script src="//maps.googleapis.com/maps/api/js?v=3&sensor=false"></script>

4. Add content into the slider as follow.

var sampleData = [{

    link        : "1.png",
    thumb       : "thumb-1.png"

    },{
    
    link        : "2.png",
    thumb       : "thumb-2.png"

    },{

    link        : "3.png",
    thumb       : "thumb-3.png"

    }

    ...

];

5. Initialize the plugin to generate a basic content slider.

new Nex({data: sampleData});

6. Full plugin options.

// none, fade, slideLeft, slideRight, slideTop, slideBottom, zoom, rotate, skew, random
transition       : "fade", 

// how long the transition between two images will durate
transition_speed : 600, 

// between images transition
delay            : 7000, 

// auto rotation
autoplay         : false ,

// display thumbnails
thumbnails       : true, 

// display bullets navigation
bullets          : true,

// display a thumbnails bar
bar              : true,

// display a loading bar
load_bar         : true,

style            : {

  // circle, square
  type       : "circle", 

  // none, grayscale, sepia, hue-rotate, brightness, contrast, saturate
  filter     : "none",  

  // url to pattern
  pattern    : "http://your-web-site.com/images/pattern.png", 

  // background color
  background : "#ede8d2", 

  // hover color of background
  hover      : "#aac83f", 

  // text color
  color      : "#000" 
},

data             : [
  {

    // image, map, video
    display     : "image", 

    // image title
    title       : "Image Title", 

    // image description
    description : "quisquam est qui dolorem ipsum quia dolor sit amet eque porro quisquam est qui", 

    // image src
    link        : "", 

    // image thumb
    thumb       : "", 

    // image alt tag
    alt         : "" 

  },

  {
    display : "video",
    title   : "Video Title",
    thumb   : "", 
    url     : "", // video link
    description : "best of inspiration",
    alt : ""
  },

  {
    display     : "map", 
    title       : "Map Title", 
    description : "some kind of description", 
    thumb       : "images/thumb_5.jpg",

    // show or hide the marker of map
    marker      : true, 

    // html content
    infowindow  : "html content to display on marker open", 

    // zoom level of map up to 16
    zoom        : 12, 

    // type of map to display. 
    // Ex: ROADMAP, SATELLITE, HYBRID, TERRAIN
    type        : "HYBRID", 

    // latitude of the map
    lat         : 40.734771, 

    // longitude of the map
    lng         : -73.991654, 
    
  }
]

---

This awesome jQuery plugin is developed by RiseLedger. For more Advanced Usages, please check the demo page or visit the official website.