<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script src="dist/blaze-slider.dev.js"></script>
<link rel="stylesheet" href="dist/blaze.css">
</head>
<body>
<div class="blaze-slider">
<div class="blaze-container">
<div class="blaze-track-container">
<div class="blaze-track">
<div>slide 1</div>
<div>slide 2</div>
<div>slide 3</div>
<div>slide 4</div>
</div>
<!-- pagination container -->
<div class="my-pagination-container">
<div class="blaze-pagination"></div>
</div>
</div>
<!-- navigation buttons -->
<div class="my-nav-container">
<button class="blaze-prev">previous</button>
<button class="blaze-next">next</button>
</div>
</div>
</div>
<script>
const el = document.querySelector('.blaze-slider')
new BlazeSlider(el)
</script>
</body>
</html>
