为什么光滑的滑块不适应？

Question

为什么当我减小屏幕尺寸时，我的光滑滑块不适应？

光滑的设置：

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

滑块的代码结构：

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

我为display: flex尝试删除.head-slider__slider，自适应开始工作，但滑块向上移动，但需要居中。

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

P.S。对不起我的英语，我来自Belarussia。

Answer 1

您的容器 css类的 max-width：1170px ，在小屏幕上不会降低。 head-slider__slider 类具有宽度：100％，这导致光滑滑块的宽度为1170px。

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

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