jquery - 导航上的 Slick Slider Jumping - 可变宽度和中心模式

标签 jquery html css slick.js

如果光滑( slider http://kenwheeler.github.io/slick/)，我的使用有问题。

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

包括 Bootstrap、jQuery 和 Slick

HTML/CSS 已验证 - 没有错误

我的代码。

$(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>');
});
/*===================
        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);
}
<!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>

最佳答案

请检查。我从 css 中删除了过渡。

$(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>');
});
	
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);
}
		<!-- 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>

关于jquery - 导航上的 Slick Slider Jumping - 可变宽度和中心模式，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/35056253/

上一篇：javascript - 悬停时背景大小不会更新

下一篇：javascript - Angular : function triggers twice on ng-change while selecting any option from dropdown

相关文章：

jquery - Z-Index 与物理位置和 jQuery

javascript - jQuery Mobile Beta 1 现在在移动浏览器中将页面显示为普通网站？

html - CSS 覆盖规则

jquery - 如何在dataTable现有列中添加静态数据列

html - 与位置 : relative 堆叠

jquery - 使用 jQuery 计算 HTML 元素数量

jquery - 使元素跳过 Bootstrap CSS

CSS Sprite 菜单不显示正确的背景

html - 具有 :first-letter can't be selected 的元素

javascript - 关于文件上传的查询

©2024 IT工具网  联系我们