var slider = tns({ container: '.my-slider', items: 5, autoplay: true, nav: false, prevButton: true, controlsText: ["<",">"], autoplayButtonOutput: false, onInit:customizedFunction, }); function customizedFunction(){ $('.tns-item') .removeClass('middle') .removeClass('middle_beside') .removeClass('next_to_mid') .removeClass('prev_to_mid'); var middle_item = Math.floor($('.tns-slide-active').length / 2); $('.tns-slide-active').eq(middle_item).addClass('middle'); $('.tns-slide-active').eq(middle_item + 1).addClass('middle_beside'); $('.tns-slide-active').eq(middle_item - 1).addClass('middle_beside'); $('.tns-slide-active').eq(middle_item + 1).nextAll().addClass('next_to_mid'); $('.tns-slide-active').eq(middle_item - 1).prevAll().addClass('prev_to_mid'); } var customizedFunction = function (info, eventName) { $('.tns-item') .removeClass('middle') .removeClass('middle_beside') .removeClass('next_to_mid') .removeClass('prev_to_mid'); var middle_item = Math.floor($('.tns-slide-active').length / 2); $('.tns-slide-active').eq(middle_item).addClass('middle'); $('.tns-slide-active').eq(middle_item + 1).addClass('middle_beside'); $('.tns-slide-active').eq(middle_item - 1).addClass('middle_beside'); $('.tns-slide-active').eq(middle_item + 1).nextAll().addClass('next_to_mid'); $('.tns-slide-active').eq(middle_item - 1).prevAll().addClass('prev_to_mid'); } slider.events.on('indexChanged', customizedFunction);