diff --git a/.editorconfig b/.editorconfig
new file mode 100755
index 0000000..407f794
--- /dev/null
+++ b/.editorconfig
@@ -0,0 +1,19 @@
+# EditorConfig helps developers define and maintain consistent
+# coding styles between different editors and IDEs
+# http://editorconfig.org
+
+root = true
+
+[*]
+# Change these settings to your own preference
+indent_style = space
+indent_size = 4
+
+# We recommend you to keep these unchanged
+end_of_line = lf
+charset = utf-8
+trim_trailing_whitespace = true
+insert_final_newline = true
+
+[*.md]
+trim_trailing_whitespace = false
diff --git a/.gitignore b/.gitignore
new file mode 100755
index 0000000..b1dd0e9
--- /dev/null
+++ b/.gitignore
@@ -0,0 +1,3 @@
+bower_components/
+node_modules/
+.tmp/
\ No newline at end of file
diff --git a/README.md b/README.md
new file mode 100644
index 0000000..94d0c4a
--- /dev/null
+++ b/README.md
@@ -0,0 +1,105 @@
+# <x-carousel>
+
+> My awesome Custom Element
+
+## Demo
+
+[Check it live!](http://Nevraeka.github.io/x-carousel)
+
+## Install
+
+Install the component using [Bower](http://bower.io/):
+
+```sh
+$ bower install x-carousel --save
+```
+
+Or [download as ZIP](https://github.com/Nevraeka/x-carousel/archive/master.zip).
+
+## Usage
+
+1. Import Web Components' polyfill:
+
+ ```html
+
+ ```
+
+2. Import Custom Element:
+
+ ```html
+
+ ```
+
+3. Start using it!
+
+ ```html
+
+ ```
+
+## Options
+
+Attribute | Options | Default | Description
+--- | --- | --- | ---
+`foo` | *string* | `bar` | Lorem ipsum dolor.
+
+## Methods
+
+Method | Parameters | Returns | Description
+--- | --- | --- | ---
+`unicorn()` | None. | Nothing. | Magic stuff appears.
+
+## Events
+
+Event | Description
+--- | ---
+`onsomething` | Triggers when something happens.
+
+## Development
+
+In order to run it locally you'll need to fetch some dependencies and a basic server setup.
+
+* Install [Bower](http://bower.io/) & [Gulp](http://gulpjs.com/):
+
+ ```sh
+ $ [sudo] npm install -g bower gulp
+ ```
+
+* Install local dependencies:
+
+ ```sh
+ $ bower install && npm install
+ ```
+
+* To test your project, start the development server and open `http://localhost:8000`.
+
+ ```sh
+ $ gulp server
+ ```
+
+* To build the distribution files before releasing a new version.
+
+ ```sh
+ $ gulp build
+ ```
+
+* To provide a live demo, send everything to `gh-pages` branch.
+
+ ```sh
+ $ gulp deploy
+ ```
+
+## Contributing
+
+1. Fork it!
+2. Create your feature branch: `git checkout -b my-new-feature`
+3. Commit your changes: `git commit -m 'Add some feature'`
+4. Push to the branch: `git push origin my-new-feature`
+5. Submit a pull request :D
+
+## History
+
+For detailed changelog, check [Releases](https://github.com/Nevraeka/x-carousel/releases).
+
+## License
+
+[MIT License](http://opensource.org/licenses/MIT)
diff --git a/bower.json b/bower.json
new file mode 100755
index 0000000..3fd20a9
--- /dev/null
+++ b/bower.json
@@ -0,0 +1,20 @@
+{
+ "name": "x-carousel",
+ "version": "0.0.0",
+ "description": "My awesome Custom Element",
+ "license": "MIT",
+ "main": "dist/x-carousel.html",
+ "keywords": [
+ "x-tag",
+ "web-components"
+ ],
+ "ignore": [
+ "**/.*",
+ "node_modules",
+ "bower_components"
+ ],
+ "dependencies": {
+ "x-tag-core": "^1.0.0",
+ "webcomponentsjs": "^0.5.1"
+ }
+}
diff --git a/gulpfile.js b/gulpfile.js
new file mode 100755
index 0000000..5fd74d5
--- /dev/null
+++ b/gulpfile.js
@@ -0,0 +1,62 @@
+var gulp = require('gulp');
+var connect = require('gulp-connect-multi')();
+var replace = require('gulp-replace');
+var ghpages = require('gh-pages');
+var clean = require('gulp-clean');
+var path = require('path');
+
+var copy = function (){
+ gulp.src([
+ 'bower_components/**/*',
+ 'demo/*',
+ 'src/*',
+ 'index.html'
+ ], {
+ base: './'
+ })
+ .pipe(gulp.dest('./.tmp/'));
+}
+
+var build = function (){
+ gulp.src(['src/*'])
+ .pipe(replace(/bower_components/g, '..'))
+ .pipe(gulp.dest('dist/'));
+}
+var ignore = function (){
+ gulp.src(['./.tmp/bower_components/x-carousel'])
+ .pipe(clean());
+}
+
+gulp.task('server', connect.server({
+ root: [__dirname],
+ port: 8000,
+ livereload: true
+}));
+
+gulp.task('build', ['beforebuild'],function(){
+ build()
+});
+gulp.task('beforebuild', function(){
+ copy()
+ ignore()
+});
+
+gulp.task('deploy', ['beforebuild'], function () {
+
+ ghpages.publish(path.join(__dirname, '.tmp/'), {
+ clone: 'bower_components/x-carousel',
+ logger: function(message) {
+ console.log(message);
+ }
+ } , function(err) {
+
+ console.log("");
+ if(err.errno == 34){
+ console.log("Error: You need run 'gulp build' before deploy your custom element in gh-pages.\n");
+ } else if(typeof err.errno == "undefined"){
+ console.log("Error: You need add a remote repository before deploy your custom element in gh-pages.\n");
+ }
+
+ }, true);
+
+});
\ No newline at end of file
diff --git a/index.html b/index.html
new file mode 100755
index 0000000..360d9c6
--- /dev/null
+++ b/index.html
@@ -0,0 +1,19 @@
+
+
+
+
+ <x-carousel>
+
+
+
+
+
+
+
+
+
+
+
+
+
+
diff --git a/package.json b/package.json
new file mode 100755
index 0000000..a0655d6
--- /dev/null
+++ b/package.json
@@ -0,0 +1,10 @@
+{
+ "private": true,
+ "devDependencies": {
+ "gulp": "^3.8.7",
+ "gulp-replace": "^0.4.0",
+ "gulp-connect-multi": "^1.0.8",
+ "gulp-clean": "^0.3.1",
+ "gh-pages": "^0.2.0"
+ }
+}
\ No newline at end of file
diff --git a/src/x-carousel.html b/src/x-carousel.html
new file mode 100755
index 0000000..9d788f8
--- /dev/null
+++ b/src/x-carousel.html
@@ -0,0 +1,25 @@
+
+
+
+