Ширина окна слайдера jquery

Question

Я тестирую ползунок jquery полной ширины, и код ниже:

var width = $(window).width();
console.log('width 1 = '+width);
var width = window.innerWidth;
console.log('width 2 = '+width);
var width = document.body.parentNode.clientWidth;
console.log('width 3 = '+width);

var animationSpeed = 1000;
var pause = 2000;
var currentSlide = 1;

//cache DOM elements
var $slider = $('#slider');
var $slideContainer = $('.slides', $slider);
var $slides = $('.slide', $slider);

var interval;

function startSlider() {
    interval = setInterval(function() {
        $slideContainer.animate({'margin-left': '-='+width}, animationSpeed, function() {
            if (++currentSlide === $slides.length) {
                currentSlide = 1;
                $slideContainer.css('margin-left', 0);
            }
        });
    }, pause);
}
function pauseSlider() {
    clearInterval(interval);
}

$slideContainer
    .on('mouseenter', pauseSlider)
    .on('mouseleave', startSlider);

startSlider();

html:

<div id="slider">
  <ul class="slides">
    <li class="slide slide1"><img src="<?php echo base_url('public/img/carousel/carousel-1.jpg'); ?>" alt=""></li>
    <li class="slide slide2"><img src="<?php echo base_url('public/img/carousel/carousel-2.jpg'); ?>"</li>
    <li class="slide slide3"><img src="<?php echo base_url('public/img/carousel/carousel-3.jpg'); ?>"</li>
    <li class="slide slide4"><img src="<?php echo base_url('public/img/carousel/carousel-4.jpg'); ?>"</li>
    <li class="slide slide5"><img src="<?php echo base_url('public/img/carousel/carousel-5.jpg'); ?>"</li>
    <li class="slide slide6"><img src="<?php echo base_url('public/img/carousel/carousel-1.jpg'); ?>"</li>
  </ul>
</div>

Это работает нормально, за исключением проблемы с шириной области просмотра.Существует проблема с вертикальной полосой прокрутки, и если ширина неправильная, очевидно, что слайд перемещается в боковом направлении на неправильную величину.Я проверяю «ширину» с помощью консольного журнала (см. Код выше), а «ширина 1» и «ширина 3» дают ту же ширину, которая работает нормально, скажем, в Waterfox.Однако, скажем, в Chrome и Firefox он слишком мал на 17 пикселей (ширина вертикальной полосы прокрутки).Но если я использую 'width 2', который работает в Chrome и Firefox, он снова слишком велик для Waterfox на 17px.Я нашел несколько сообщений, ссылающихся на это, но они либо предлагают то, что я уже делаю, но не работают, либо оставляют это нерешенным.Кто-нибудь может предложить простое исправление?