Jquery 转盘/滑块图像未正确调整大小

我使用了一个小脚本unslider.js（）在我的网页上显示一个滑块

我对滑块有问题，调整窗口大小不能正确调整幻灯片大小，但是如果页面按该窗口大小刷新，则其宽度会正确调整

可以在此处查看带有内联css和javascript的网页：

如果调整窗口大小，您可以看到图像不会随之调整大小，但如果刷新页面，图像现在会根据屏幕大小调整大小。我怎样才能解决这个问题

HTML：

 <div class="row">
      <div class="col-lg-6 col-md-12 col-6 grid-1">
        <div class="banner">
            <ul class="list-unstyled">
               <li>
                <a href="#">
                  <div class="img-overlay">
                    <img src="img/img2.jpg" alt="Spring Collection" />
                   </div>
                  </a>
                </li>
                <li>
                  <a href="#">
                    <div class="img-overlay">
                       <img src="img/img3.jpg" alt="Men's Arrival" />
                    </div>
                  </a>
                </li>
                <li>
                  <a href="#">
                    <div class="img-overlay">
                      <img src="img/img5.jpg" alt="Bike Rack" />
                    </div>
                  </a>
                </li>
            </ul>
            <ol class="dots"></ol>
         </div><!-- end banner -->
       </div><!-- end grid-1 -->
     </div><!-- end row -->

实时链接：

在jQuery

块中添加

流体：true

在

反滑器
选项中添加
参见演示：

演示

$（文档）.ready（函数（）{
$（'.banner'）.unslider({
速度：500，//为每张幻灯片设置动画的速度（毫秒）
延迟：3000，//幻灯片动画之间的延迟（毫秒）
complete:function（）{}，//在每次幻灯片动画之后调用的函数
按键：true，//启用键盘（左、右）箭头快捷键
dots:true，//显示点导航
流体：真//>启用响应能力
unslider.js在响应性方面仍然存在缺陷和问题。但我能够通过使用引导的默认旋转木马而不是unslider.js来解决这个问题

这可能是一个很好的起点：


用于控制间隔的滑块的jQuery：

$(function(){
    $('.carousel').carousel({
      interval: 2000
    });
});

为了控制滑动图像的速度：

/* faster sliding speed */
.carousel-inner > .item {
    -webkit-transition: 0.5s ease-in-out left;
    -moz-transition: 0.5s ease-in-out left;
    -o-transition: 0.5s ease-in-out left;
    transition: 0.5s ease-in-out left;
}

+1.但它在我的页面上似乎不起作用：@AlexZahir这很奇怪，第二个演示实际上是你页面的精确副本，除了两个地方之外。：\n尝试复制源代码，然后上传到你的网站。让它成为
index.htm
@AlexZahir哦，我看到你不仅仅有滑块。为了使页面响应，你需要e优先考虑某些必须始终存在的部分，以及在断点处必须牺牲的部分。
/* faster sliding speed */
.carousel-inner > .item {
    -webkit-transition: 0.5s ease-in-out left;
    -moz-transition: 0.5s ease-in-out left;
    -o-transition: 0.5s ease-in-out left;
    transition: 0.5s ease-in-out left;
}