sldTouch

In this example below you will see how to do a sldTouch with some HTML / CSS and Javascript

simple slide

Thumbnail
This awesome code was written by wizardfly, you can see more from this user in the personal repository.
You can find the original code on Codepen.io
Copyright wizardfly ©
  • HTML
  • CSS
  • JavaScript
<!DOCTYPE html>
<html lang="en" >

<head>
  <meta charset="UTF-8">
  <title>sldTouch</title>
  
  
  
      <link rel="stylesheet" href="css/style.css">

  
</head>

<body>

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

    <script  src="js/index.js"></script>




</body>

</html>

/*Downloaded from https://www.codeseek.co/wizardfly/sldtouch-PzVVmb */
/* --------------- */
/* 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 -- */

/*Downloaded from https://www.codeseek.co/wizardfly/sldtouch-PzVVmb */
// -------------------------------------
// 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'));

Comments