Skip to content

Commit 7e99a61

Browse files
author
jinwoo-choi-05
committed
fix: infinite resize
1 parent 293da58 commit 7e99a61

File tree

6 files changed

+619
-217
lines changed

6 files changed

+619
-217
lines changed

‎debug/example/index.html‎

Lines changed: 82 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,82 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="UTF-8" />
5+
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
6+
<title>Flicking Basic Demo</title>
7+
<link rel="stylesheet" href="../../dist/flicking.css" />
8+
<style>
9+
.flicking-viewport {
10+
width: 500px;
11+
height: 300px;
12+
margin: 0 auto;
13+
}
14+
.panel {
15+
width: 200px;
16+
height: 300px;
17+
margin-right: 10px;
18+
display: flex;
19+
align-items: center;
20+
justify-content: center;
21+
font-size: 24px;
22+
color: white;
23+
}
24+
.navigation {
25+
text-align: center;
26+
margin-top: 20px;
27+
}
28+
.navigation button {
29+
margin: 0 5px;
30+
padding: 5px 10px;
31+
}
32+
</style>
33+
</head>
34+
<body>
35+
<div class="flicking-viewport">
36+
<div class="flicking-camera">
37+
<div class="panel" style="background-color: #f44336">Panel 1</div>
38+
<div class="panel" style="background-color: #2196f3">Panel 2</div>
39+
<div class="panel" style="background-color: #4caf50">Panel 3</div>
40+
<div class="panel" style="background-color: #ffc107">Panel 4</div>
41+
<div class="panel" style="background-color: #9c27b0">Panel 5</div>
42+
</div>
43+
</div>
44+
<div class="navigation">
45+
<button id="prev">Previous</button>
46+
<button id="next">Next</button>
47+
</div>
48+
49+
<script src="../../dist/flicking.pkgd.js"></script>
50+
<script>
51+
document.addEventListener("DOMContentLoaded", () => {
52+
const flicking = new Flicking(".flicking-viewport", {
53+
circular: false,
54+
moveType: "snap",
55+
align: "center",
56+
defaultIndex: 0,
57+
});
58+
59+
// Navigation buttons
60+
const prevButton = document.getElementById("prev");
61+
const nextButton = document.getElementById("next");
62+
63+
prevButton.addEventListener("click", () => {
64+
flicking.prev();
65+
});
66+
67+
nextButton.addEventListener("click", () => {
68+
flicking.next();
69+
});
70+
71+
// Update button states based on current index
72+
flicking.on("moveEnd", () => {
73+
prevButton.disabled = flicking.index === 0;
74+
nextButton.disabled = flicking.index === flicking.panels.length - 1;
75+
});
76+
77+
// Initial button state
78+
prevButton.disabled = true;
79+
});
80+
</script>
81+
</body>
82+
</html>

‎packages/react-flicking/src/demo/App.tsx‎

Lines changed: 8 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -1,10 +1,5 @@
1-
21
import React, { Component } from "react";
3-
import {
4-
BrowserRouter as Router,
5-
Routes,
6-
Route
7-
} from "react-router-dom";
2+
import { BrowserRouter as Router, Routes, Route } from "react-router-dom";
83
import "./css/common.css";
94
import "./css/features.css";
105
import "./css/highlight.css";
@@ -26,13 +21,17 @@ import Fade from "./plugins/Fade";
2621
import AutoPlay from "./plugins/AutoPlay";
2722
import Arrow from "./plugins/Arrow";
2823
import Header from "./Header";
24+
import Example from "./debug/Example";
25+
import VariableHeightPanels from "./debug/VariableHeightPanels";
2926

3027
export default class App extends Component<{}> {
3128
public render() {
3229
return (
3330
<Router>
34-
<Header/>
31+
<Header />
3532
<Routes>
33+
<Route path="/debug-example" element={<Example />} />
34+
<Route path="/debug-variable-height" element={<VariableHeightPanels />} />
3635
<Route path="/infinite" element={<InfiniteFlicking />} />
3736
<Route path="/free-scroll" element={<FreeScroll />} />
3837
<Route path="/variable-size" element={<VariableSize />} />
@@ -48,7 +47,8 @@ export default class App extends Component<{}> {
4847
<Route path="/prop" element={<PropChange />} />
4948
<Route path="/cross" element={<CrossFlicking />} />
5049
</Routes>
51-
</Router>);
50+
</Router>
51+
);
5252
}
5353
public componentDidMount() {
5454
hljs.initHighlighting();

‎packages/react-flicking/src/demo/debug/Example.css‎

Lines changed: 20 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,20 @@
1+
.demo-container {
2+
padding: 20px;
3+
}
4+
5+
.flicking {
6+
width: 100%;
7+
height: 200px;
8+
}
9+
10+
.panel {
11+
width: 200px;
12+
height: 200px;
13+
margin-right: 10px;
14+
background: #f2f2f2;
15+
display: flex;
16+
align-items: center;
17+
justify-content: center;
18+
font-size: 24px;
19+
font-weight: bold;
20+
}

‎packages/react-flicking/src/demo/debug/Example.tsx‎

Lines changed: 25 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,25 @@
1+
import * as React from "react";
2+
import Flicking from "../../react-flicking";
3+
import "./Example.css";
4+
5+
const Example: React.FC = () => {
6+
return (
7+
<div className="demo-container">
8+
<h2>Basic Flicking Demo</h2>
9+
<Flicking
10+
className="flicking"
11+
circular={false}
12+
moveType="snap"
13+
align="center"
14+
>
15+
<div className="panel">1</div>
16+
<div className="panel">2</div>
17+
<div className="panel">3</div>
18+
<div className="panel">4</div>
19+
<div className="panel">5</div>
20+
</Flicking>
21+
</div>
22+
);
23+
};
24+
25+
export default Example;

0 commit comments

Comments
 (0)