Nex slider is a fast full-screen slider, optimized for best performance and compatible with all platforms. It allows you to include photos, videos, and even Google Maps in the same slider.

full screen responsive image slider, image slider transition effects css, full screen automatic slideshow html, responsive image slider with text html css

Key Features:

• Customizable slider appearance
• Enhanced Speed
• Touch support
• keyboard support
• Style support
• SEO friendly
• 10 types of effects: Fade, Slide [left, right, top, bottom], Zoom, Skew, Rotate, Random, None
• 5 preset color themes: amethyst, coral, sun, turquoise, default
• Support photo filters: brightness, contrast, grayscale, chromatic rotation, saturation, sepia.
• Various types of content: image, video, map
• Customizable map style: ROADMAP, SATELLITE, HYBRID, TERRAIN
• Customizable maps: Zoom in size, show or hide info window
• Support video from youtube and Vimeo
• Two types of thumbnails: circles and squares
• Compatible browsers: Firefox, Chrome, Safari, IE9-IE11

Scroll a Single Page Full Screen in Vanilla JavaScript | Slider Scroll

How to make use of it:

1. Load jQuery and the Animo JS animation library into the 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 into 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 include Google Maps in the slider.

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

4. Add content to the slider as follows.

var sampleData = [{

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

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

    },{

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

    }

    ...

];

5. Configure the plugin to create 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, 
    
  }
]

Modern Fullscreen Content Slider For jQuery, Nex slider Plugin/Github, full width responsive slider html5

See Demo And Download

Official Website(RiseLedger): Click Here

This superior jQuery/javascript plugin is developed by RiseLedger. For extra advanced usage, please go to the official website.