jquery - Sly JavaScript Library -

i'm trying work library not understanding how can "reload" slider when size of windows change.

so i've done this:

these js script load page in order create slider.

jquery(function ($) { 'use strict'; (function () {     var $frame = $('#centered');     var $wrap = $frame.parent();      // call sly on frame     $frame.sly({         horizontal: 1,         itemnav: 'centered',         smart: 1,         activateon: 'click',         mousedragging: 1,         touchdragging: 1,         releaseswing: 1,         startat: 7,         scrollbar: $wrap.find('.scrollbar'),         scrollby: 1,         speed: 300,         elasticbounds: 1,         easing: 'easeoutexpo',         draghandle: 1,         dynamichandle: 1,         clickbar: 1,          // buttons         prev: $wrap.find('.prev'),         next: $wrap.find('.next')     }); }());  (function () {     var $frame = $('#smart');     var $slidee = $frame.children('ul').eq(0);     var $wrap = $frame.parent();      // call sly on frame     $frame.sly({         smart: 1,         activateon: 'click',         mousedragging: 1,         touchdragging: 1,         releaseswing: 1,         startat: 3,         scrollbar: $wrap.find('.scrollbar'),         scrollby: 1,         pagesbar: $wrap.find('.pages'),         activatepageon: 'click',         speed: 300,         elasticbounds: 1,         easing: 'easeoutexpo',         draghandle: 1,         dynamichandle: 1,         clickbar: 1,          // buttons         forward: $wrap.find('.forward'),         backward: $wrap.find('.backward'),         prev: $wrap.find('.prev'),         next: $wrap.find('.next'),         prevpage: $wrap.find('.prevpage'),         nextpage: $wrap.find('.nextpage')     }); }()); }); 

my problem want change slider horizontal vertical when width of screen < 600px.

so i've started these:

$(window).resize(function () {         if ($(window).width() < 600)              $("#centered").attr("id", "smart");             $frame.sly('reload');         } else {             $("#smart").attr("id", "centered");             $frame.sly('reload');         }     }); 

but cant make working, , since i'm newbie javascript/jquery makes more difficult.

the relative documentation of sly library here: https://github.com/darsain/sly/tree/master/docs

thanks in advance.

$(window).resize(function () {     if ($(window).width() < 600)          $("#centered").attr("id", "smart");         reload();     } else {         $("#smart").attr("id", "centered");         reload();     } }); function reload(){          var $frame = $('#centered'); var $wrap = $frame.parent();  // call sly on frame $frame.sly({     horizontal: 1,     itemnav: 'centered',     smart: 1,     activateon: 'click',     mousedragging: 1,     touchdragging: 1,     releaseswing: 1,     startat: 7,     scrollbar: $wrap.find('.scrollbar'),     scrollby: 1,     speed: 300,     elasticbounds: 1,     easing: 'easeoutexpo',     draghandle: 1,     dynamichandle: 1,     clickbar: 1,      // buttons     prev: $wrap.find('.prev'),     next: $wrap.find('.next') }); }