wallop
Version:
wallop is a minimal 4kb library for showing & hiding things
96 lines (76 loc) • 2.49 kB
HTML
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Wallop Slider</title>
<meta name="viewport" content="initial-scale=1, user-scalable=no">
<link rel="stylesheet" href="css/example.css">
<link rel="stylesheet" href="../css/wallop.css">
</head>
<body>
<div class="Container">
<h1>Wallop Slider Examples</h1>
<h2>Animations</h2>
<!-- SLIDER STARTS -->
<div class="Wallop Wallop--slide">
<div class="Wallop-list">
<div class="Wallop-item Wallop-item--current"><img src="imgs/1.jpg"></div>
<div class="Wallop-item"><img src="imgs/2.jpg"></div>
<div class="Wallop-item"><img src="imgs/3.jpg"></div>
<div class="Wallop-item"><img src="imgs/4.jpg"></div>
<div class="Wallop-item"><img src="imgs/5.jpg"></div>
</div>
<button class="Wallop-buttonPrevious">Previous</button>
<button class="Wallop-buttonNext">Next</button>
</div>
<!-- SLIDER ENDS -->
</div>
<script src="../js/Wallop.js"></script>
<script>
// New instance of Wallop
var slider = document.querySelector('.Wallop');
new Wallop(slider);
var animations = [
'slide',
'fade',
'scale',
'rotate',
'fold',
'vertical-slide'
];
function insertCss(animation) {
var link = document.createElement('link');
link.rel = 'stylesheet';
link.href = '../css/wallop--' + animation + '.css';
document.getElementsByTagName("head")[0].appendChild(link)
}
function updateSliderClass(className) {
animations.forEach(function(animation) {
removeClass(slider, 'Wallop--' + animation);
});
addClass(slider, 'Wallop--' + className);
}
function insertButton(animation) {
var button = document.createElement('button');
button.innerHTML = animation;
slider.parentNode.insertBefore(button, slider);
button.addEventListener('click', function() {
updateSliderClass(animation);
});
}
animations.forEach(function(animation) {
insertCss(animation);
insertButton(animation);
});
// Helpers
function addClass(element, className) {
if (!element) { return; }
element.className = element.className.replace(/\s+$/gi, '') + ' ' + className;
}
function removeClass(element, className) {
if (!element) { return; }
element.className = element.className.replace(className, '');
}
</script>
</body>
</html>