@egjs/flicking
Version:
Everyday 30 million people experience. It's reliable, flexible and extendable carousel.
83 lines (76 loc) • 2.38 kB
HTML
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Flicking Basic Demo</title>
<link rel="stylesheet" href="../../dist/flicking.css" />
<style>
.flicking-viewport {
width: 500px;
height: 300px;
margin: 0 auto;
}
.panel {
width: 200px;
height: 300px;
margin-right: 10px;
display: flex;
align-items: center;
justify-content: center;
font-size: 24px;
color: white;
}
.navigation {
text-align: center;
margin-top: 20px;
}
.navigation button {
margin: 0 5px;
padding: 5px 10px;
}
</style>
</head>
<body>
<div class="flicking-viewport">
<div class="flicking-camera">
<div class="panel" style="background-color: #f44336">Panel 1</div>
<div class="panel" style="background-color: #2196f3">Panel 2</div>
<div class="panel" style="background-color: #4caf50">Panel 3</div>
<div class="panel" style="background-color: #ffc107">Panel 4</div>
<div class="panel" style="background-color: #9c27b0">Panel 5</div>
</div>
</div>
<div class="navigation">
<button id="prev">Previous</button>
<button id="next">Next</button>
</div>
<script src="../../dist/flicking.pkgd.js"></script>
<script>
document.addEventListener("DOMContentLoaded", () => {
const flicking = new Flicking(".flicking-viewport", {
circular: false,
moveType: "snap",
align: "center",
defaultIndex: 0,
});
// Navigation buttons
const prevButton = document.getElementById("prev");
const nextButton = document.getElementById("next");
prevButton.addEventListener("click", () => {
flicking.prev();
});
nextButton.addEventListener("click", () => {
flicking.next();
});
// Update button states based on current index
flicking.on("moveEnd", () => {
prevButton.disabled = flicking.index === 0;
nextButton.disabled = flicking.index === flicking.panels.length - 1;
});
// Initial button state
prevButton.disabled = true;
});
</script>
</body>
</html>