Файл: dist/callback-destroy.html
Строк: 150
<?php
<!doctype html><html lang=en><base href=/ ><meta charset=utf-8><meta http-equiv=X-UA-Compatible content="IE=edge,chrome=1"><title>Bee3D Slider</title><meta name=HandheldFriendly content=True><meta name=MobileOptimized content=320><meta name=viewport content="width=device-width,initial-scale=1,maximum-scale=1,user-scalable=no"><meta http-equiv=cleartype content=on><link href="http://fonts.googleapis.com/css?family=Ubuntu:500" rel=stylesheet><link href="http://fonts.googleapis.com/css?family=Oxygen:700,400" rel=stylesheet><link rel=stylesheet href=css/bee3D.css><link rel=stylesheet href=css/demo.css><div class=intro-text><h1>Callback: Destroy</h1><h3>Add a custom callback function when destroying the slider.</h3></div><style>#destroy {
position: absolute;
cursor: pointer;
left: 50%;
-webkit-transform: translateX(-50%);
-moz-transform: translateX(-50%);
transform: translateX(-50%);
top: 40px;
outline: none;
box-shadow: none;
background: none;
display: block;
padding: 0.5em;
border-radius: 10px;
text-shadow: none;
border: 1px solid black;
z-index: 10;
}
#destroy p {
font-size: 3em;
color: rgba(40, 44, 42, 0.3);
padding: .5em .5em .25em;
font-weight: 900;
line-height: 1;
}
#destroy span {
font-family: Helvetica;
text-transform: uppercase;
font-weight: 700;
padding-bottom: 0.75em;
display: block;
}</style><button id=destroy><p>Destroy Slider</p><span>A new one will take its place</span></button><article class=example><section class=bee3D--slide><div class=bee3D--inner><p class=demo-text>1</div></section><section class=bee3D--slide><div class=bee3D--inner><p class=demo-text>2</div></section><section class=bee3D--slide><div class=bee3D--inner><p class=demo-text>3</div></section><section class=bee3D--slide><div class=bee3D--inner><p class=demo-text>4</div></section><section class=bee3D--slide><div class=bee3D--inner><p class=demo-text>5</div></section><section class=bee3D--slide><div class=bee3D--inner><p class=demo-text>6</div></section><section class=bee3D--slide><div class=bee3D--inner><p class=demo-text>7</div></section><section class=bee3D--slide><div class=bee3D--inner><p class=demo-text>8</div></section><section class=bee3D--slide><div class=bee3D--inner><p class=demo-text>9</div></section><section class=bee3D--slide><div class=bee3D--inner><p class=demo-text>10</div></section><span class="bee3D--nav bee3D--nav__prev"></span> <span class="bee3D--nav bee3D--nav__next"></span></article><a id=lukeed href=http://www.lukeed.com rel=follow target=_blank>LUKE'ED DESIGN<span></span></a><script src=js/vendor/classie.js></script><script src=js/bee3D.js></script><script>// possible effects
var effects = ['spiral-left', 'spiral-right', 'carousel', 'cube', 'classic', 'concave', 'wave', 'arc', 'coverflow'];
var el = document.querySelector('.example');
var slider = new Bee3D(el, {
// get random effect
effect: effects[ Math.floor(Math.random() * effects.length) ],
listeners: {
keys: true
},
navigation: {
enabled: true
},
onDestroy: function(){
alert('Custom onDestroy callback function!');
el.parentNode.innerHTML = '<p>Slider Deleted =O</p>'
}
});
document.getElementById('destroy').addEventListener('click', function(e){
e.preventDefault();
// call the destroy method on slider object
return slider.destroy();
});</script>
?>