Full-Screen Responsive Content Image Slider | Nex

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.

Related Posts

Simple-and-Modern-Multi-Level-Sidebar-Menu-on-Bootstrap-4

[Offcanvas] Simple and Modern Multi-Level Sidebar Menu on Bootstrap 4

The multi-level sidebar menu is simple and fast on Bootstrap. So you must be aware of how to use Bootstrap itself. This plugin is fast, responsive, multi-level,…

vanilla-js-carousel

Flip Sliding Carousel Gallery Made Of CSS And Vanilla JS

Vanilla JS Carousel is a JavaScript Slider plugin for navigating objects in a 3D space just like Cover Flow. Getting started Clone or download the repo. Open…

bootstrap-5-dark-theme

Dark & Light Switch Mode Toggle for Bootstrap 5

Switching to dark mode is done by toggling HTML tags that include -dark or -light as a category. It is made by manipulating the DOM with JavaScript. The text color also changes depending…

vuejs-dialog-plugin

Vuejs Lightweight Prompt Based On Promise And Confirm Dialog

VUEJS DIALOG PLUGIN is a lightweight, promise-based, prompt, and dialog-based alert. Important updates The dialog will always be resolved by an object. (ie a callback to continue…

Lightweight-Flexbox-Carousel-Plugin

Simple and Lightweight Flexbox Carousel Plugin With JavaScript | flexCarousel.js

Flexbox Responsive Slider – flexCarousel.js plugin is a simple and lightweight plug-in from Flexbox carousel ES6 JavaScript. An unofficial fork by Slick Carousel. Flex Carousel is a…

bootstrap-5-multi-level-dropdown

Multi-Level Dropdown Works With Bootstrap 5

Bootstrap 5 Multi-Level Dropdown, using the official HTML without adding additional CSS styles and classes, it’s just like the original support. Not all of the things listed…