html - 为什么光滑的 slider 不自适应？

Question

为什么当我缩小屏幕尺寸时，我的滑动 slider 不自适应？

光滑的设置:

$(document).ready(function(){
  $('.head-slider__slider').slick({
    dots: true,
    infinite: true,
    speed: 1000,
  });
});

slider 的代码结构:

.head-slider {
	display: flex;
	align-items: center;
	min-height: 900px;
	background: url(../img/sliders/slide_img.jpg);
	background-size: cover;
	background-position: fixed;
	.head-slider__slider {
		width: 100%;
		.slider__slide {
			display: flex;
			flex-direction: column;
			justify-content: space-around;
			min-height: 500px;
			.slide__slide-header {
				h2 {
					font-size: 7rem;
					font-family: @FfontRaleway;
					font-weight: @WfontSemiBold;
					color: @whiteColor;
				}
			}
			.slide__slide-description {
				font-size: 5rem;
				font-family: @FfontRaleway;
				font-weight: @WfontLight;
				color: @whiteColor;
			}
			.slide__slide-buttons {
				a {
					.lightButtons(@whiteColor);
					margin-right: 1%;
				}
			}
		}
	}
}

	<section class="head-slider">
		<div class="container">
			<div class="head-slider__slider">
				<div class="slider__slide">
					<div class="slide__slide-header">
						<h2>Expire</h2>
					</div>
					<div class="slide__slide-description">
						<p>Professionaly designed, carefully made for your enjoyement</p>
					</div>
					<div class="slide__slide-buttons">
						<a href="#">Explore</a>
						<a href="#">Learn more</a>
					</div>
				</div>
				<!--slide-end-->
				<div class="slider__slide">
					<div class="slide__slide-header">
						<h2>Expire</h2>
						<object data="" type=""></object>
					</div>
					<div class="slide__slide-description">
						<p>Professionaly designed, carefully made for your enjoyement</p>
					</div>
					<div class="slide__slide-buttons">
						<a href="#">Explore</a>
						<a href="#">Learn more</a>
					</div>
				</div>
				<!--slide-end-->
				<div class="slider__slide">
					<div class="slide__slide-header">
						<h2>Expire</h2>
						<object data="" type=""></object>
					</div>
					<div class="slide__slide-description">
						<p>Professionaly designed, carefully made for your enjoyement</p>
					</div>
					<div class="slide__slide-buttons">
						<a href="#">Explore</a>
						<a href="#">Learn more</a>
					</div>
				</div>
				<!--slide-end-->
				<div class="slider__slide">
					<div class="slide__slide-header">
						<h2>Expire</h2>
						<object data="" type=""></object>
					</div>
					<div class="slide__slide-description">
						<p>Professionaly designed, carefully made for your enjoyement</p>
					</div>
					<div class="slide__slide-buttons">
						<a href="#">Explore</a>
						<a href="#">Learn more</a>
					</div>
				</div>
				<!--slide-end-->		
			</div>
		</div>
	</section>

我尝试为 .head-slider__slider 删除 display:flex 并且 adaptive 开始工作，但是 slider 已经向上移动，但它需要居中。

示例:http://uzinouzi.github.io/testtemplate

附言对不起我的英语，我来自白俄罗斯。

Answer 1

您的容器 css 类有ma​​x-width:1170px，在小屏幕上不会减少。 head-slider__slider 类具有 width:100%，这导致光滑的 slider 采用 1170 像素的宽度。

将此媒体查询添加到您的 css 文件

@media(max-width:1170px){
 .container{
   width:100%
  }
}