/cndkbeforeafter

Jquery Plugin - Before-After Image Slider

Primary LanguageJavaScriptMIT LicenseMIT

Cndk.BeforeAfter.Js v.0.0.2

It is a very simple jQuery plugin that will meet your needs.

Screenshot

Demo

See the demo content of the data from the link.

Go to Demo

Usage

Import Javascript Files

<script src="https://code.jquery.com/jquery-3.4.1.min.js"></script>
<script src="cndk.beforeafter.js"></script>

Import CSS File

<link href="cndk.beforeafter.css" rel="stylesheet">

HTML Code

<div class="beforeimagetest">
   <div data-type="data-type-image">
      <div data-type="before"><img src="images/a1.jpg"></div>
      <div data-type="after"><img src="images/a2.jpg"></div>
   </div>
</div>

Javascript Run Code

$(".beforeimagetest").cndkbeforeafter(
    {
       showText: false,
       seperatorColor: "blue",
       seperatorWidth: "1px",
       hoverEffect: false,
       beforeText: "BEFORE",
       afterText: "TEXT"
    }
);

Contributing

Pull requests are welcome. For major changes, please open an issue first to discuss what you would like to change.

Please make sure to update tests as appropriate.

License

MIT