Getting Started

1 Installing

Download the zip file from here

Or

Install from npm registry 

npm install --save-dev tyle

2 Add js and css files to your html

You can find tyle.css from dist/css and tyle.js from dist/js

<link rel="stylesheet" href="./tyle.css">
<script src='./tyle.js'> </script src='./tyle.js'>

3 HTML Structure

<div class='tyle-area'>
    <div class='tyle-container'> 
        <div class='item'> Content 1 </div>   
        <div class='item'> Content 2 </div>   
        <div class='item'> Content 3 </div>   
        <div class='item'> Content 4 </div>   
    </div>           
</div>

4 Calling tyle


$('.tyle-container').tyle();

Options

duration

Type: Number

Default: 1100

To set the animation duration


$('.tyle-container').tyle({duration:1500});

showProgress

Type: Boolean

Default: true

To show progress bar


$('.tyle-container').tyle({showProgress:false});

showProgressCount

Type: Boolean

Default: true

To show progress count


$('.tyle-container').tyle({showProgressCount:false});

Transition

Type: String

Default: 'Vertical'

To specify transition type


$('.tyle-container').tyle({transition:'horizontal'});

onFinish

Type: event

To perform some action on finish


$('.tyle-container').tyle({onFinish:function(){ 
    alert('Event Finished')
}});
Fork me on GitHub