UNPKG

3.15 kBMarkdownView Raw
1# TapeSlider
2
3make your page more interactive by let client read last notifications and news about your site
4with simple tool to apply in simple way ... let's start
5## Demo
6
7
8![preview](https://lh3.googleusercontent.com/pw/AM-JKLUsTK1L0GGnWwQVFOO8oy2OFCWElc8GSEzf150h_YHiOAPzkKv7eNRZIgzamwrmf1c3X8ln_sbE_P6u14CXSYCDbozXtTlhxNELr8pEJIK3EPpfmw2B_XayjW3LHGsVtqavVB5JxHrwsy-6l-vMYR59=w1920-h582-no?authuser=0)
9## Installation
10You can use either the npm command-line tool to install packages.
11## NPM
12
13> npm i tap-slider
14
15# Usage ⁉
16
17### Html
18```html
19<head>
20 <!-- Add Style -->
21 <link
22 rel="stylesheet"
23 href="./node_modules/tape-slider/dist/style/_index.css"
24 />
25</head>
26
27<body>
28 <!-- Add Element -->
29 <div class="ts-tap"></div>
30
31 <!-- import tool -->
32 <script src="./node_modules/tape-slider/dist/index.js"></script>
33
34 <!-- Let's start 👏 -->
35 <script>
36 /* Generate Fake Data */
37 const data = [];
38 for (let index = 0; index < 100; index++) {
39 const element = {
40 text: "news" + index,
41 };
42 data.push(element);
43 }
44 /* */
45
46 /* Here The Code */
47 // set options
48 const options = { speed: 1, data: { itemsData: data } };
49 // create tool object
50 const t = tapeSlider.make(".ts-tap", options);
51 // run tool.
52 t.boot();
53 /* */
54 </script>
55</body>
56```
57
58
59![preview](https://lh3.googleusercontent.com/pw/AM-JKLUsTK1L0GGnWwQVFOO8oy2OFCWElc8GSEzf150h_YHiOAPzkKv7eNRZIgzamwrmf1c3X8ln_sbE_P6u14CXSYCDbozXtTlhxNELr8pEJIK3EPpfmw2B_XayjW3LHGsVtqavVB5JxHrwsy-6l-vMYR59=w1920-h582-no?authuser=0)
60
61# Advanced
62
63## Events
64
65```javascript
66const options = { speed: 1, data: { itemsData: data } };
67const t = tapeSlider.make(".ts-tap", options);
68
69// Listen When Start
70t.onStarted().subscribe((e) => {
71 console.log("started");
72});
73// Listen When Stopped
74t.onStopped().subscribe((e) => {
75 console.log("stopped");
76});
77// Listen When With Every Tick
78t.onTick().subscribe((tick) => {
79 console.log("tick" + tick);
80});
81
82t.boot();
83```
84
85## Customize Style
86
87![customize css](https://lh3.googleusercontent.com/pw/AM-JKLUgyA_iovZO41YxWG2a-m93SB6IbBICxm2THqyoqhxdpmG_5ufXgZg6wB2WNDgKPH18UXhZy7rhNnKUPZrUUmbAlE1cPw9fWxR4to4KlB64QVtsYhYAOfryFbGC8lfQtG-lKJWCvNu91zzaSG4e6LMV=w952-h864-no?authuser=0)
88
89![preview](https://lh3.googleusercontent.com/pw/AM-JKLUsTK1L0GGnWwQVFOO8oy2OFCWElc8GSEzf150h_YHiOAPzkKv7eNRZIgzamwrmf1c3X8ln_sbE_P6u14CXSYCDbozXtTlhxNELr8pEJIK3EPpfmw2B_XayjW3LHGsVtqavVB5JxHrwsy-6l-vMYR59=w1920-h582-no?authuser=0)
90
91### Css
92```css
93.ts-tapeSlider-container {
94 /* You can override Style */
95}
96.ts-tapeSlider-container .ts-tapeSlider-item {
97 /* You can override Style */
98}
99```
100
101## Options
102
103```javascript
104var options = {
105 speed:/* slider speed from 1 to 15 */
106 data:[/* Array of objects as {text:"👌"}*/]
107}
108```
109
110Simplest and Easiest 👌💖👏
111
112## Contribution
113
114I welcome you to fork and add more features into it. If you have any bugs or feature request, please create an issue at [github repository](https://github.com/mahmoudshahin1111/tape-slider/issues).
115
116## License
117
118MIT
\No newline at end of file