Infinity Slider

Infinity Slider has a lot of features that will transform your Site into an Excellent WebSite. You can choose between 3 layouts or simply create a new one. Change the style setting the width, height, colors, buttons, links etc.

Infinity Slider give you Infinity ways to customize your slides.

 Special Features

•  Real Responsive with Autofit Selection
•  Select the position of the subject
•  Select the Time of every Element
•  Select the Time of every Slide
•  Select the Delay of every Element
•  Select the Delay of every Slide
•  Custom HTML&CSS Elements Supported

 Skin & Layouts

•  Full-Screen Slider Skin NEW
•  Fullwith and Boxed Slider
•  3 Different skins that you can use
•  Easy colors & positions costumization
•  Included Bootstrap 3.1.1 elements
•  Included the current demo template

 Technology

•  Super-Fluid Slider with CSS3 animations
•  HTML5 attributes with data
•  Youtube & Vimeo APIs integrated
•  Special Effects with Canvas
•  Crossbrowser compatibility IE9+

 Slider Effects

•  Normal Effects like fade and slide
•  3D Effects like Zoom, Spin and Flip
•  Grayscale Effect with Canvas
•  9 Different Cinematic Special Effects
•  Automatic Blur Effect with Custom Value NEW
•  Automatic TextHole Effect with Canvas
•  Innovative Canvas Effects

 Useful Features

•  Multi-Sliders on the single page
•  Slider inside one Slider
•  Optional Autoplay with true/false
•  Optional Autoplay Stop with Hover
•  Fully combinables effects
•  Dedicated Loader for your page or slide
•  Keyboard Navigation
•  Touch Navigation NEW
•  Compatible with all the SEO techniques
•  Fully support of Video Embedding
•  Autocheck Errors with Automatic Alert
•  Select the Starter Slider NEW
•  Included Font-Awesome 4
•  Support and Complete Documentation

4. EFFECTS, TIMES AND DELAYS

Infinity Slider allows you to use a lot of effects, times and delays that you can combine to create new animations. You can insert images, buttons, forms, links, videos or custom div as elements of your slider and define an effect for each of them.

Set your Effects

Inside the structure you will find the codes “data-effectIn” or “data-effectOut”, with these codes you can easily defines the animation to assign to an element when it “enter” or “leave”

If you want to set an effect “slideright” you have to insert it inside the effectIn data, for example:

<div class="iS-Item" data-effectIn="slideright">

Set your times

Obviously, you can set the time of this animation using the effectInTime data, like this:

<div class="iS-Item" data-effectIn="slideright" data-effectInTime="500">

This example will animate the element at the speed of 500 milliseconds, you can set the time from 0 to infinity.

Set your Delays

Furthermore you can also set your Delays, it’s really easy and you can create fantastic effects using it on every element of your slider.

<div class="iS-Item" data-effectIn="slideright" data-effectInTime="500" data-effectInDelay="0">

It works like the effects time, is calculated by milliseconds and you can set a negative time from -infinity to +infinity, for example “-500” “0” or“1000”.

 

5. SPECIAL CLASSES

Inside Infinity Slider there are many classes developed to help you to create your perfect slider:

iS-ImageBlur: Create a real Blur Effect on your image, simply adding the class to your html code:

<img class="iS-ImageBlur" src="images/your_image" />

iS-ImageGreyscale: Using this class on you image you will create a perfect greyscale effect of it.

iS-TextCenter: You can use this class on your test to center it horizontally on your slider.

<p class="iS-TextCenter">Your Horizontally Centered Text</p>

iS-TextMiddle: You can use this class on your test to center it vertically on your slider.

iS-TextHole: This class transform your text into a transparent text creating a “hole effect” on your “div” . You can see this effect in Infinity Slider home page.

iS-ImageAutofit: This is our "responsive class" that make your images responsive, you can select the position for your subject and preserve the same image high quality on every computer or mobile device.

iS-Cinematic: A fantastic effect that allow you to make your images move, you can choose the directions and customize it as you want.

Other Variables & Classes

We have set more kinds of variables and classes that you will find inside our Documentation.

 

6. SLIDE STYLE

Infinity Slider has been created to be customized so you can change the style as you wish, modifying the css file you can set the sizes, colors and positions of your slider.

Layout

You can choose the perfect layout for your slider or create a new one.

Colors

The colors has been wrote in a separated css file, so you can simply change the colors for your slider as soon as possible.