javascript - Carousel not working when window is resized -

i have series of 3 divs floating left in straight line. each div width of page. here's html structure;

<div class="horizontal-wrapper">       <div class="horizontal-section">         <div class="project-wrapper">           <div class="project-box" id="pjb1"><div class="project-box-overlay"><h2>splash</h2><p>industries define ideal selection both wholesale , retail quantities of high quality</p></div></div>           <div class="project-box" id="pjb2"><div class="project-box-overlay"><h2>splash</h2><p>industries define ideal selection both wholesale , retail quantities of high quality</p></div></div>         </div>        </div>        <div class="horizontal-section">         <div class="project-wrapper">           <div class="project-box" id="pjb3"><div class="project-box-overlay"><h2>splash</h2><p>industries define ideal selection both wholesale , retail quantities of high quality</p></div></div>           <div class="project-box" id="pjb4"><div class="project-box-overlay"><h2>splash</h2><p>industries define ideal selection both wholesale , retail quantities of high quality</p></div></div>         </div>        </div>        <div class="horizontal-section">         <div class="project-wrapper">           <div class="project-box" id="pjb5"><div class="project-box-overlay"><h2>splash</h2><p>industries define ideal selection both wholesale , retail quantities of high quality</p></div></div>           <div class="project-box" id="pjb6"><div class="project-box-overlay"><h2>splash</h2><p>industries define ideal selection both wholesale , retail quantities of high quality</p></div></div>                   </div>        </div>              </div> 

so on button click should move next div. i've accomplished using following script;

   var inner_width = $('body').innerwidth();    $('#next').on('click', function () {       $('.horizontal-section').animate({'left': 'inner_width' +'px'});    }); 

the problem i'm facing scrolling messed when browser resized since cant proper width of page.

your problem stems not rechecking width of browser more once. checks on page load , sets variable that.

try this:

var inner_width = $('body').innerwidth(); $(window).resize(function() {   inner_width = $('body').innerwidth(); });