$(function(){ var $slider = $('.slider') , slider_width = 0 , $slider_inner = $slider.children().first() , $elements = $slider_inner.children('.element') , elements_count = $elements.length , element_width = $elements.first().width() , element_margin = 0 , elements_fit = 0 , visible_width = 0 function onResize() { slider_width = $slider.width() elements_fit = Math.floor(slider_width/element_width) // we have a limited number of elements if (elements_fit > elements_count) { elements_fit = elements_count } // we need only odd number if (elements_fit % 2 === 0) { elements_fit -= 1 } // find element margin for balancing element_margin = Math.ceil((slider_width - (element_width * elements_fit))/(elements_fit * 2)) visible_width = (element_width + element_margin * 2) * elements_fit // set container width * 1.5 to fit clonned elements when scroll $slider_inner.width(Math.ceil(visible_width * 1.5)) // add margins $elements.css({'margin-left': element_margin + 'px', 'margin-right': element_margin + 'px'}) } onResize() $(window).on('resize', onResize) })