Default Settings
Default settings
mode: "hover", [hover,drag]
showText: true,
beforeText: "BEFORE",
beforeTextPosition: "bottom-left" [top-left,top-right,bottom-left,bottom-right]
afterText: "AFTER",
afterTextPosition: "bottom-right" [top-left,top-right,bottom-left,bottom-right]
seperatorWidth: "4px",
seperatorOpacity: "0.8",
theme: "dark" [dark,light]
autoSliding: false,
autoSlidingStopOnHover: true,
hoverEffect: true,
enterAnimation: false
Default
With default settings.
$(".beforeafterdefault").cndkbeforeafter();
Mode : drag
With default settings.
$(".beforeafterdrag").cndkbeforeafter(
{
mode: "drag", beforeTextPosition: "top-left"
}
);
Theme : dark
With default settings.
$(".beforeafterdrag").cndkbeforeafter(
{
theme: "dark"
}
);
Seperator Style
With default settings.
$(".beforeafterdrag").cndkbeforeafter( { seperatorWidth: "15px"} );
Hide Text
With default settings.
$(".beforeafterdrag").cndkbeforeafter( { showText: false } );
Animate Sliding
With default settings.
$(".beforeafterdrag").cndkbeforeafter( { autoSliding: true } );
Attributes
With default settings.
data-title="Green Screen"
data-title="At Movie"
