我使用了一个小脚本unslider.js（http://www.expertfrontend.com/unslider/unslider.js）在我的网页上显示一个滑块。
我在使用滑块时遇到问题，调整窗口大小无法正确调整幻灯片的大小，但如果在该窗口大小上刷新页面，则其宽度会正确调整大小。
可以在此处查看带有内联css和javascript的网页：
http://www.expertfrontend.com/unslider/1.html
如果您调整窗口大小，您可以看到图像不会随之调整大小，但如果刷新页面，则会根据屏幕大小调整图像大小。我该如何解决这个问题？
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}
}
答案 0 :(得分：1)
在jQuery case 1:
case 2:
totalScore = totalScore + 2;
break;
块中，在<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
}
}
答案 1 :(得分：1)
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;
}