Pen Settings

HTML

CSS

CSS Base

Vendor Prefixing

Add External Stylesheets/Pens

Any URL's added here will be added as <link>s in order, and before the CSS in the editor. If you link to another Pen, it will include the CSS from that Pen. If the preprocessor matches, it will attempt to combine them before processing.

+ add another resource

JavaScript

Babel is required to process package imports. If you need a different preprocessor remove all packages first.

Add External Scripts/Pens

Any URL's added here will be added as <script>s in order, and run before the JavaScript in the editor. You can use the URL of any other Pen and it will include the JavaScript from that Pen.

+ add another resource

Behavior

Save Automatically?

If active, Pens will autosave every 30 seconds after being saved once.

Auto-Updating Preview

If enabled, the preview panel updates automatically as you code. If disabled, use the "Run" button to update.

Format on Save

If enabled, your code will be formatted when you actively save your Pen. Note: your code becomes un-folded during formatting.

Editor Settings

Code Indentation

Want to change your Syntax Highlighting theme, Fonts and more?

Visit your global Editor Settings.

HTML

              
                <html lang="en">
<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="user-scalable=no, initial-scale=1">
	<title>Document</title>
</head>
<body>

<!--

- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
- S L T O U C H - V.0.1 alpha - - - - - - - - - - - - - - - -
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
- Change slider in touch
- Desktop (CLICK) and Mobile (TOUCH) Support
- See #config for more details
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
- REQUIRES
- NOTING!!! fully javascript lol
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
- Created 15/08/2016
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
- FREE FOR ALL NOW
- Hey this Free Cultural Works, Libre Niced!
- More http://creativecommons.org/freeworks
- Lets go! Study and Share
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
- WIZARD FLY [FRONT END performance]
- Adonis Vieira - Front Nice
- https://wizardfly.com.br
- http://fb.com/doniextreme [social]
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
- I T I S T H E G R E A T E ( w ) I Z A R D W H O F L I E S -
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
_____________________________________________________________________________________________

- # config
- attributes html5

- For SLIDER (div.sldTouch)
- data-grid['string'] = (ex: .CLASS) element GRID default - full width for slider
- data-margin['number'] = (ex: 100) pixels for next slider // show prev next slider

- For SLIDE (li)
- data-text['string'] = text for bullet name
_____________________________________________________________________________________________

- # info

- for all attributes BOOLEAN, if not have BOO, default is FALSE!
- if not have data-grid, default width is window
_____________________________________________________________________________________________

- # example html

<div class="sldTouch"> // SLIDER
	<ul> // BASE
		<li> // SLIDE
			your content here #01
		</li>
	</ul>
</div>
_____________________________________________________________________________________________


news functions in DEV
- data-auto['boolean'] = (ex: true or false) automatic slider
- data-time['number'] = (ex: 1 seg = 1000) for change to next slider
- data-bullet['boolean'] = (ex: true or false) automatic slider
- data-caption['boolean'] = (ex: true or false) for bullet name
- data-nav['boolean'] =  (ex: true or false) automatic slider

-->

	<div class="grid">

		<div class="sldTouch" data-grid=".grid" data-margin="100">
				<ul>
					<li data-text="caption sld 01">
						<!-- CONTENT -->
						<div class="shelf">
							<figure>
								<div class="image">
									<a href="URLPRODUCT01" title="product">
										<img src="https://s4.postimg.org/5uh5hn9tp/sld_1.jpg" width="270" height="270" alt="Product Image"/>
										<span class="flagCategory">
											Category
										</span>
									</a>
								</div>
								<div class="content">
									<a href="URLPRODUCT01" title="product">
										<figcaption>
											Product Name
										</figcaption>
										<p>
											<span class="oldPrice">
												de R$ 99,99
											</span>
											por
											<span class="newPrice">
												R$ R$ 99,99 à vista
											</span>
											<strong>
												10x de R$ 9,99
											</strong>
											<em>
												sem juros
											</em>
										</p>
										<button>
											+ detalhes
										</button>
									</a>
								</div>
							</figure>
						</div>
						<!-- /CONTENT -->
					</li>
					<li data-text="caption sld 02">
						<!-- CONTENT -->
						<div class="shelf">
							<figure>
								<div class="image">
									<a href="URLPRODUCT02" title="product">
										<img src="https://s4.postimg.org/e19597zwd/sld_2.jpg" width="270" height="270" alt="Product Image"/>
										<span class="flagCategory">
											Category
										</span>
									</a>
								</div>
								<div class="content">
									<a href="URLPRODUCT02" title="product">
										<figcaption>
											Product Name
										</figcaption>
										<p>
											<span class="oldPrice">
												de R$ 99,99
											</span>
											por
											<span class="newPrice">
												R$ R$ 99,99 à vista
											</span>
											<strong>
												10x de R$ 9,99
											</strong>
											<em>
												sem juros
											</em>
										</p>
										<button>
											+ detalhes
										</button>
									</a>
								</div>
							</figure>
						</div>
						<!-- /CONTENT -->
					</li>
					<li data-text="caption sld 03">
						<!-- CONTENT -->
						<div class="shelf">
							<figure>
								<div class="image">
									<a href="URLPRODUCT03" title="product">
										<img src="https://s4.postimg.org/s8ytxvcl9/sld_3.jpg" width="270" height="270" alt="Product Image"/>
										<span class="flagCategory">
											Category
										</span>
									</a>
								</div>
								<div class="content">
									<a href="URLPRODUCT03" title="product">
										<figcaption>
											Product Name
										</figcaption>
										<p>
											<span class="oldPrice">
												de R$ 99,99
											</span>
											por
											<span class="newPrice">
												R$ R$ 99,99 à vista
											</span>
											<strong>
												10x de R$ 9,99
											</strong>
											<em>
												sem juros
											</em>
										</p>
										<button>
											+ detalhes
										</button>
									</a>
								</div>
							</figure>
						</div>
						<!-- /CONTENT -->
					</li>
					<li data-text="caption sld 04">
						<!-- CONTENT -->
						<div class="shelf">
							<figure>
								<div class="image">
									<a href="URLPRODUCT04" title="product">
										<img src="https://s4.postimg.org/4w0sfcwhp/sld_4.jpg" width="270" height="270" alt="Product Image"/>
										<span class="flagCategory">
											Category
										</span>
									</a>
								</div>
								<div class="content">
									<a href="URLPRODUCT04" title="product">
										<figcaption>
											Product Name
										</figcaption>
										<p>
											<span class="oldPrice">
												de R$ 99,99
											</span>
											por
											<span class="newPrice">
												R$ R$ 99,99 à vista
											</span>
											<strong>
												10x de R$ 9,99
											</strong>
											<em>
												sem juros
											</em>
										</p>
										<button>
											+ detalhes
										</button>
									</a>
								</div>
							</figure>
						</div>
						<!-- /CONTENT -->
					</li>
				</ul>
			<!-- </div> -->
		</div>

	</div>
</body>
</html>
              
            
!

CSS

              
                /* --------------- */
/* STYLE: sldTouch */
/* --------------- */

html,
body,
div,
ul,
li,
a{
    border:0;
    padding:0;
    margin:0;
    list-style:none;
    text-decoration: none;
}

.sldTouch{
	width:100%;
	margin: 10px 0 0;
	overflow:hidden;
	position: relative;
	float:left;
}

.sldTouch ul{
	width:1000%;
}

.sldTouch ul.transition{
	transition:all 0.4s;
}

.sldTouch ul li{
	width:100%;
	float: left;
}

.sldTouch .bullet{
	width:100%;
	position:absolute;
	bottom:-50px;
}

.sldTouch .bullet button{
	width:10px;
	height:10px;
	display:inline-block;
}

.sldTouch .navigator{
	width:100%;
	float: left;	
}

/* ------------------------- */
/* STYLE: default box slider */
/* ------------------------- */

/* -- config -- */

/* --------- */
/* REMOVE ME */
.grid{
    width:100%;
    max-width:400px;
    margin:0 auto;
}
/* REMOVE ME */
/* --------- */

/* -- shelf -- */

.shelf {
    width:90%;
    margin: 10px auto;
    overflow: hidden;
    padding: 0 0 15px;
    transition: all 0.4s;
}

.shelf:hover {
    box-shadow: 0 0 25px #a7a7a7;
    border-radius: 5px;
}

.shelf figure{
    width: 100%;
    margin: 0;
    display: block;
}

.shelf figure a {
    width: 100%;
    float: left;
    position: relative;
    display: block;
}

.shelf figure div a img {
    width: 100%;
    display: block;
}

.shelf figure .image {
    width:100%;
    background: #e8e8e8;
    padding:0 0 100%;
    position: relative;
    text-align: center;
}

.shelf figure .image a{
    position: static;
}

.shelf figure .image .flagUnits {
    width: 86px;
    position: absolute;
    top: 0;
    padding: 10px 0;
    background: #ff4e50;
    display: block;
    margin: 0 auto;
    left: calc(50% - 43px);
    font-size: 13px;
    color: #FFFFFF;
    text-transform: uppercase;
    font-weight: 700;
}

.shelf figure .image .flagUnits:after {
    content: '';
    vertical-align: middle;
    margin-right: 10px;
    width: 0;
    height: 0;
    border-left: 43px solid transparent;
    border-right: 43px solid transparent;
    border-top: 12px solid #ff4e50;
    display: inline-block;
    position: absolute;
    bottom: -12px;
    left: 0;
}

.shelf figure .image .flagCategory {
    width: 120px;
    position: absolute;
    background: #111111;
    left: calc(50% - 60px);
    bottom: 0;
    font-size: 13px;
    color: #FFFFFF;
    font-weight: 700;
    padding: 6px 0;
    text-transform: uppercase;
    border-radius: 6px 6px 0 0;
}

.shelf figure .image a img {
    width: 100%;
    height: inherit;
    display: block;
}

.shelf .content {
    text-align: center;
}

.shelf .content a figcaption {
    font-weight: 100;
    font-size: 14px;
    color: #545454;
    margin: 10px auto;
    display: block;
    width: 90%;
    line-height: 20px;
    overflow: hidden;
    height: 40px;
}

.shelf .content a {
    color: #545454;
}

.shelf .content a .noStock strong{
    line-height: 30px;
    display: block;
    font-size: 20px;
    position: relative;
    color: #a7a7a7;
    height: 30px;
    margin: 45px 0;
}

.shelf .content a p span.oldPrice {
    font-weight: 100;
    font-size: 14px;
    color: #898989;
    margin: 0 auto;
    display: inline-block;
    text-decoration: line-through;
}

.shelf .content a p span.newPrice {
    font-weight: 700;
    font-size: 14px;
    margin: 0 auto;
    display: block;
}

.shelf .content a p strong {
    font-weight: 700;
    font-size: 22px;
    color: #41a61e;
    margin: 0 auto;
    display: block;
}

.shelf .content a p em {
    font-weight: 100;
    font-size: 14px;
    color: #545454;
    margin: 0 auto 20px;
    font-style: normal;
    display: block;
}

.shelf .content a button {
    width: 85%;
    background: #4dc423;
    border:0;
    border-bottom: 3px solid #3b951b;
    padding: 6px 0;
    font-weight: 700;
    font-size: 14px;
    color: #FFFFFF;
    text-transform: uppercase;
    border-radius: 6px;
    margin: 0 auto;
    cursor: pointer;
    transition: all 0.4s;
    display: block;
}

.shelf .content a button:hover {
    background: #ff4e50;
    border-bottom: 3px solid #ab3536;
}

/* -- category and departament -- */
              
            
!

JS

              
                // -------------------------------------
// MODULE: C H E C K u D E V I C E -----
// -------------------------------------

/*
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
- C H E C K u D E V I C E - V.0.1 - - - - - - - - - - - - - -
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
- Check client device and set corrects events and styles 	-
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
- CREATED: 21/07/16 										-
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
- COURTESY                                                  -
- WIZARD FLY [FRONT END performance]                        -
- Adonis Vieira - Front Nice                                -
- https://wizardfly.com.br                                   -
- http://fb.com/doniextreme [social]                        -
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
- SPECIAL TKS FOR 											-
- Oriadam [FNC:CheckAgent] 									-
- https://jsfiddle.net/oriadam/ncb4n882/ 					-
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
- I T I S T H E G R E A T E ( w ) I Z A R D W H O F L I E S -
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
*/

// -----------
// APPLICATION
// -----------
var Wapp = Wapp || {};

(function (w, d, vars) {
	'use strict';

	vars = {
		example : 'example var',
	};

	// ------
 	// MODULE
 	// ------
 	Wapp.CheckDevice = {};

	Wapp.CheckDevice.Init = function (debug) {
		if (debug) {
            console.log('- - - - - - - - - - - - - -');
            console.log('C H E C K u D E V I C E - V 0 1');
            console.log('- - - - - - - - - - - - - -');
            console.log('APPLICATION [Wapp]: ', Wapp);
            console.log('MODULE [CheckDevice]: ', Wapp.CheckDevice);
            console.log('Global vars: ', vars);
            console.log('- - - - - - - - - - - - - -');
        }

		Wapp.CheckDevice.CheckAgent();
	};

	Wapp.CheckDevice.CheckAgent = function () {
		var
			ua 		= navigator.userAgent,
			browser = /Edge\/\d+/.test(ua) ? 'ed' : /MSIE 9/.test(ua) ? 'ie9' : /MSIE 10/.test(ua) ? 'ie10' : /MSIE 11/.test(ua) ? 'ie11' : /MSIE\s\d/.test(ua) ? 'ie?' : /rv\:11/.test(ua) ? 'ie11' : /Firefox\W\d/.test(ua) ? 'ff' : /Chrome\W\d/.test(ua) ? 'gc' : /Chromium\W\d/.test(ua) ? 'oc' : /\bSafari\W\d/.test(ua) ? 'sa' : /\bOpera\W\d/.test(ua) ? 'op' : /\bOPR\W\d/i.test(ua) ? 'op' : typeof MSPointerEvent !== 'undefined' ? 'ie?' : '',
			os 		= /Windows NT 10/.test(ua) ? "win10" : /Windows NT 6\.0/.test(ua) ? "winvista" : /Windows NT 6\.1/.test(ua) ? "win7" : /Windows NT 6\.\d/.test(ua) ? "win8" : /Windows NT 5\.1/.test(ua) ? "winxp" : /Windows NT [1-5]\./.test(ua) ? "winnt" : /Mac/.test(ua) ? "mac" : /Linux/.test(ua) ? "linux" : /X11/.test(ua) ? "nix" : "",
			mobile 	= /IEMobile|Windows Phone|Lumia/i.test(ua) ? 'w' : /iPhone|iP[oa]d/.test(ua) ? 'i' : /Android/.test(ua) ? 'a' : /BlackBerry|PlayBook|BB10/.test(ua) ? 'b' : /Mobile Safari/.test(ua) ? 's' : /webOS|Mobile|Tablet|Opera Mini|\bCrMo\/|Opera Mobi/i.test(ua) ? 1 : 0,
			tablet 	= /Tablet|iPad/i.test(ua),
			touch 	= 'ontouchstart' in document.documentElement,
			obj 	= {},
			cssDesk	= '',
			cssMob	= '';

		// result
		obj.result = {};
		obj.result.ua 		= ua;
		obj.result.os 		= os;
		obj.result.browser	= browser;
		obj.result.mobile 	= mobile;
		obj.result.tablet 	= tablet;
		obj.result.touch 	= touch;

		// legend
		obj.legend = {};
		obj.legend.browser = [
			'ed = Microsoft Edge',
			'ie9 = Explorer 9',
			'ie10 = Explorer 10',
			'ie11 = Explorer 11',
			'ie? = Explorer of unknown version',
			'ff = Firefox',
			'gc = Google Chrome',
			'oc = Chromium',
			'sa = Safari',
			'op = Opera'
		];
		obj.legend.os = [
			'win7',
			'win8',
			'win9',
			'win10',
			'winvista',
			'winxp',
			'winnt',
			'mac',
			'linux',
			'nix'
		];
		obj.legend.mobile = [
			'mobile - including tablets:',
			'0 = Not mobile/tablet',
			'w = Nokia or other Windows Phone',
			'i = iOS - iPhone or iPad',
			'a = Android',
			'b = Blackberry',
			's = Safari on non-iphone',
			'1 = Other mobile or undetected'
		];
		obj.legend.tablet = [
			'true',
			'false'
		];
		obj.legend.touch = [
			'true',
			'false'
		];

		// -------------
		// D E S K T O P
		// -------------
		if (obj.result.mobile === 0) {
			// functions for desk
			Wapp.CheckDevice.ForDesk();

		// -----------
		// M O B I L E
		// -----------
		} else if ((obj.result.mobile !== 0) && (obj.result.tablet === false)) {
			// functions for mobo
			Wapp.CheckDevice.ForMobo();

		// -----------
		// T A B L E T
		// -----------
		} else if ((obj.result.mobile !== 0) && (obj.result.tablet === true))  {
			// functions for tablet
			Wapp.CheckDevice.ForTablet();
		}

		// console.log('CheckAgent DEBUG');
		// console.log('obj.result', obj.result);
		// console.log('obj.legend', obj.legend);
		// console.log('- - - - - - - - - - - - - -');
	};

	Wapp.CheckDevice.CreateCss = function (fileName) {
		var
			head = document.head,
			link = document.createElement('link');

		link.type = 'text/css';
		link.rel = 'stylesheet';
		link.href = fileName;

		head.appendChild(link);
	};

	// ---------------------------------------
	// F U N C T I O N S  F O R  D E S K T O P
	// ----------------------------------------
	Wapp.CheckDevice.ForDesk = function () {
		console.log('set all functions and styles for');
		console.log('D E S K T O P');

		// add corretly css
		//Wapp.CheckDevice.CreateCss('/css/css_desktop.css');
	};

	// -------------------------------------
	// F U N C T I O N S  F O R  M O B I L E
	// -------------------------------------
	Wapp.CheckDevice.ForMobo = function () {
		console.log('set all functions and styles for');
		console.log('M O B I L E');

		// add corretly css
		//Wapp.CheckDevice.CreateCss('/css/css_mobile.css');
	};

	// -------------------------------------
	// F U N C T I O N S  F O R  T A B L E T
	// -------------------------------------
	Wapp.CheckDevice.ForTablet = function () {
		console.log('set all functions and styles for');
		console.log('T A B L E T');

		// add corretly css
		//Wapp.CheckDevice.CreateCss('/css/css_tablet.css');
	};

	d.addEventListener("DOMContentLoaded", Wapp.CheckDevice.Init(true));

}(window, document, 'Private'));

// -------------------------------------
// MODULE: S L T O U C H ---------------
// -------------------------------------

/*
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
- S L T O U C H - V.0.1 alpha - - - - - - - - - - - - - - - -
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
- Change slider in touch                                    -
- Desktop (CLICK) and Mobile (TOUCH) Support                -
- See #config for more details                              -
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
- REQUIRES                                                  -
- NOTING!!! fully javascript lol                            -
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
- Created 15/08/2016                                        -
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
- FREE FOR ALL NOW                                          -
- Hey this Free Cultural Works, Libre Niced!                -
- More http://creativecommons.org/freeworks                 -
- Lets go! Study and Share                                  -
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
- COURTESY                                                  -
- WIZARD FLY [FRONT END performance]                        -
- Adonis Vieira - Front Nice                                -
- https://wizardfly.com.br                                   -
- http://fb.com/doniextreme [social]                        -
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
- SPECIAL TKS FOR                                           -
- Oriadam [FNC:CheckAgent]                                  -
- https://jsfiddle.net/oriadam/ncb4n882/                    -
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
- I T I S T H E G R E A T E ( w ) I Z A R D W H O F L I E S -
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
-------------------------------------------------------------------------------------
- # config
- attributes html5

- For SLIDER (div.sldTouch)
- data-grid['string'] = (ex: .CLASS) element GRID default - full width for slider
- data-margin['number'] = (ex: 100) pixels for next slider // show prev next slider

- For SLIDE (li)
- data-text['string'] = text for bullet name
-------------------------------------------------------------------------------------
- # info

- for all attributes BOOLEAN, if not have BOO, default is FALSE!
- if not have data-grid, default width is window
-------------------------------------------------------------------------------------
- # example html

<div class="sldTouch"> // SLIDER
    <ul> // BASE
        <li> // SLIDE
            your content here #01
        </li>
    </ul>
</div>
-------------------------------------------------------------------------------------

news functions in DEV
- data-auto['boolean'] = (ex: true or false) automatic slider
- data-time['number'] = (ex: 1 seg = 1000) for change to next slider
- data-bullet['boolean'] = (ex: true or false) automatic slider
- data-caption['boolean'] = (ex: true or false) for bullet name
- data-nav['boolean'] =  (ex: true or false) automatic slider

*/

// -----------
// APPLICATION
// -----------
var Wapp = Wapp || {};

(function(d, w, vars) {
    'use strict';

    // -----------
    // GLOBAL VARS
    // -----------
    vars = {
        sld             : 'sldTouch', // class (div)
        base            : 'sldBase', // class (ul)
        sldLi           : 'sld', // class (li)
        view            : w.innerWidth, // default width
        margin          : 150, // px
        url             : '#', // href

        // flags
        device          : 0, // click support [0] | touch support [1]
        flag            : 0, // animation [0] | change left [1] | change right [2]
        time            : 4000, // time change slider [automatic] (default 4 sec)

        // positions
        tscX            : 0, // px
        tscY            : 0, // px
        tmcX            : 0, // px
        tmcY            : 0, // px
        tedX            : 0, // px
        tedY            : 0, // px

        // events
        startEvent      : '',
        moveEvent       : '',
        releaseEvent    : '',
    };

    // ------
    // MODULE
    // ------
    Wapp.SldTouch = {};

    // ----
    // Init
    // ----
    // for all functions init
    // --
    // @params
    // debug = [boolean] true for console.log init
    Wapp.SldTouch.Init = function (debug) {
        if (debug) {
            console.log('- - - - - - - - - - - - - -');
            console.log('S L T O U C H - V.0.1 alpha');
            console.log('- - - - - - - - - - - - - -');
            console.log('APPLICATION [Wapp]: ', Wapp);
            console.log('MODULE [SldTouch]: ', Wapp.SldTouch);
            console.log('Events support :', Wapp.SldTouch.CheckEvent() ? 'Touch' : 'Click');
            console.log('Global vars: ', vars);
            console.log('- - - - - - - - - - - - - -');
        }

        Wapp.SldTouch.CreateSld(vars.sld);
    };

    // ------
    // Listen
    // ------
    // for all events listener
    Wapp.SldTouch.Listen = function () {
        vars.startEvent = Wapp.SldTouch.CheckEvent() ? "touchstart" : "mousedown";
        vars.moveEvent = Wapp.SldTouch.CheckEvent() ? "touchmove" : "mousemove";
        vars.releaseEvent = Wapp.SldTouch.CheckEvent() ? "touchend" : "mouseup";

        Wapp.SldTouch.AddEventsClass(vars.startEvent, vars.sld, Wapp.SldTouch.TouchStart, 'li');
        Wapp.SldTouch.AddEventsClass(vars.releaseEvent, vars.sld, Wapp.SldTouch.TouchEnd, 'li');
    };

    // ----------
    // CheckEvent
    // ----------
    // check device for correct addEventListener
    Wapp.SldTouch.CheckEvent = function () {
        // touch support
        if ('ontouchstart' in window) {
            vars.device = 1;
            return true;

        // click support
        } else {
            vars.device = 0;
            return false;
        }
    };

    // --------------
    // AddEventsClass
    // --------------
    // add events listener
    // --
    // @params
    // evt = event (keyboard, mouse, touch...)
    // cls = class for add event
    // fnc = function for event
    // el = class for search in cls (for add evt in childrens by className)
    Wapp.SldTouch.AddEventsClass = function (evt, cls, fnc, el) {
        var
            x = 0,
            y = 0,
            els = d.getElementsByClassName(cls),
            child;

        for (x = 0; x < els.length; x++) {
            // childs
            if (el) {
                child = Wapp.SldTouch.FindChildren(els[x], el);

                for (y = 0; y < child.length; y++) {
                    child[y].addEventListener(evt, fnc, true);
                }

            } else {
                els[x].addEventListener(evt, fnc, true);
            }
        }
    };

    // -----------------
    // RemoveEventsClass
    // -----------------
    // remove events listener
    // --
    // @params
    // evt = event (keyboard, mouse, touch...)
    // cls = class for remove event
    // fnc = function for event
    // el = class for search in cls (for remove evt in childrens by className)
    Wapp.SldTouch.RemoveEventsClass = function (evt, cls, fnc, el) {
        var
            x = 0,
            y = 0,
            els = d.getElementsByClassName(cls),
            child;

        for (x = 0; x < els.length; x++) {
            // childs
            if (el) {
                child = Wapp.SldTouch.FindChildren(els[x], el);

                for (y = 0; y < child.length; y++) {
                    child[y].removeEventListener(evt, fnc, true);
                }

            } else {
                els[x].removeEventListener(evt, fnc, true);
            }
        }
    };

    // -----------
    // PauseEvents
    // -----------
    // remove events - default
    // --
    // @params
    // e = event
    Wapp.SldTouch.PauseEvents = function (e) {
        if(e.stopPropagation) e.stopPropagation();
        if(e.preventDefault) e.preventDefault();

        e.cancelBubble = true;
        e.returnValue = false;

        return false;
    };

    // ----------
    // TouchStart
    // ----------
    // get start position [event] in element (slide) pressed
    // --
    // @params
    // e = event
    Wapp.SldTouch.TouchStart = function (e) {
        var
            target = e.target,
            base = Wapp.SldTouch.GetParent(target);

        Wapp.SldTouch.AddEventsClass(vars.moveEvent, vars.sld, Wapp.SldTouch.TouchMove, 'li');

        base.classList.remove('transition');

        vars.tscX = Wapp.SldTouch.CheckEvent() ? e.touches[0].clientX : e.clientX;
        vars.tedX = 0;

        Wapp.SldTouch.PauseEvents(e);
    };

    // ---------
    // TouchMove
    // ---------
    // get move position [event] in element (slide)
    // --
    // @params
    // e = event
    Wapp.SldTouch.TouchMove = function (e) {
        vars.tedX = Wapp.SldTouch.CheckEvent() ? (e.changedTouches[0].clientX - vars.tscX) : (e.clientX - vars.tscX);

        Wapp.SldTouch.CheckMove(e, vars.tedX);

        Wapp.SldTouch.PauseEvents(e);
    };

    // --------
    // TouchEnd
    // --------
    // get end position [event] in element (slide)
    // if not have moviment [vars.tedX] in TouchMove, window.location this href [vars.url]
    // --
    // @params
    // e = event
    Wapp.SldTouch.TouchEnd = function (e) {
        var
            target = e.target,
            base = Wapp.SldTouch.GetParent(target),
            first = base.children[0],
            last = base.children[base.children.length - 1],
            copyLast = last.cloneNode(true);

        // not moviment - go to link
        if (vars.tedX === 0) {
            window.location = vars.url;
            return true;

        } else {
            if (Wapp.SldTouch.CheckEvent()) {
                Wapp.SldTouch.AddEventsClass(vars.moveEvent, vars.sld, Wapp.SldTouch.TouchMove, 'li');

            } else {
                Wapp.SldTouch.RemoveEventsClass(vars.moveEvent, vars.sld, Wapp.SldTouch.TouchMove, 'li');
            }

            // change slider left [PREV]
            if (vars.flag === 1) {
                base.classList.remove('transition');
                base.style.marginLeft = '-' + vars.view + 'px';
                base.appendChild(first);

            // change slider right [NEXT]
            } else if (vars.flag === 2) {
                base.classList.remove('transition');
                base.style.marginLeft = '-' + vars.view + 'px';
                last.remove();

                base.insertBefore(copyLast, base.children[0]);

            // only animation (return position)
            } else {
                base.style.marginLeft = '-' + vars.view + 'px';

                setTimeout(function () { // for animation
                    base.classList.remove('transition');
                }, 400);
            }

            vars.flag = 0;
        }
    };

    // ---------
    // CheckMove
    // ---------
    // check position [left or right] for changes (slide)
    // --
    // @params
    // e = event
    // pos = position by TouchMove (vars.tedX)
    Wapp.SldTouch.CheckMove = function (e, pos) {
        if (pos > 0) {
            Wapp.SldTouch.AnimateMoveRight(e, parseInt(pos));

        } else {
            Wapp.SldTouch.AnimateMoveLeft(e, parseInt(pos));
        }

        Wapp.SldTouch.PauseEvents(e);
    };

    // ----------------
    // AnimateMoveRight
    // ----------------
    // create transition for element (slide)
    // --
    // @params
    // e = event
    // pos = position by TouchMove (vars.tedX)
    Wapp.SldTouch.AnimateMoveRight = function (e, pos) {
        var
            target = e.target,
            base = Wapp.SldTouch.GetParent(target),
            margin = parseInt(base.style.marginLeft.replace('px', '')) + (pos / 30);

        if (pos > vars.margin) {
            base.style.marginLeft = 0;
            vars.flag = 2;

            Wapp.SldTouch.RemoveEventsClass(vars.moveEvent, vars.sld, Wapp.SldTouch.TouchMove, 'li');

        } else {
            base.classList.add('transition');
            base.style.marginLeft = margin + 'px';
        }
    };

    // ---------------
    // AnimateMoveLeft
    // ---------------
    // create transition for element (slide)
    // --
    // @params
    // e = event
    // pos = position by TouchMove (vars.tedX)
    Wapp.SldTouch.AnimateMoveLeft = function (e, pos) {
        var
            target = e.target,
            base = Wapp.SldTouch.GetParent(target),
            margin = parseInt(base.style.marginLeft.replace('px', '')) + (pos / 30);

        if (pos < -vars.margin) {
            base.style.marginLeft = '-' + (vars.view * 2) + 'px';
            vars.flag = 1;

            Wapp.SldTouch.RemoveEventsClass('touchmove', vars.sld, Wapp.SldTouch.TouchMove, 'li');

        } else {
            base.classList.add('transition');
            base.style.marginLeft = margin + 'px';
        }
    };

    // ------------
    // FindChildren
    // ------------
    // search children by tagname
    // return childrens
    // --
    // @params
    // target = element find childrens
    // el = children tagname
    Wapp.SldTouch.FindChildren = function (target, el) {
        while (target.children[0].tagName.toLowerCase() !== el) {
            target = target.children[0];
        }

        return target.children;
    };

    // ----------
    // FindParent
    // ----------
    // search parent by tagname
    // return parents
    // --
    // @params
    // target = element find parent
    // el = parent tagname
    Wapp.SldTouch.FindParent = function (target, el) {
        while (target.tagName.toLowerCase() !== el) {
            target = target.parentElement;
        }

        return target;
    };

    // ---------
    // GetParent
    // ---------
    // search parent by tagname and get link (slider)
    // return parents
    // --
    // @params
    // target = element find parent
    Wapp.SldTouch.GetParent = function (target) {
        var
            el = target,
            parent = el.parentElement,
            url = '';

        // find base
        parent = Wapp.SldTouch.FindParent(target, 'ul');

        // get link slider
        if (target.tagName.toLowerCase() === 'li') {
            // link in children
            url = Wapp.SldTouch.FindChildren(target, 'a');

        } else {
            // link in parent
            url = Wapp.SldTouch.FindParent(target, 'a');
        }

        vars.url = url.href;

        return parent;
    };

    // ------------
    // ChangeBullet
    // ------------
    // change slider by bullet pressed
    // --
    // @params
    // e = event
    Wapp.SldTouch.ChangeBullet = function (e) {
        console.log('------- CREATE change bullet', e);
        // var
        //     id = $(e.target).attr('data-id'),
        //     pos = $(e.target).attr('data-pos'),
        //     amount = $(id + ' .content li').length,
        //     selected = $(id + ' .content li.selected'),
        //     element = '',
        //     first = $(id + ' .content li.selected'),
        //     last = $(id + ' .content li')[amount - 1],
        //     width = $(id + ' .content li').width(),
        //     rand = 'noClass',
        //     transition = $(id).attr('data-transition');

        // if ($(id + ' .content li.selected').attr('data-pos') === pos) {
        //     return false;
        // }

        // Wapp.carrosselNiced.Clear(id);

        // $(id + ' .content li').each(function() {
        //     if ($(this).attr('data-pos') === pos) {
        //         element = $(this);
        //     }
        // });

        // if ($(id).attr('data-effect') === 'yes') {
        //     rand = Wapp.carrosselNiced.Rand();
        // }

        // $(id).addClass(rand);

        // $(selected).after($(element));

        // $(id + ' .content').stop().animate({
        //     'margin-left': '-' + width + 'px'
        // }, transition, function() {
        //     $(id).removeClass(rand);
        //     $(this).css('margin-left', 0);
        //     $(last).after($(first));
        //     Wapp.carrosselNiced.ChangeSelected(e, id);
        // });
    };

    // ---------
    // CreateSld
    // ---------
    // create slider and set attributes (data-attr)
    // read # config in HEADER
    // --
    // @params
    // cls = class (vars.sld)
    Wapp.SldTouch.CreateSld = function (cls) {
        var
            x = 0,
            y = 0,
            el = '',
            els = d.getElementsByClassName(cls),
            child = '',
            margin = 0,
            copy = '',
            base = '',
            div = '',
            btn = '',
            text = '';

        for (x = 0; x < els.length; x++) {
            el = els[x];
            base = el.children[0];

            // - - - - - -
            // c o n f i g
            // - - - - - -

            // grid width
            if (el.dataset.grid) {
                vars.view = document.getElementsByClassName(el.dataset.grid.replace('.', ''))[0].offsetWidth;
            }

            // create bullets
            if (el.dataset.bullet) {
                div = d.createElement('div');
                div.className = 'bullet';

                // title
                btn = d.createElement('strong');
                btn.textContent = 'bullet';
                div.appendChild(btn);

                for (y = 0; y < base.children.length; y++) {
                    base.children[y].setAttribute('data-pos', y); // set position

                    text = el.dataset.caption ? base.children[y].getAttribute('data-text'): y;

                    btn = d.createElement('button');
                    btn.addEventListener('click', Wapp.SldTouch.ChangeBullet, true);
                    btn.textContent = text;
                    btn.setAttribute('data-pos', y);

                    div.appendChild(btn);

                    div.children[0].className = 'selected';
                }

                el.appendChild(div);
            }

            // create navigation
            if (el.dataset.nav) {
                div = d.createElement('div');
                div.className = 'navigator';

                // title
                btn = d.createElement('strong');
                btn.textContent = 'navigator';
                div.appendChild(btn);

                // left [PREV]
                btn = d.createElement('button');
                btn.addEventListener('click', 'CHANGE LEFT', true);
                btn.textContent = 'prev';

                div.appendChild(btn);

                // right [NEXT]
                btn = d.createElement('button');
                btn.addEventListener('click', 'CHANGE RIGHT', true);
                btn.textContent = 'next';

                div.appendChild(btn);

                el.appendChild(div);
            }

            // automatic change
            if (el.dataset.time) {
                //vars.time = e.dataset.time;
                console.log('------- CREATE have time');
            }

            // automatic change
            if (el.dataset.auto) {
                console.log('------- CREATE have auto');
            }

            // margin
            margin = vars.view;

            if (el.dataset.margin) {
                margin = vars.view + parseInt(el.dataset.margin);
            }

            // - - - - - - -
            // - c o n f i g
            // - - - - - - -

            // width blocks
            for (y = 0; y < base.children.length; y++) {
                base.children[y].style.width = vars.view + 'px';
            }

            // width base
            base.style.width = (vars.view * base.children.length) + 'px';

            // margin base
            base.style.marginLeft = '-' + margin + 'px';

            child = base.children[base.children.length - 1];
            copy = child.cloneNode(true);
            child.remove();

            base.insertBefore(copy, base.children[0]);
        }

        Wapp.SldTouch.Listen();
    };

    // --------
    // LETS GO!
    // --------
    // init all functions
    // @params
    // debug = [boolean] true for console.log init
    d.addEventListener("DOMContentLoaded", Wapp.SldTouch.Init(true));

}(document, window, 'Private'));


              
            
!
999px

Console