blog.web68.vn

our sponsors

Blazing fast fullscreen slider with Nex


INTRODUCTION

I have brought to you a lot of free and beautiful jquery slider in previous post, and today I will introduce a brand new one, a fantastic full screen slider with great performance and elegant beauty. I am sure you will be impressed from the first look.

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

nex - free fullscreen slider

FEATURES

  • Customizable slider look
  • Optimized Speed
  • Touch Support
  • Keyboard Support
  • Pattern Support
  • SEO Friendly
  • 10 types of effects: Fade, Slide [left,right,top,bottom], Zoom, Skew, Rotate, Random, None
  • 5 Predifined Color themes: amethyst, coral, sun, turquoise, and the default one
  • Support of image filters: brightness,contrast,grayscale,hue-rotate,saturate,sepia.
  • 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
  • Compatible Browsers: Firefox, Chrome, Safari, IE9-IE11

HOW TO USE

1. Include CSS,JS

<link rel='stylesheet' href='https://cdn.rawgit.com/RiseLedger/Nex/master/css/nex.min.css'>
<script src='//ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js'></script>
<script src='https://cdn.rawgit.com/RiseLedger/Nex/master/js/Animo.min.js'></script>
<script src='https://cdn.rawgit.com/RiseLedger/Nex/master/js/nex.min.js'></script>

2. Create your slide's data in javascript:

<script type="text/javascript">
    var slides = [
        {
            link        : "http://path/to/fullscreen/image/1.png",
            thumb       : "http://path/to/thumb/image/1.png"
        },

        {
            link        : "http://path/to/fullscreen/image/2.png",
            thumb       : "http://path/to/thumb/image/2.png"
        },

        {
            link        : "http://path/to/fullscreen/image/3.png",
            thumb       : "http://path/to/thumb/image/3.png"
        }
    ];
</script>

3. Call Nex to do the rest

<script type="text/javascript">
    new Nex({data: slides});
</script>

DEMO

 

See the Pen nex - fullscreen slider by Thanh Nguyen (@genievn) on CodePen.

CUSTOMIZATION

Property Default Description
transition random Allows you setup a transition. 
Can be set to: 
none
 
fade
 
slideLeft
 
slideRight
 
slideTop
 
slideBottom
 
zoom
 
rotate
 
skew
 
random
transition_speed 600 Change this to modify the transition speed in miliseconds
delay 7000 The pause in between switching images in miliseconds.
autoplay true To autoplay the gallery or not. Can be set to true or false.
thumbnails true If you want to show or hide the thumbnails change this. Can be set to true or false
bullets true Show or hide the small bullets under the sliders. Can be set to true or false.
bar true Show or hide the thumbnails bar. Can be set to true or false.
load_bar true Show or hide the loading bar. Can be set to true or false.
style object This option accepts an object with the following available parameters: 
 
type circle You can customize the thumbnails and bullets. 
Can be set to 
circle
 or 
square
filter none Select a filter for the images. Shown only in supported browsers. 
Can be set to: 
none
 
grayscale
 
sepia
 
hue-rotate
 
brightness
 
contrast
 
saturate
pattern none Enter the url to a pattern.
background #ede8d2 Choose your background color
hover #aac83f Choose the hover color
color #000 Choose the color of the text
data object This parameter accepts an object which holds the slider data: 
 
display image Select the type of the slide. 
Can be set to: 
image
 
map
 
video
title none Your slide title
description none Your slide description
thumb none Your slide thumbnail src. Ignored if thumbnail is set to false.
link none The source to the image. Works only when display is set to 
image
alt none Your image alt. Works only when display is set to 
image
url none Your video url. Works only when display is set to 
video
marker none Show or hide the marker on the google maps. 
Can be set to true or false. 
Works only when display is set to 
map
infowindow none The html content to be shown on the marker upon click. 
Works only when display is set to 
map
zoom 12 Enter the zoom level. 
Works only when display is set to 
map
type ROADMAP Select maps type. 
Can be set to 
HYBRID
 
ROADMAP
 
SATELLITE
 
TERRAIN
 

Works only when display is set to 
map
lat none Enter your google maps latitude position 
Works only when display is set to 
map
lng none Enter your google maps longituted position
Works only when display is set to 
map

Tags
slider  jquery  fullscreen  video  map  
comments powered by Disqus