tape-slider

simple way ever to make your website interactive add tape slider for your website

Usage no npm install needed!

<script type="module">
  import tapeSlider from 'https://cdn.skypack.dev/tape-slider';
</script>

README

TapeSlider

make your page more interactive by let client read last notifications and news about your site with simple tool to apply in simple way ... let's start

Demo

preview

Installation

You can use either the npm command-line tool to install packages.

NPM

npm i tap-slider

Usage ⁉

Html

<head>
  <!-- Add Style -->
  <link
    rel="stylesheet"
    href="./node_modules/tape-slider/dist/style/_index.css"
  />
</head>

<body>
  <!-- Add Element -->
  <div class="ts-tap"></div>

  <!-- import tool -->
  <script src="./node_modules/tape-slider/dist/index.js"></script>

  <!-- Let's start 👏 -->
  <script>
    /* Generate Fake Data */
    const data = [];
    for (let index = 0; index < 100; index++) {
      const element = {
        text: "news" + index,
      };
      data.push(element);
    }
    /* */

    /* Here The Code */
    // set options
    const options = { speed: 1, data: { itemsData: data } };
    // create tool object
    const t = tapeSlider.make(".ts-tap", options);
    // run tool.
    t.boot();
    /* */
  </script>
</body>

preview

Advanced

Events

const options = { speed: 1, data: { itemsData: data } };
const t = tapeSlider.make(".ts-tap", options);

// Listen When Start
t.onStarted().subscribe((e) => {
  console.log("started");
});
// Listen When Stopped
t.onStopped().subscribe((e) => {
  console.log("stopped");
});
// Listen When With Every Tick
t.onTick().subscribe((tick) => {
  console.log("tick" + tick);
});

t.boot();

Customize Style

customize css

preview

Css

.ts-tapeSlider-container {
  /* You can override Style */
}
.ts-tapeSlider-container .ts-tapeSlider-item {
  /* You can override Style */
}

Options

var options = {
  speed:/* slider speed from 1 to 15 */
  data:[/* Array of objects as {text:"👌"}*/]
}

Simplest and Easiest 👌💖👏

Contribution

I 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.

License

MIT