Javascript jquery滑块视口宽度

我正在测试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>

“alt=”“>
“
“
“
“
“

---

除了视口宽度的问题外，这一切正常。垂直滚动条存在问题，如果宽度错误，显然滑块横向移动的量不正确。我正在使用控制台日志（见上面的代码）检查“宽度”，而“宽度1”和“宽度3”给出的宽度与在例如Waterbox中正常工作的宽度相同。然而，比如说在Chrome和Firefox中，它太小了17px（垂直滚动条的宽度）。但是，如果我使用在Chrome和Firefox中使用的“width 2”，它对Waterbox来说又太大了17px。我发现有很多帖子都提到了这一点，但它们要么暗示我已经在做但不起作用的事情，要么就让它悬而未决。有人能提出一个简单的解决方案吗？

你能用html？TY添加完整的代码来响应吗。添加HTML