<div style="color: white; text-align: center">
<h1>Tour.js</h1>
<p>Puere javascript slider with powerful API</p>
</div>
<div class="container" style="padding: 5px;">
<div class="tour slide">
<!-- Indicators -->
<ol class="tour-indicators">
<li class="active"></li>
<li></li>
<li></li>
<li></li>
</ol>
<!-- Wrapper for slides -->
<div class="tour-inner" role="listbox">
<div class="item active">
<img src="https://lh3.googleusercontent.com/3q4yS7mmAKsuTZyCHDz0m5TVO4uNlfxni6F-lvQwtzJLBhboglbjtx4q4k12FVujO7c2iUnkfetzQ2nhHhaML37Heoxvg5VnccnopHbtGdOoIyc_mge5QpglsLbuXIRazJe7MtlBUZ91At8Q-arRc_zWJZsWM7L4QrV2VxZwEc8Ia99ijsrPMk8YzQCyesO5KRRDIs-8V7fFjO62_kQ1vrl5EVct6pHf94A6-FJt-x3uOHBXJjl8RUops0zEJOWS6jqzKBjvgWFXt1UrFk61IpS_dVydGI07gqK3dhCJWiWVJxxnncoGQz29zDoF6xafN7d2UAE7THM37icBpr73-9CtNKE6BIArKBNPnadTnPpem7ellNQHVh-Wm62MBn1xBpH5BH-wDaZR6l5S_Due6OPOGnlyqvsEKhOL5PcX-b_a4dL75JhBpmrb0_0VE5-2MUMe58SSGR6680G6Vv2OI0Z0dlr4Nt8SaMSgoOijtG99r5uCy69-B2q7RiJvLC9t7rv_6P0Ggbt8XSWRJRDfijrnVoELLo2BpfcMn_evvBknfkRAIz0P2OKWR0qD18ULJZrC4QrAQLFs4qvgOo8MGiDFmy-CXNdLLm0URhsQZV3z-GYFtkui=w909-h334-no" alt="...">
<div class="tour-caption">
<h2>Tour.js</h2>
<p>Pure javascript slider</p>
</div>
</div>
<div class="item">
<img src="https://lh3.googleusercontent.com/xXeK7GzpjOFUfdJxxiuH_eYaKxyarAUbFVtJI4mIiGPBTyS4q_khyctkg65FeZwt8r1JoDNZlBbB5aqjEJYjF_-1HAHTmUp2_m3VDFy3C0JUD3PwnTWsRcnvsyV8jm4kqBS1XMXsr7W6lAFzpuGB-PpPSZ97ZbAVKnbW_Aiv9tTkRZo5nTNNPTCvqbgl8WWRr6sS-Qwj6FG7w7EnDdQ5tph7Cz2BPhuMwvTbr5h083L268tXHKo5RHRv44FDIqEowFPIKRxrUlHsrZZkdpm8J-pOqsw_-zlUw55E2fzFEq-2RCgah0HBpqhkHusLn7K4NEoVH6i3KGqvBLKseiC5HmzSSavsYL71TjjZXDSZBPVUxIpBzT--2O1mR6ltCtdx71sGdBHl3CqEGnXr9XoaTTwd-u24RUPs_Pc4gx0e4NuYhA1Rw12YTIaiosy8mcHMtD8HJ2NWbwtzKIIGg6zgcnmvF623GxbwGjUxV86X7a_IWAFVZfFAdXaLX9eoEXbEfnyB_99UE3n0_onL7OqS-Sw1_HA6JagPV2Y8rC_J7hWgDxeA4rwUlJmSw_uryDLSaLRkggIQUfcj6WETiaPOuyu1bSU-Iwl3b48C8HJx14CXJky6nJ6q=w909-h334-no" alt="...">
<div class="tour-caption">
<h2>Tour.js</h2>
<p>Pure javascript slider</p>
</div>
</div>
<div class="item">
<img src="https://lh3.googleusercontent.com/BsoV0VnKXpJ3ym4o5dMFc-GJN0jJLI2u7AhOXErrp6DPSOPtwpVPtR46O7M0D0CsYLylZESvEzTFYITyJYmmWZEogeo0fy7Xr09XVA6haMnKisWzzQ89KUVTKh-CkH_ctc3un5DcBWxT5UQ8rZsSgdu3p35CX9SFzgt22dN3l1LDXH-lzmtS2wW4oDa1E1UziCdEjLH2Uo2knryDMG6lfzLUiJlAqtmkkReN3Qb4pmSM5l6UKLPJiiu1Ou2O88BbAieSHPYNPmMZ3X3I7I3COrNfIcuLuTFcuWgb2BshcxnEprxfw7-kzuobqDxqZsBNbUzm8Icm6Xz7oa8kl_-JCh8Z9qWPFHT2CBFf2FBRDEj6PXumLo3TIXyEtgSGOp8oLJwRdQPDoecqOSy1aFy9u-G_iCKgvaNjnNLdGyFcJGasOmbaVv-61XAYSjtLbdzPNhkrz4rIEmiSk4Kef3fVQbaf3sNQ4FlExPLsvZh4yk8H0A9izrQXLLDnVbue02XqSAx4LBZnG3ktcpXyBMVHm80U7V2AFG1jhb8ulPf3awiFCZDCWI3dQRxZhArouiVDUZqi-MImuCV5Z1iZftYDCLtv4bFFYQXSxeQMzWe9iYgjAaVI-foD=w909-h334-no" alt="...">
<div class="tour-caption">
<h2>Tour.js</h2>
<p>Pure javascript slider</p>
</div>
</div>
<div class="item">
<img src="https://lh3.googleusercontent.com/K91V6ndxi8iZI5HrmZQRMwiY6JWSyIQI7r_awVF_pXa-If7iqOy0nTsUFaBOyUeyRA2TrBlyZ_Mi70qMPdYfcOem4ZoUUQZJEAOoth7_Hq0icEWwTWG4gHuxb7WJhV7oCLJ0Oonbku5JDrGr8SgC0cm2N_477VFAEO1F_WtVJdMW6CxTytsux1WcK5bY3KetQMvST0CHXbdGcZd9nYgTYOBb7jzYuWi2tyZupUenP_8tiIrWuI9vV5pLnFhgK455CHvJk4M2BdA3wvQhUGBzlFsnrs7EGS1KgFQUUlk0Ceh_HKFAba8nn_Tho49pNKxX5hKG1_wlG_qfLGKlyS6tGUs0VQLljvSAgdDqd10xMjkYkIzvW6NAOf57ESWheozo5YFLjjCYmGm342HIvn6_qA89XD0J0WWb002h3FHRxCd-lPsNESbAPhS9HCXvyTRkX1gfUgMu3k3FyIPAiDl1U4KRq36BHydrl8iWBwZvJ0Sqo3H23JAh_oQRX84pqMQR3JVGDrL6s2Wmuc1h-WV09sDD-Wo_4Vf3hXTnTPnjnmT7qPBIbysiGdhKMOfqBB61Z7SgCcW8l61tgusMFgDcywKi6Cp0chzcoA7Zd8J5GDlAU7-7yaoz=w909-h334-no" alt="...">
<div class="tour-caption">
<h2>Tour.js</h2>
<p>Pure javascript slider</p>
</div>
</div>
</div>
<!-- Controls -->
<a class="left tour-control" role="button" data-slide="prev">
<span><i class="fa fa-chevron-left" aria-hidden="true"></i></span>
</a>
<a class="right tour-control" role="button" data-slide="next">
<span><i class="fa fa-chevron-right" aria-hidden="true"></i></span>
</a>
</div>
</div>
<script>
document.addEventListener('DOMContentLoaded', function () {
document.removeEventListener('DOMContentLoaded', arguments.calee);
console.log(tour('.tour').apply());
});
</script>* {
border-size: border-box; }
body {
background: #999; }
.container {
margin: 0 auto;
width: 90%;
height: 400px;
background: #aaa; }
.tour {
position: relative;
perspective: 50em;
width: 100%;
height: 100%;
border: 1px solid rgba(255, 255, 255, 0.7);
background: #222;
overflow: hidden; }
.tour ol {
list-style: none;
position: absolute;
bottom: 5px;
width: 50%;
padding: 0px;
margin: 0 25%;
text-align: center; }
.tour ol li {
width: 14px;
height: 14px;
display: inline-block;
border: 1px solid white;
border-radius: 50%;
position: relative;
z-index: 999;
cursor: pointer; }
.tour ol li:after {
content: '';
pointer-events: none;
transition: all .4s ease-in-out;
position: absolute;
top: 50%;
left: 50%;
width: 10px;
height: 10px;
transform: scale(0) translate(-50%, -50%);
transform-origin: 0% 0%;
display: inline-block;
border-radius: 50%;
background: white; }
.tour ol li.active:after {
transform: scale(1) translate(-50%, -50%); }
.tour .tour-inner {
position: relative;
width: 100%;
height: 100%; }
.tour .tour-inner .itemsliding {
position: absolute;
width: 100%;
height: 100%;
backface-visibility: hidden;
left: 0%;
transition: transform 0.6s ease-in-out;
display: none; }
.tour .tour-inner .itemsliding img {
width: 100%;
height: 100%; }
.tour .tour-inner .itemsliding .tour-caption {
position: absolute;
top: 50%;
left: 50%;
width: 65%;
text-align: center;
background: rgba(255, 255, 255, 0.3);
border-radius: 20px;
color: white;
transform: translate(-50%, -50%); }
.tour .tour-inner .itemsliding .tour-caption h2 {
font-weight: bold; }
.tour .tour-inner .prevleftsliding {
display: block;
transform: translate3d(100%, 0, 0); }
.tour .tour-inner .nextleftsliding {
display: block;
transform: translate3d(-100%, 0, 0); }
.tour .tour-inner .prevrightsliding {
display: block;
transform: translate3d(-100%, 0, 0); }
.tour .tour-inner .nextrightsliding {
display: block;
transform: translate3d(100%, 0, 0); }
.tour .tour-inner .active {
display: block;
transform: translate3d(0%, 0, 0); }
.tour .tour-inner .itemrolling {
position: absolute;
width: 100%;
height: 100%;
backface-visibility: hidden;
left: 0%;
opacity: 1;
transition: transform 0.5s, opacity 0.6s;
transform: rotateX(-90deg);
transform-origin: bottom center;
display: none; }
.tour .tour-inner .itemrolling img {
width: 100%;
height: 100%; }
.tour .tour-inner .itemrolling .tour-caption {
position: absolute;
top: 50%;
left: 50%;
width: 65%;
text-align: center;
background: rgba(255, 255, 255, 0.3);
border-radius: 20px;
color: white;
transform: translate(-50%, -50%); }
.tour .tour-inner .itemrolling .tour-caption h2 {
font-weight: bold; }
.tour .tour-inner .prevleftrolling {
display: block;
transform-origin: top center;
transform: rotateX(-90deg);
opacity: 0; }
.tour .tour-inner .nextleftrolling {
display: block;
transform-origin: bottom center;
transform: rotateX(90deg);
opacity: 1; }
.tour .tour-inner .prevrightrolling {
display: block;
transform-origin: bottom center;
transform: rotateX(90deg);
opacity: 0; }
.tour .tour-inner .nextrightrolling {
display: block;
transform-origin: top center;
transform: rotateX(-90deg);
opacity: 1; }
.tour .tour-inner .active {
display: block;
transform: rotateX(0deg); }
.tour .tour-inner .itemfading {
position: absolute;
width: 100%;
height: 100%;
backface-visibility: hidden;
left: 0%;
transition: opacity 0.6s ease-in-out;
display: none;
opacity: 1; }
.tour .tour-inner .itemfading img {
width: 100%;
height: 100%; }
.tour .tour-inner .itemfading .tour-caption {
position: absolute;
top: 50%;
left: 50%;
width: 65%;
text-align: center;
background: rgba(255, 255, 255, 0.3);
border-radius: 20px;
color: white;
transform: translate(-50%, -50%); }
.tour .tour-inner .itemfading .tour-caption h2 {
font-weight: bold; }
.tour .tour-inner .prevleftfading, .tour .tour-inner .prevrightfading {
display: block;
opacity: 0; }
.tour .tour-inner .nextleftfading, .tour .tour-inner .nextrightfading {
display: block;
opacity: 0; }
.tour .tour-inner .active {
display: block;
opacity: 1; }
.tour a.tour-control {
position: absolute;
top: 0;
right: 85%;
bottom: 0;
left: 0;
display: block;
text-decoration: none;
cursor: pointer; }
.tour a.tour-control span {
pointer-events: none;
width: 100%;
position: absolute;
top: 50%;
transform: translateY(-50%);
text-align: center; }
.tour a.tour-control span i {
font-size: 40px;
color: rgba(255, 255, 255, 0.5); }
.tour a.tour-control:hover {
background: linear-gradient(90deg, rgba(0, 0, 0, 0.35), transparent); }
.tour a.tour-control:hover i {
color: white; }
.tour a.tour-control.right {
right: 0%;
left: 85%; }
.tour a.tour-control.right:hover {
background: linear-gradient(-90deg, rgba(0, 0, 0, 0.35), transparent); }
.tour a.tour-control.right:hover i {
color: white; }
.tour .timeLine {
position: absolute;
height: 3px;
background: red;
top: 0px;
left: 0px;
right: 100%; }
.tour .animate {
animation-name: timeLine;
animation-iteration-count: infinite;
animation-timing-function: cubic-bezier(0, 0, 0.05, 0.85); }
@keyframes timeLine {
0% {
background: white;
right: 100%; }
100% {
background: red;
right: 0%; } }
/*# sourceMappingURL=tour.css.map */
"use strict";
(function (window) {
function tour(selector) {
if (!(this instanceof tour)) return new tour(selector);
if (selector.nodeType == 1 || selector == window.document || selector == window) {
this.push(selector);
return;
}
var arr = document.querySelectorAll(selector);
arr.forEach(function (ele) {
this.push(ele);
}.bind(this));
return;
}
window.tour = tour;
return;
})(window);
var fn = tour.prototype = [];
fn.extend = function (prop) {
if (prop && typeof prop == "object") {
for (var value in prop) {
if (prop.hasOwnProperty(value)) {
this.default[value] = prop[value];
}
}
}
return;
};
fn.liveEvent = function(){
var args =null,
eventType =null,
parent =null,
child =null,
callback =null,
children =null;
args = Array.prototype.slice.call(arguments);
if(typeof args[0] != "string" || typeof args[1] != "object"){
throw new Error("Arguments in liveEvent is invalid");
}
if(typeof args[2] == "string"){
child = args[2];
}else if(typeof args[2] == "function"){
callback = args[2];
}
if(typeof args[3] == "function"){
callback = args[3];
}
eventType = args[0];
if(args[1].nodeType == 1){
parent = [args[1]];
}else{
parent = args[1];
}
for(var i=0; i < parent.length; i++){
parent[i].addEventListener(eventType, function(e){
var target = e.target || e.srcElement;
if(child != null){
var id = target.nodeName.toLowerCase(),
children = parent[i-1].querySelectorAll(id),
index = Array.prototype.indexOf.call(children, target);
if(id == child){
callback(target, index, children);
return;
}
}else{
callback(target);
return;
}
}, false);
}
return;
}
fn.currPos = 0;
fn.oldPos = 0;
fn.cycle = false;
fn.loop = null;
fn.underAnimate = true;
fn.render = function(){
// console.log(this.indicators);
this.indicators[this.oldPos].classList.remove('active');
this.indicators[this.currPos].classList.add('active'); // dont play with this
var prevItem = this.items[this.oldPos];
var currItem = this.items[this.currPos];
if (this.slideToRight){
prevItem.classList.add('prevright'+this.default.slideEffect);
currItem.classList.add('nextright'+this.default.slideEffect);
window.setTimeout(function(){
prevItem.classList.remove('active');
currItem.classList.add('active');
}.bind(this), 20);
window.setTimeout(function(){
prevItem.classList.remove('prevright'+this.default.slideEffect);
currItem.classList.remove('nextright'+this.default.slideEffect);
this.underAnimate = true;
}.bind(this), 600)
}else{
prevItem.classList.add('prevleft'+this.default.slideEffect);
currItem.classList.add('nextleft'+this.default.slideEffect)
window.setTimeout(function(){
prevItem.classList.remove('active');
currItem.classList.add('active');
}.bind(this), 20);
window.setTimeout(function(){
prevItem.classList.remove('prevleft'+this.default.slideEffect);
currItem.classList.remove('nextleft'+this.default.slideEffect);
this.underAnimate = true;
}.bind(this), 600);
}
return;
}
fn.iteration = window.setInterval.bind(window);
fn.clearIteration = window.clearInterval.bind(window);
fn.stopIteration = function () {
if (this.cycle && this.loop != null) {
this.clearIteration(this.loop);
this.cycle = false;
this.loop = null;
this.timeLine.classList.remove('animate');
}
return;
}
fn.startIteration = function () {
if (!this.cycle && this.loop == null) {
this.timeLine.classList.add('animate');
this.cycle = true;
this.loop = this.iteration(function () {
this.to();
}.bind(this), this.default.delay);
}
return;
}
fn.to = function () {
var next = this.currPos;
this.findPosition(++next);
this.timeLine.classList.remove('animate');
this.timeLine.classList.add('animate');
return;
};
fn.slideToRight;
fn.findPosition = function (number) {
var itemsLength = this.items.length;
if(this.indicators.length != itemsLength){
throw new Error("Indicators length are not equal with your items!");
}
this.oldPos = this.currPos;
this.currPos = number;
if (this.currPos != this.oldPos) {
if (this.currPos > itemsLength - 1) {
this.currPos = 0;
} else if (this.currPos < 0) {
this.currPos = itemsLength - 1;
}
if(number > this.oldPos) {this.slideToRight = true} else {this.slideToRight = false};
this.render();
};
return;
}
fn.events = function () {
var self = this;
this.liveEvent('click', this.next , function(target){
if(self.underAnimate){
self.underAnimate = false;
self.findPosition(self.currPos + 1);
}
})
this.liveEvent('click', this.prev , function(target){
if(self.underAnimate){
self.underAnimate = false;
self.findPosition(self.currPos - 1);
}
})
this.liveEvent('click', this.indicatorsContainer , 'li', function(target, index, children){
if(self.underAnimate){
self.underAnimate = false;
self.findPosition(index);
}
});
document.addEventListener('keydown', function(e){
this.keyPressed[e.keyCode == 39 ? e.keyCode: null || e.keyCode == 37 ? e.keyCode: null] = true;
this.keyboardControll();
}.bind(this));
document.addEventListener('keyup', function(e){
this.keyPressed[e.keyCode == 39 ? e.keyCode: null || e.keyCode == 37 ? e.keyCode: null] = false;
this.keyboardControll();
}.bind(this));
if (this.default.startCycle == true) {
this[0].addEventListener('mouseenter', function (e) {
e.stopPropagation();
this.stopIteration();
}.bind(this), false);
this[0].addEventListener('mouseleave', function (e) {
e.stopPropagation();
this.startIteration();
}.bind(this), false);
};
return;
}
fn.keyPressed = {};
fn.keyboardControll = function(){
if(this.underAnimate){
this.underAnimate = false;
if(this.keyPressed['39'] == true){
var next = this.currPos;
this.findPosition(++next);
if(this.default.startCycle){
this.stopIteration();
}
}else if(this.keyPressed['37'] == true){
var prev = this.currPos;
this.findPosition(--prev);
if(this.default.startCycle){
this.stopIteration();
}
}else{
if(this.default.startCycle){
this.startIteration();
}
}
}
}
fn.cashing = function () {
this.next = this[0].querySelectorAll('.tour-control.right')[0];
this.prev = this[0].querySelectorAll('.tour-control.left')[0];
this.indicatorsContainer = this[0].querySelector('.tour-indicators');
this.indicators = this.indicatorsContainer.querySelectorAll("li");
this.tourWidth = this[0].offsetWidth;
this.tourInner = this[0].querySelector('.tour-inner');
this.items = this[0].querySelectorAll('.tour-inner .item');
this.nextSlide = this.next.click.bind(this.next);
this.prevSlide = this.prev.click.bind(this.prev);
this.default = {
"delay": 6000,
"startCycle": true,
"showArrows": true,
"slideEffect": 'sliding',
"returnAPI": false
};
return;
}
fn.reCash = function(){
this.indicators = this.indicatorsContainer.querySelectorAll("li");
this.items = this[0].querySelectorAll('.tour-inner .item');
this.changeTransition(this.default.slideEffect);
}
fn.watch = function(){
var mutationObserver = window.MutationObserver || window.WebKitMutationObserver,spy;
if( MutationObserver ){
spy = new mutationObserver(function(mutation){
this.reCash();
}.bind(this));
var config = { attributes: false, childList: true, characterData: false };
spy.observe(this.tourInner, config);
setTimeout(function(){spy.disconnect()} , this.default.delay);
}else{
this.liveEvent('DOMNodeInserted', this.tourInner , this.reCash);
}
}
fn.addTimeLine = function () {
var div = document.createElement('div');
div.className = 'timeLine animate';
this[0].appendChild(div);
this.timeLine = div;
this.timeLine.style.animationDuration = (this.default.delay / 1000) + 's';
return;
};
fn.transitionEffects = ['sliding','rolling', 'fading'];
fn.changeTransition = function(prop){
if(typeof prop != 'undefined'){
var oldTrans = this.default['slideEffect'];
if(this.transitionEffects.indexOf(prop) > -1){
this.default['slideEffect'] = prop;
this.items.forEach(function(el){
el.classList.remove('item'+oldTrans);
el.classList.add('item'+this.default.slideEffect);
}.bind(this));
}else{
return 'error property! Transition must be one of the following: ('+this.transitionEffects.join(' or ')+')';
}
return 'Transition changed to '+this.default.slideEffect;
}else{
return 'Transition applied is '+this.default.slideEffect;
}
};
fn.version = "v2.5";
fn.init = function (prop) {
this.cashing();
this.watch();
this.extend(prop);
this.changeTransition(this.default.slideEffect);
this.events();
if (this.default.startCycle == true) {
this.addTimeLine();
this.startIteration();
}
if (this.default.showArrows == false) {
this.next.style.display = 'none';
this.prev.style.display = 'none';
}
return this;
}
fn.apply = function (prop) {
var self = [];
this.forEach(function (ele) {
self.push(new tour(ele).init(prop));
}.bind(this));
if(self[0].default.returnAPI){
var obj = {};
for(var i = 0 ; typeof self[i] == 'object'; i++){
obj['tour'+i] = {
"element": self[i][0],
"next": self[i].nextSlide,
"prev": self[i].prevSlide,
"indeicators": self[i].indicators,
"transition": self[i].changeTransition.bind(self[i])
};
}
return obj;
}else{
return true;
}
};
External CSS
This Pen doesn't use any external CSS resources.
External JavaScript
This Pen doesn't use any external JavaScript resources.