To use WS-LiSli plugin in your project you have to import jquery and jquery-ui scripts

<script src="https://code.jquery.com/jquery-3.3.1.min.js" integrity="sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8=" crossorigin="anonymous"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.min.js"></script>

After this you can add the WS-LiSli script in your footer like this :

$(function() {
    $('#WS-LiSli').WS_lightbox_free({
        // add your custom options here
    }
}

• enable (Array) : display options you want to display.

enable : [
    'close',
    'arrows'
]

• buttons (Object) : to custom your buttons

buttons : {
    size          : 50,
    style         : 'square', 
    color         : 'black',
    color_icon    : 'white',
    border_width  : 0,
    border_color  : '',
    opacity       : .5,
    hover_opacity : 1
}

• arrows (Object) : to custom you arrows buttons.

arrows : {  
    position      : 'outside', // ( 'inside', 'outside', 'attached' )
    style         : 'svelt', // ('default', 'square', 'circle', 'rounded', 'svelt')
    icon_style    : 'caret', // ('default', 'caret', 'angle', 'chevron')
    icon_size     : 24,  
    opacity       : .5,  
    hover_effect  : 'translate', // ('zoom', 'shrink', 'translate')
    hover_opacity : .8
}

• image (Object) : to custom the image border width, color and radius

image : {
    border_radius : 0,
    border_color : '',
    border_width : 0,
    bg : 'none'
}

• background (Object) : to custom the background of the lightbox

background : {
    filter : 'image',
    opacity : .5
}

• display_velocity (String or Integer) : to set velocity when the lightbox appears.

display_velocity : 'low' // ('low', 'normal', 'fast' or integer accepted)

•  slide_velocity (String or Integer) : to set velocity of sliding animation

slide_velocity : 'normal' // ('low', 'normal', 'fast' or integer accepted)