cndk.beforeafter.js: Image Comparsion Slider Examples

Basic Example

With default settings.


                    $(".beforeafterdefault").cndkbeforeafter();

Compare with drag and touch events


                      $(".beforeafterdrag").cndkbeforeafter(
                        {
                            mode: "drag", beforeTextPosition: "top-left"
                        }
                      );

Dark Theme


                      $(".beforeafterdrag").cndkbeforeafter(
                        {
                            theme: "dark"
                        }
                      );

Custom Width Of Slider


                    $(".beforeafterdrag").cndkbeforeafter( { seperatorWidth: "15px"} );

Hide Before/After Text


                      $(".beforeafterdrag").cndkbeforeafter( { showText: false } );

Auto Sliding

With default settings.


                      $(".beforeafterdrag").cndkbeforeafter( { autoSliding: true } );

Custom Before/After

With default settings.


                    data-title="Green Screen"

                    data-title="At Movie"