Carousel/Slider 图片未正确调整大小

Question

我使用了一个小脚本 unslider.js ( http://www.expertfrontend.com/unslider/unslider.js ) 在我的网页上显示一个滑块。

我在调整 window 大小的滑块时遇到问题，无法正确调整幻灯片大小，但如果页面刷新为 window 大小，其宽度会正确调整大小。

内嵌css和javascript的网页可以在这里查看：
http://www.expertfrontend.com/unslider/1.html

如果您调整 window 的大小，您可以看到图像不会随之调整大小，但如果您刷新页面，图像现在会根据屏幕大小调整大小。我该如何解决这个问题？

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 -->

CSS：

.grid-1 {width: 100%;}
    .banner { 
        position: relative; 
        overflow: hidden; 
    }
    .banner ul li {float: left;}
        .banner img {}      
        .banner .btn, .banner .dot {
        -webkit-filter: drop-shadow(0 1px 2px rgba(0,0,0,.3));
        -moz-filter: drop-shadow(0 1px 2px rgba(0,0,0,.3));
        -ms-filter: drop-shadow(0 1px 2px rgba(0,0,0,.3));
        -o-filter: drop-shadow(0 1px 2px rgba(0,0,0,.3));
        filter: drop-shadow(0 1px 2px rgba(0,0,0,.3));
    }
    .banner .dots {
        position: absolute;
        right: 10px;
        bottom: 0px;
        margin-bottom: 0;
    }
        .banner .dots li {
            display: inline-block;
            width: 10px;
            height: 10px;
            margin: 0 4px;
            text-indent: -999em;
            border: 2px solid #fff;
            border-radius: 6px;
            cursor: pointer;
            opacity: .4;
            -webkit-transition: background .5s, opacity .5s;
            -moz-transition: background .5s, opacity .5s;
            transition: background .5s, opacity .5s;
        }
            .banner .dots li.active {
                background: #fff;
                opacity: 1;
            }
    @media (max-width: 1199px) { 
        .grid-1 img {width: 100%; height: 500px; min-width: 0; max-width: 100%;}
    }
    @media (max-width: 1183px) { 
        .grid-1 {width: 100%; padding-right: 0;}
            .grid-1 img {width: 100%; height: 500px;}
    }   
    @media (max-width: 1060px) { 
        .grid-1 {max-width: 100%; min-width: 0;}
            .grid-1 img {max-width: 100%; min-width: 0;}
    }
    @media (max-width: 600px) { 
        .grid-1 img {height: 350px;}
    }
    @media (max-width: 400px) { 
    .grid-1 img {height: 300px;}
    }
    @media (max-width: 350px) { 
        .grid-1 img {height: 270px;}
    }
    @media (min-width: 1200px) { 
        .grid-1 {width: 100%;}
        .grid-1 img {width: 100%; height: auto}
    }

直播link：
http://www.expertfrontend.com/unslider/1.html

Answer 1

在 jQuery <script> 块中添加 fluid: true 在 unslider options 看演示：

演示

 $(document).ready(function() {
   $('.banner').unslider({
     speed: 500, //  The speed to animate each slide (in milliseconds)
     delay: 3000, //  The delay between slide animations (in milliseconds)
     complete: function() {}, //  A function that gets called after every slide animation
     keys: true, //  Enable keyboard (left, right) arrow shortcuts
     dots: true, //  Display dot navigation
     fluid: true //>>>>>>>Enable responsiveness<<<<<<<<<<
   });

 });

 .grid-1 {
   width: 100%;
 }
 .banner {
   position: relative;
   overflow: hidden;
 }
 .banner ul li {
   float: left;
 }
 .banner img {} .banner .btn,
 .banner .dot {
   -webkit-filter: drop-shadow(0 1px 2px rgba(0, 0, 0, .3));
   -moz-filter: drop-shadow(0 1px 2px rgba(0, 0, 0, .3));
   -ms-filter: drop-shadow(0 1px 2px rgba(0, 0, 0, .3));
   -o-filter: drop-shadow(0 1px 2px rgba(0, 0, 0, .3));
   filter: drop-shadow(0 1px 2px rgba(0, 0, 0, .3));
 }
 .banner .dots {
   position: absolute;
   right: 10px;
   bottom: 0px;
   margin-bottom: 0;
 }
 .banner .dots li {
   display: inline-block;
   width: 10px;
   height: 10px;
   margin: 0 4px;
   text-indent: -999em;
   border: 2px solid #fff;
   border-radius: 6px;
   cursor: pointer;
   opacity: .4;
   -webkit-transition: background .5s, opacity .5s;
   -moz-transition: background .5s, opacity .5s;
   transition: background .5s, opacity .5s;
 }
 .banner .dots li.active {
   background: #fff;
   opacity: 1;
 }
 @media (max-width: 1199px) {
   .grid-1 img {
     width: 100%;
     height: 500px;
     min-width: 0;
     max-width: 100%;
   }
 }
 @media (max-width: 1183px) {
   .grid-1 {
     width: 100%;
     padding-right: 0;
   }
   .grid-1 img {
     width: 100%;
     height: 500px;
   }
 }
 @media (max-width: 1060px) {
   .grid-1 {
     max-width: 100%;
     min-width: 0;
   }
   .grid-1 img {
     max-width: 100%;
     min-width: 0;
   }
 }
 @media (max-width: 600px) {
   .grid-1 img {
     height: 350px;
   }
 }
 @media (max-width: 400px) {
   .grid-1 img {
     height: 300px;
   }
 }
 @media (max-width: 350px) {
   .grid-1 img {
     height: 270px;
   }
 }
 @media (min-width: 1200px) {
   .grid-1 {
     width: 100%;
   }
   .grid-1 img {
     width: 100%;
     height: auto
   }
 }

<!DOCTYPE html>
<html>

<head>
  <base href="http://www.expertfrontend.com/unslider/">
  <meta charset="utf-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Project Title</title>
  <link href="css/bootstrap.css" rel="stylesheet">
  <link href="css/bootstrap-theme.css" rel="stylesheet">
  <!--<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css">-->
  <!--[if lt IE 9]>
      <script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script>
      <script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
    <![endif]-->
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
  <script src="unslider.js"></script>


</head>

<body>
  <div id="main">
    <div class="container-fluid">
      <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 -->
    </div>
    <!-- end container-fluid -->
  </div>
  <!-- end main -->


</body>

</html>

Answer 2

unslider.js 仍然存在错误和响应问题。但是我能够通过使用 bootstrap 的默认轮播而不是 unslider.js.

来解决这个问题

这可能是一个很好的起点：
http://www.bootply.com/xDCnleagYL

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;
}

Carousel/Slider 图片未正确调整大小

Carousel/Slider images not resizing properly

html

css

jquery

slider

twitter-bootstrap

演示