光滑滑块在导航上跳跃 - 可变宽度和中心模式

Question

如果光滑（滑块http://kenwheeler.github.io/slick/），我的使用有问题。

我有一个自定义设计并且已经实现但是当滑块移动到下一个时会出现奇怪的跳跃。请参阅此处的演示 - http://yourwebsitedemo.eu/sgslider/

包括Bootstrap，jQuery和Slick

验证HTML / CSS - 没有错误

我的代码。

＆＃13;

＆＃13;

$(document).ready(function(){
	$('#carousel').slick({
		    infinite: true,
		    speed: 500,
		    centerMode: true,
		    variableWidth: true,
		    centerPadding: '0px',
                cssEase: 'ease'
		});
	$("div.slick-list").removeAttr( 'style' );
	// Previous
	$("button.slick-prev").empty();
	$("button.slick-prev").append('<i class="fa fa-chevron-left circle circle-left"></i>');
	// // Next
	$("button.slick-next").empty();
	$("button.slick-next").append('<i class="fa fa-chevron-right circle circle-right"></i>');
});

＆＃13;

/*===================
        Fonts Style
===================*/
@font-face {
	font-family: 'nexa_rust_sansblack_01';
	src: url('../fonts/nexarustsans-black01-webfont.eot');
	src: url('../fonts/nexarustsans-black01-webfont.eot?#iefix') format('embedded-opentype'), url('../fonts/nexarustsans-black01-webfont.woff2') format('woff2'), url('../fonts/nexarustsans-black01-webfont.woff') format('woff'), url('../fonts/nexarustsans-black01-webfont.ttf') format('truetype'), url('../fonts/nexarustsans-black01-webfont.svg#nexa_rust_sansblack_01') format('svg');
	font-weight: normal;
	font-style: normal;
}
@font-face {
	font-family: 'nexa_boldregular';
	src: url('../fonts/nexa_bold-webfont.eot');
	src: url('../fonts/nexa_bold-webfont.eot?#iefix') format('embedded-opentype'), url('../fonts/nexa_bold-webfont.woff2') format('woff2'), url('../fonts/nexa_bold-webfont.woff') format('woff'), url('../fonts/nexa_bold-webfont.ttf') format('truetype'), url('../fonts/nexa_bold-webfont.svg#nexa_boldregular') format('svg');
	font-weight: normal;
	font-style: normal;
}
@font-face {
	font-family: 'droid_serifbold';
	src: url('../fonts/droidserif-bold-webfont.eot');
	src: url('../fonts/droidserif-bold-webfont.eot?#iefix') format('embedded-opentype'), url('../fonts/droidserif-bold-webfont.woff2') format('woff2'), url('../fonts/droidserif-bold-webfont.woff') format('woff'), url('../fonts/droidserif-bold-webfont.ttf') format('truetype'), url('../fonts/droidserif-bold-webfont.svg#droid_serifbold') format('svg');
	font-weight: normal;
	font-style: normal;
}
@font-face {
	font-family: 'droid_serifbold_italic';
	src: url('../fonts/droidserif-bolditalic-webfont.eot');
	src: url('../fonts/droidserif-bolditalic-webfont.eot?#iefix') format('embedded-opentype'), url('../fonts/droidserif-bolditalic-webfont.woff2') format('woff2'), url('../fonts/droidserif-bolditalic-webfont.woff') format('woff'), url('../fonts/droidserif-bolditalic-webfont.ttf') format('truetype'), url('../fonts/droidserif-bolditalic-webfont.svg#droid_serifbold_italic') format('svg');
	font-weight: normal;
	font-style: normal;
}
@font-face {
	font-family: 'droid_serifitalic';
	src: url('../fonts/droidserif-italic-webfont.eot');
	src: url('../fonts/droidserif-italic-webfont.eot?#iefix') format('embedded-opentype'), url('../fonts/droidserif-italic-webfont.woff2') format('woff2'), url('../fonts/droidserif-italic-webfont.woff') format('woff'), url('../fonts/droidserif-italic-webfont.ttf') format('truetype'), url('../fonts/droidserif-italic-webfont.svg#droid_serifitalic') format('svg');
	font-weight: normal;
	font-style: normal;
}
@font-face {
	font-family: 'droid_serifregular';
	src: url('../fonts/droidserif-webfont.eot');
	src: url('../fonts/droidserif-webfont.eot?#iefix') format('embedded-opentype'), url('../fonts/droidserif-webfont.woff2') format('woff2'), url('../fonts/droidserif-webfont.woff') format('woff'), url('../fonts/droidserif-webfont.ttf') format('truetype'), url('../fonts/droidserif-webfont.svg#droid_serifregular') format('svg');
	font-weight: normal;
	font-style: normal;
}
html {
	font-size: 16px;
}
body {
	background: #fff;
}
h1 {
	font-family: 'nexa_rust_sansblack_01', Helvetica, arial;
	font-size: 3.75rem;
	letter-spacing: 0.05em;
	margin-bottom: 2.5rem;
}
h2 {
	font-family: 'nexa_rust_sansblack_01', Helvetica, arial;
	font-size: 1.5rem; /*24px*/
	line-height: 2.125rem; /* 34px */
}
h3 {
	font-family: 'nexa_boldregular';
	font-size: 32px;
	line-height: 45px;
	text-transform: uppercase;
	text-align: center;
}
h4 {
}
h5 {
}
h6 {
}
p {
	font-family: 'droid_serifregular', Helvetica, Arial, Sans-Serif;
	font-size: 1rem;
	line-height: 1.9375rem; /*15px*/
}
*:focus { outline: none; }
.no-pad-left {
	padding-left: 0;
}
.no-pad-right {
	padding-right: 0;
}
.no-pad-lr {
	padding: 0;
}
.carousel {
	height: 530px;
	list-style: none;
	margin: 0;
	position: relative;
	overflow: hidden;
	width: auto;
}
button.slick-prev {
	display: inline-block;
	position: absolute;
	top: 42%;
	left: 20%;
	z-index: 10;
	background: transparent;
	border: none;
}
button.slick-next {
	display: inline-block;
	position: absolute;
	top: 42%;
	left: 75.5%;
	z-index: 10;
	background: transparent;
	border: none;
}
.sm-slide-img {
	border: none;
	position: relative;
	float: left;
	height: 100%;
	min-height: 1px;
}
.sm-slide-img img {
	height: 460px;
	padding: 20px 0;
	margin-top: 30px;
}
.slick-center img {
	height: 500px;
	margin-top: 15px;
	padding: 0;
	-webkit-transition: all 0.1s ease;
	-moz-transition: all 0.1s ease;
	-ms-transition: all 0.1s ease;
	-o-transition: all 0.1s ease;
	transition: all 0.1s ease;
}
.slick-center .slide-text {
	color: #fff;
	position: absolute;
	left: 5%;
	right: 5%;
	border: 2px solid rgba(255, 255, 255, 0.5);
	padding: 100px 60px 110px 60px;
	margin-top: -66%;
}
.slick-slide:focus {
	display: block;
}
.slick-center .slide-text {
	color: #fff;
	position: absolute;
	left: 5%;
	right: 5%;
	border: 2px solid rgba(255, 255, 255, 0.5);
	padding: 100px 60px 68px 60px;
	margin-top: -62.5%;
}
.slide-text {
	color: #fff;
	position: absolute;
	left: 0%;
	right: 10%;
	border: none;
	padding: 72px 60px 110px 60px;
	margin-top: -65%;
}
.slide-text h1 {
	text-transform: uppercase;
}
.slide-text p {
	font-size: 13px;
	font-family: 'nexa_boldregular';
	line-height: 50px;
	text-transform: uppercase;
	letter-spacing: 0.125rem;
}
.slide-text p span, .slide-text p span:before, .slide-text p span:after {
	text-decoration: underline;
	border: none !important;
}
img.slide-bow-icon {
	width: 37px;
	height: 17px;
	margin: 5px auto;
	padding: 0px 0px;
}
.slick-center img.slide-bow-icon {
	width: 37px;
	height: 17px;
	margin: 25px auto;
	padding: 0;
}
.icon-lines {
	line-height: 1.5rem;
	text-align: center;
}
.icon-lines span {
	display: inline-block;
	position: relative;
}
.icon-lines span:before, .icon-lines span:after {
	content: "";
	position: absolute;
	height: 11px;	/*border-bottom: 2px solid #cccccc;*/
	border-top: 2px solid #fff;
	top: 47%;
	width: 30px;
	vertical-align: -50%;
}
.icon-lines span:before {
	right: 115%;	/*margin-right: 15px;*/
}
.icon-lines span:after {
	left: 115%;	/*margin-left: 15px;*/
}
.circle-left {
	color: rgba(255,255,255,0.7);
	padding: 18px 22px 18px 20px;
	display: inline-block;
	-moz-border-radius: 50%;
	-webkit-border-radius: 50%;
	border-radius: 50%;
	/*-moz-box-shadow: 0px 0px 2px #888;*/
	/* -webkit-box-shadow: 0px 0px 2px #888; */
	/* box-shadow: 0px 0px 2px #fff; */
	font-size: 1.3rem;
	border: 2px solid rgba(255,255,255,0.7);
}
.circle-right {
	color: rgba(255,255,255,0.7);
	padding: 18px 20px 18px 22px;
	display: inline-block;
	-moz-border-radius: 50%;
	-webkit-border-radius: 50%;
	border-radius: 50%;
	/*-moz-box-shadow: 0px 0px 2px #888;*/
	/* -webkit-box-shadow: 0px 0px 2px #888; */
	/* box-shadow: 0px 0px 2px #fff; */
	font-size: 1.3rem;
	border: 2px solid rgba(255,255,255,0.7);
}
.circle:hover, .circle:focus {
	color: #fff;
	border: 2px solid #fff;
}
.tint {
	position: relative;
	cursor: pointer;
}
.slick-center .tint:before {
	content: "";
	display: block;
	position: absolute;
	margin: 0;
	top: 0;
	bottom: 0;
	left: 0;
	right: 0;
	background: rgba(0, 0, 0, 0.35);
	-moz-transition: all .2s ease;
	-webkit-transition: all .2s ease;
	-ms-transition: all .2s ease;
	-o-transition: all .2s ease;
	transition: all .2s ease;
}
.tint:before {
	content: "";
	display: block;
	position: absolute;
	margin: 20px 0;
	top: 0;
	bottom: 0;
	left: 0;
	right: 0;
	background: rgba(0, 0, 0, 0.35);
	-moz-transition: all .2s ease;
	-webkit-transition: all .2s ease;
	-ms-transition: all .2s ease;
	-o-transition: all .2s ease;
	transition: all .2s ease;
}
.tint:hover:before {
	background: rgba(0, 0, 0, 0.35);
}

＆＃13;

<!DOCTYPE html>
<html lang="">
	<head>
		<meta charset="utf-8">
		<meta http-equiv="X-UA-Compatible" content="IE=edge">
		<meta name="viewport" content="width=device-width, initial-scale=1">
		<title>SM Slider</title>

		<!-- Font Awesome -->
		<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css">
		<!-- Bootstrap CSS -->
		<link href="//netdna.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css" rel="stylesheet">
		<!-- Slick Slide -->
		<link rel="stylesheet" type="text/css" href="//cdn.jsdelivr.net/jquery.slick/1.5.9/slick.css"/>
		<!-- Slider Style -->
		<link rel="stylesheet" href="css/main.css">

		<!-- HTML5 Shim and Respond.js IE8 support of HTML5 elements and media queries -->
		<!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
		<!--[if lt IE 9]>
			<script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
			<script src="https://oss.maxcdn.com/libs/respond.js/1.4.2/respond.min.js"></script>
		<![endif]-->
	</head>
	<body>
		<h1 class="text-center">Slider for Smart Groom</h1>
		
		<div class="container-fluid no-pad-lr">

			<div id="carousel" class="carousel">

					<div class="sm-slide-img">
						<figure class="tint"><img src="img/tux-or-suit.png" alt=""></figure>
						<div class="slide-text icon-lines">
							<h3>What to wear on your wedding day: Tux or Suit?</h3>
							<span><img class="slide-bow-icon" src="img/icon-slider.png" alt="" width="70" height="33"></span>
							<p>27 sep // in <span>style</span></p>
						</div>
					</div>

					<div class="sm-slide-img icon-lines">
						<figure class="tint"><img src="img/tuxedo.png" alt=""></figure>
						<div class="slide-text">
							<h3>What to wear on your wedding day: Tux or Suit?</h3>
							<span><img class="slide-bow-icon" src="img/icon-slider.png" alt="" width="70" height="33"></span>
							<p>27 sep // in <span>style</span></p>
						</div>
					</div>

					<div class="sm-slide-img icon-lines">
						<figure class="tint"><img src="img/suits.png" alt=""></figure>
						<div class="slide-text">
							<h3>What to wear on your wedding day: Tux or Suit?</h3>
							<span><img class="slide-bow-icon" src="img/icon-slider.png" alt="" width="70" height="33"></span>
							<p>27 sep // in <span>style</span></p>
						</div>
					</div>
					<div class="sm-slide-img">
						<figure class="tint"><img src="img/tux-or-suit.png" alt=""></figure>
						<div class="slide-text icon-lines">
							<h3>What to wear on your wedding day: Tux or Suit?</h3>
							<span><img class="slide-bow-icon" src="img/icon-slider.png" alt="" width="70" height="33"></span>
							<p>27 sep // in <span>style</span></p>
						</div>
					</div>

					<div class="sm-slide-img icon-lines">
						<figure class="tint"><img src="img/tuxedo.png" alt=""></figure>
						<div class="slide-text">
							<h3>What to wear on your wedding day: Tux or Suit?</h3>
							<span><img class="slide-bow-icon" src="img/icon-slider.png" alt="" width="70" height="33"></span>
							<p>27 sep // in <span>style</span></p>
						</div>
					</div>

					<div class="sm-slide-img icon-lines">
						<figure class="tint"><img src="img/suits.png" alt=""></figure>
						<div class="slide-text">
							<h3>What to wear on your wedding day: Tux or Suit?</h3>
							<span><img class="slide-bow-icon" src="img/icon-slider.png" alt="" width="70" height="33"></span>
							<p>27 sep // in <span>style</span></p>
						</div>
					</div>

					

			</div>

		</div>
		<!-- jQuery -->
		<script src="//ajax.googleapis.com/ajax/libs/jquery/2.2.0/jquery.min.js"></script>
		<!-- Slick Nav -->
		<script type="text/javascript" src="//cdn.jsdelivr.net/jquery.slick/1.5.9/slick.min.js"></script>
		<!-- Slider JS -->
		<script src="js/slider.js"></script>
		<!-- Bootstrap JavaScript -->
		<script src="//netdna.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>
	</body>
</html>

＆＃13;

＆＃13;

＆＃13;

Answer 1

请检查一下。我从css中删除了转换。

＆＃13;

＆＃13;

$(document).ready(function(){
	$('#carousel').slick({
		    infinite: true,
		    speed: 500,
		    centerMode: true,
		    variableWidth: true,
		    centerPadding: '0px',
                cssEase: 'ease'
		});
	$("div.slick-list").removeAttr( 'style' );
	// Previous
	$("button.slick-prev").empty();
	$("button.slick-prev").append('<i class="fa fa-chevron-left circle circle-left"></i>');
	// // Next
	$("button.slick-next").empty();
	$("button.slick-next").append('<i class="fa fa-chevron-right circle circle-right"></i>');
});
	

＆＃13;

html {
	font-size: 16px;
}
body {
	background: #fff;
}
h1 {
	font-family: 'nexa_rust_sansblack_01', Helvetica, arial;
	font-size: 3.75rem;
	letter-spacing: 0.05em;
	margin-bottom: 2.5rem;
}
h2 {
	font-family: 'nexa_rust_sansblack_01', Helvetica, arial;
	font-size: 1.5rem; /*24px*/
	line-height: 2.125rem; /* 34px */
}
h3 {
	font-family: 'nexa_boldregular';
	font-size: 32px;
	line-height: 45px;
	text-transform: uppercase;
	text-align: center;
}
h4 {
}
h5 {
}
h6 {
}
p {
	font-family: 'droid_serifregular', Helvetica, Arial, Sans-Serif;
	font-size: 1rem;
	line-height: 1.9375rem; /*15px*/
}
*:focus { outline: none; }
.no-pad-left {
	padding-left: 0;
}
.no-pad-right {
	padding-right: 0;
}
.no-pad-lr {
	padding: 0;
}
.carousel {
	height: 530px;
	list-style: none;
	margin: 0;
	position: relative;
	overflow: hidden;
	width: auto;
}
button.slick-prev {
	display: inline-block;
	position: absolute;
	top: 42%;
	left: 20%;
	z-index: 10;
	background: transparent;
	border: none;
}
button.slick-next {
	display: inline-block;
	position: absolute;
	top: 42%;
	left: 75.5%;
	z-index: 10;
	background: transparent;
	border: none;
}
.sm-slide-img {
	border: none;
	position: relative;
	float: left;
	height: 100%;
	min-height: 1px;
}
.sm-slide-img img {
	height: 460px;
	padding: 20px 0;
	margin-top: 30px;
}
.slick-center img {
	height: 500px;
	margin-top: 15px;
	padding: 0;

}
.slick-center .slide-text {
	color: #fff;
	position: absolute;
	left: 5%;
	right: 5%;
	border: 2px solid rgba(255, 255, 255, 0.5);
	padding: 100px 60px 110px 60px;
	margin-top: -66%;
}
.slick-slide:focus {
	display: block;
}
.slick-center .slide-text {
	color: #fff;
	position: absolute;
	left: 5%;
	right: 5%;
	border: 2px solid rgba(255, 255, 255, 0.5);
	padding: 100px 60px 68px 60px;
	margin-top: -62.5%;
}
.slide-text {
	color: #fff;
	position: absolute;
	left: 0%;
	right: 10%;
	border: none;
	padding: 72px 60px 110px 60px;
	margin-top: -65%;
}
.slide-text h1 {
	text-transform: uppercase;
}
.slide-text p {
	font-size: 13px;
	font-family: 'nexa_boldregular';
	line-height: 50px;
	text-transform: uppercase;
	letter-spacing: 0.125rem;
}
.slide-text p span, .slide-text p span:before, .slide-text p span:after {
	text-decoration: underline;
	border: none !important;
}
img.slide-bow-icon {
	width: 37px;
	height: 17px;
	margin: 5px auto;
	padding: 0px 0px;
}
.slick-center img.slide-bow-icon {
	width: 37px;
	height: 17px;
	margin: 25px auto;
	padding: 0;
}
.icon-lines {
	line-height: 1.5rem;
	text-align: center;
}
.icon-lines span {
	display: inline-block;
	position: relative;
}
.icon-lines span:before, .icon-lines span:after {
	content: "";
	position: absolute;
	height: 11px;	/*border-bottom: 2px solid #cccccc;*/
	border-top: 2px solid #fff;
	top: 47%;
	width: 30px;
	vertical-align: -50%;
}
.icon-lines span:before {
	right: 115%;	/*margin-right: 15px;*/
}
.icon-lines span:after {
	left: 115%;	/*margin-left: 15px;*/
}
.circle-left {
	color: rgba(255,255,255,0.7);
	padding: 18px 22px 18px 20px;
	display: inline-block;
	-moz-border-radius: 50%;
	-webkit-border-radius: 50%;
	border-radius: 50%;
	/*-moz-box-shadow: 0px 0px 2px #888;*/
	/* -webkit-box-shadow: 0px 0px 2px #888; */
	/* box-shadow: 0px 0px 2px #fff; */
	font-size: 1.3rem;
	border: 2px solid rgba(255,255,255,0.7);
}
.circle-right {
	color: rgba(255,255,255,0.7);
	padding: 18px 20px 18px 22px;
	display: inline-block;
	-moz-border-radius: 50%;
	-webkit-border-radius: 50%;
	border-radius: 50%;
	/*-moz-box-shadow: 0px 0px 2px #888;*/
	/* -webkit-box-shadow: 0px 0px 2px #888; */
	/* box-shadow: 0px 0px 2px #fff; */
	font-size: 1.3rem;
	border: 2px solid rgba(255,255,255,0.7);
}
.circle:hover, .circle:focus {
	color: #fff;
	border: 2px solid #fff;
}
.tint {
	position: relative;
	cursor: pointer;
}
.slick-center .tint:before {
	content: "";
	display: block;
	position: absolute;
	margin: 0;
	top: 0;
	bottom: 0;
	left: 0;
	right: 0;
	background: rgba(0, 0, 0, 0.35);
	
}
.tint:before {
	content: "";
	display: block;
	position: absolute;
	margin: 20px 0;
	top: 0;
	bottom: 0;
	left: 0;
	right: 0;
	background: rgba(0, 0, 0, 0.35);

}
.tint:hover:before {
	background: rgba(0, 0, 0, 0.35);
}

＆＃13;

		<!-- Font Awesome -->
		<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css">
		<!-- Bootstrap CSS -->
		<link href="https://netdna.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css" rel="stylesheet">
		<!-- Slick Slide -->
		<link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/jquery.slick/1.5.9/slick.css"/>
    
    		<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.0/jquery.min.js"></script>
		<!-- Slick Nav -->
		<script type="text/javascript" src="https://cdn.jsdelivr.net/jquery.slick/1.5.9/slick.min.js"></script>
    
		<!-- Bootstrap JavaScript -->
		<script src="https://netdna.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>


<div class="container-fluid no-pad-lr" style="background:#333;">

			<div id="carousel" class="carousel">

					<div class="sm-slide-img">
						<figure class="tint"><img src="http://via.placeholder.com/300x200" alt=""></figure>
						
                        
					</div>

					<div class="sm-slide-img icon-lines">
						
                        <figure class="tint"><img src="http://via.placeholder.com/300x200" alt=""></figure>
					</div>

					<div class="sm-slide-img icon-lines">
						
                        <figure class="tint"><img src="http://via.placeholder.com/300x200" alt=""></figure>
					</div>
					<div class="sm-slide-img">
						
                        <figure class="tint"><img src="http://via.placeholder.com/300x200" alt=""></figure>
					</div>

					
                    

					
                    

					

			</div>

		</div>

＆＃13;

＆＃13;

＆＃13;