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. 
    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


Responsive Image Gallery Lightbox jQuery Plugin | VenoBox

VenoBox is a responsive jQuery modal window plugin suitable for images, embedded content, iFrames, Google Maps, Vimeo, and YouTube videos. The big difference compared to many other…


[Animation] Bootstrap Multi-Level Responsive Dropdown Menu

Bootstrap-based multi-level dropdown navigation menu with cool animations. The dropdown on Hover is a jQuery plugin used to create Bootstrap multi-level scroll-triggered dropdown menus with CSS3 animations…


Google Translate Dropdown Customize With Country Flag | GT API

Flag google translates jQuery text that takes advantage of the Google Cloud Translation API to translate web content between languages by selecting a country from the dropdown…


HTML 5 File Input Optimized for Bootstrap 4.x./3.x with File Preview | Bootstrap Fileinput

bootstrap-fileinput is an improved HTML 5 file input  Bootstrap 5.x, 4.x and 3.x with file preview for different files, provides multiple selections, resumable section uploads, and more….


CSS Layout Components Horizontal/Vertical Stack | HStack and VStack

HStack and VStack in CSS – CSS layout components that (basically) stack anything horizontally and vertically. A pure CSS library that makes it easy to stack elements…


How to Add Floating Whatsapp Chat Button In HTML | venom-button

Venom Button is a very simple plugin for the jQuery floating WhatsApp button. Adds a floating button to your site that calls WhatsApp Click to Chat API. It will automatically start the WhatsApp…

Leave a Reply

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