pineapple-comparsions-slider

Pineapple Comparsion Slider

Usage no npm install needed!

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

README

Built With Stencil

Pineapple Comparsion Slider

Touch, responsive, simple

A simple, responsive and touch friendly Comparsion Slider Webcomponent build with Stencil.

How to use it?

Npm

Include it in your project like this in the head of your index.html:

  <script src="https://unpkg.com/pineapple-comparsions-slider@0.1.3/dist/comparsions-slider.js"></script>

Node Modules

  • Run npm install pineapple-comparsions-slider --save
  • Put a script tag similar to this in the head of your index.html
  • Then you can use the element anywhere in your template, JSX, html etc

Usage

Add Webcomponent with your image urls to your html file:

  <comparsions-slider
          id="123"
          before="https://raw.githubusercontent.com/bentzibentz/Comparsion-Slider/master/demo/before.png"
          after="https://raw.githubusercontent.com/bentzibentz/Comparsion-Slider/master/demo/after.png">
  </comparsions-slider>

License

MIT License

By bentzibentz