Carousel / Slider图像无法正确调整大小

时间：2022-11-04 09:49:04

I have used a small script unslider.js ( http://www.expertfrontend.com/unslider/unslider.js ) to display a slider on my webpage.

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

I am having trouble with the slider that resizing the window does not properly resize the slide, but if the page is refreshed on that window size, its width is resized properly.

我在使用滑块时遇到问题,调整窗口大小不能正确调整幻灯片的大小,但如果在该窗口大小上刷新页面,则会正确调整其宽度。

The webpage with the inline css and javascript can be viewed here:
http://www.expertfrontend.com/unslider/1.html

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

If you resize the window you can see that the images dont resize with it, but if you refresh the page the images are now resized according to the screen size. How can I fix this?

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

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

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

Live link:
http://www.expertfrontend.com/unslider/1.html

实时链接:http://www.expertfrontend.com/unslider/1.html

2 个解决方案

#1

1  

unslider.js still had bugs and issues with responsiveness. But I was able to solve that issue by using bootstrap's default carousel instead of unslider.js.

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

This can be a good starting point:
http://www.bootply.com/xDCnleagYL

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

The jQuery for the slider to control the interval:

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

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

In order to control the speed of the sliding image:

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

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

#2

1  

In the jQuery <script> block add fluid: true in the unslider options see demo:

在jQuery

Demo

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

#1

1  

unslider.js still had bugs and issues with responsiveness. But I was able to solve that issue by using bootstrap's default carousel instead of unslider.js.

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

This can be a good starting point:
http://www.bootply.com/xDCnleagYL

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

The jQuery for the slider to control the interval:

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

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

In order to control the speed of the sliding image:

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

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

#2

1  

In the jQuery <script> block add fluid: true in the unslider options see demo:

在jQuery

Demo

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

标签：

相关文章