我尝试在我的网站中使用导航按钮实现slick.js滑块。我想要这个滑块按钮
但我有这样的感觉。
我尝试增加按钮的大小。它出错了。
此外,我尝试给按钮添加填充:课后,但它在按钮内创建了不可点击的空间。
这是我的代码段
$('.slider-team ').slick({
infinite: true,
slidesToShow: 4,
slidesToScroll: 4,
adaptiveHeight: true
});

.section-team .bx {
text-align: center;
border: 2px solid #CCCCCC;
border-radius: 3px;
padding: 6%;
color: #CCCCCC;
margin-top: 20px;
}
/* slider */
.team_area{
float: left;
display: inline;
width: 100%;
}
.slider-team{
float: left;
display: inline;
width: 100%;
}
.slick-prev::before, .slick-next::before {
background-color: blue;
position: absolute;
font-family: 'FontAwesome' !important;
top: 0;
padding:40px;
}
.slick-prev,
.slick-next{
width: 30px;
}
.slick-next{
}
.slick-prev:before {
content: "\f104" !important;
}
.slick-next:before {
content: "\f105" !important;
}
/* End Slider */
.section-team .bx > div {
margin-bottom: 10px;
}
.section-team .bx > div:last-child {
margin-top: 20px;
}
.section-team .bx img {
width: 150px;
margin: 0px auto;
margin-top: 10px;
}
.section-team .bx h4 {
margin-bottom: 0px;
color: #464646;
}
.section-team .bx h4 + p {
color: #2EA2C7;
}
.section-team .bx h4,
.section-team .bx h4 + p {
text-transform: uppercase;
}
.section-team .bx P + p {
line-height: 1.6;
font-size: 95%;
color: #837979;
}
.social-nav {
margin: 0 auto;
}
.social-nav li {
display: inline-block;
margin-left: 5px;
}
.social-nav li a {
width: 35px;
height: 35px;
border-radius: 50% !important;
display: inline-block;
color: #fff;
background-color: #CCCCCC;
padding-top: 9px;
text-align: center;
vertical-align: middle;
transition: all 0.2s;
}
.social-nav li .facebook:hover{
color: #fff;
background-color: #3b5998;
}
.social-nav li .twitter:hover{
color: #fff;
background-color: #55acee;
}
.social-nav li .google-plus:hover{
color: #fff;
background-color: #f44336;
}
.social-nav li .linkedin:hover{
color: #fff;
background-color: #007bb5;
}

<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.6/css/bootstrap.css" rel="stylesheet" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.6.0/slick.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.6.0/slick.css" rel="stylesheet" />
<link href="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.6.0/slick-theme.css" rel="stylesheet" />
<div class="team_area">
<div class="slider-team">
<div class="col-xs-12 col-sm-3">
<div class="bx">
<div>
<img src="resources/image/img1.jpg" class="img-responsive img-circle ">
</div>
<div>
<h4>jamie sidens</h4>
<p>founder</p>
<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's</p>
</div>
<div>
<ul class="social-nav">
<li><a class="facebook" href="#"><span class="fa fa-facebook"></span></a>
</li>
<li><a class="twitter" href="#"><span class="fa fa-twitter"></span></a>
</li>
<li><a class="google-plus" href="#"><span class="fa fa-google-plus"></span></a>
</li>
<li><a class="linkedin" href="#"><span class="fa fa-linkedin"></span></a>
</li>
</ul>
</div>
</div>
</div>
<div class="col-xs-12 col-sm-3">
<div class="bx">
<div>
<img src="resources/image/img1.jpg" class="img-responsive img-circle ">
</div>
<div>
<h4>jamie sidens</h4>
<p>founder</p>
<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's</p>
</div>
<div>
<ul class="social-nav">
<li><a class="facebook" href="#"><span class="fa fa-facebook"></span></a>
</li>
<li><a class="twitter" href="#"><span class="fa fa-twitter"></span></a>
</li>
<li><a class="google-plus" href="#"><span class="fa fa-google-plus"></span></a>
</li>
<li><a class="linkedin" href="#"><span class="fa fa-linkedin"></span></a>
</li>
</ul>
</div>
</div>
</div>
<div class="col-xs-12 col-sm-3">
<div class="bx">
<div>
<img src="resources/image/img1.jpg" class="img-responsive img-circle ">
</div>
<div>
<h4>jamie sidens</h4>
<p>founder</p>
<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's</p>
</div>
<div>
<ul class="social-nav">
<li><a class="facebook" href="#"><span class="fa fa-facebook"></span></a>
</li>
<li><a class="twitter" href="#"><span class="fa fa-twitter"></span></a>
</li>
<li><a class="google-plus" href="#"><span class="fa fa-google-plus"></span></a>
</li>
<li><a class="linkedin" href="#"><span class="fa fa-linkedin"></span></a>
</li>
</ul>
</div>
</div>
</div>
<div class="col-xs-12 col-sm-3">
<div class="bx">
<div>
<img src="resources/image/img1.jpg" class="img-responsive img-circle ">
</div>
<div>
<h4>jamie sidens</h4>
<p>founder</p>
<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's</p>
</div>
<div>
<ul class="social-nav">
<li><a class="facebook" href="#"><span class="fa fa-facebook"></span></a>
</li>
<li><a class="twitter" href="#"><span class="fa fa-twitter"></span></a>
</li>
<li><a class="google-plus" href="#"><span class="fa fa-google-plus"></span></a>
</li>
<li><a class="linkedin" href="#"><span class="fa fa-linkedin"></span></a>
</li>
</ul>
</div>
</div>
</div>
<div class="col-xs-12 col-sm-3">
<div class="bx">
<div>
<img src="resources/image/img1.jpg" class="img-responsive img-circle ">
</div>
<div>
<h4>jamie sidens</h4>
<p>founder</p>
<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's</p>
</div>
<div>
<ul class="social-nav">
<li><a class="facebook" href="#"><span class="fa fa-facebook"></span></a>
</li>
<li><a class="twitter" href="#"><span class="fa fa-twitter"></span></a>
</li>
<li><a class="google-plus" href="#"><span class="fa fa-google-plus"></span></a>
</li>
<li><a class="linkedin" href="#"><span class="fa fa-linkedin"></span></a>
</li>
</ul>
</div>
</div>
</div>
<div class="col-xs-12 col-sm-3">
<div class="bx">
<div>
<img src="resources/image/img1.jpg" class="img-responsive img-circle ">
</div>
<div>
<h4>jamie sidens</h4>
<p>founder</p>
<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's</p>
</div>
<div>
<ul class="social-nav">
<li><a class="facebook" href="#"><span class="fa fa-facebook"></span></a>
</li>
<li><a class="twitter" href="#"><span class="fa fa-twitter"></span></a>
</li>
<li><a class="google-plus" href="#"><span class="fa fa-google-plus"></span></a>
</li>
<li><a class="linkedin" href="#"><span class="fa fa-linkedin"></span></a>
</li>
</ul>
</div>
</div>
</div>
<div class="col-xs-12 col-sm-3">
<div class="bx">
<div>
<img src="resources/image/img1.jpg" class="img-responsive img-circle ">
</div>
<div>
<h4>jamie sidens</h4>
<p>founder</p>
<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's</p>
</div>
<div>
<ul class="social-nav">
<li><a class="facebook" href="#"><span class="fa fa-facebook"></span></a>
</li>
<li><a class="twitter" href="#"><span class="fa fa-twitter"></span></a>
</li>
<li><a class="google-plus" href="#"><span class="fa fa-google-plus"></span></a>
</li>
<li><a class="linkedin" href="#"><span class="fa fa-linkedin"></span></a>
</li>
</ul>
</div>
</div>
</div>
</div>
</div>
&#13;
答案 0 :(得分:0)
您是否尝试过将填充添加到.class:before
,如下所示:
.slick-prev:before, .slick-next:before {
padding: 40px;
}
似乎对我来说很好。也许,班级名称覆盖了您尝试使用button:before
/ button:after
等所做的事情。
工作更新:
$('.slider-team ').slick({
infinite: true,
slidesToShow: 4,
slidesToScroll: 4,
adaptiveHeight: true
});
.section-team .bx {
text-align: center;
border: 2px solid #CCCCCC;
border-radius: 3px;
padding: 6%;
color: #CCCCCC;
margin-top: 20px;
}
/* slider */
.team_area{
float: left;
display: inline;
width: 100%;
}
.slider-team{
float: left;
display: inline;
width: 100%;
}
.slick-prev::before, .slick-next::before {
background-color: blue;
position: absolute;
font-family: 'FontAwesome' !important;
top: 0;
}
.slick-prev,
.slick-next{
width: 30px;
}
.slick-next{
}
.slick-prev:before {
content: "\f104" !important;
}
.slick-next:before {
content: "\f105" !important;
}
/* End Slider */
.section-team .bx > div {
margin-bottom: 10px;
}
.section-team .bx > div:last-child {
margin-top: 20px;
}
.section-team .bx img {
width: 150px;
margin: 0px auto;
margin-top: 10px;
}
.section-team .bx h4 {
margin-bottom: 0px;
color: #464646;
}
.section-team .bx h4 + p {
color: #2EA2C7;
}
.section-team .bx h4,
.section-team .bx h4 + p {
text-transform: uppercase;
}
.section-team .bx P + p {
line-height: 1.6;
font-size: 95%;
color: #837979;
}
.social-nav {
margin: 0 auto;
}
.social-nav li {
display: inline-block;
margin-left: 5px;
}
.social-nav li a {
width: 35px;
height: 35px;
border-radius: 50% !important;
display: inline-block;
color: #fff;
background-color: #CCCCCC;
padding-top: 9px;
text-align: center;
vertical-align: middle;
transition: all 0.2s;
}
.social-nav li .facebook:hover{
color: #fff;
background-color: #3b5998;
}
.social-nav li .twitter:hover{
color: #fff;
background-color: #55acee;
}
.social-nav li .google-plus:hover{
color: #fff;
background-color: #f44336;
}
.social-nav li .linkedin:hover{
color: #fff;
background-color: #007bb5;
}
.slick-prev:before, .slick-next:before {
padding: 40px;
}
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.6/css/bootstrap.css" rel="stylesheet" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.6.0/slick.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.6.0/slick.css" rel="stylesheet" />
<link href="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.6.0/slick-theme.css" rel="stylesheet" />
<div class="team_area">
<div class="slider-team">
<div class="col-xs-12 col-sm-3">
<div class="bx">
<div>
<img src="resources/image/img1.jpg" class="img-responsive img-circle ">
</div>
<div>
<h4>jamie sidens</h4>
<p>founder</p>
<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's</p>
</div>
<div>
<ul class="social-nav">
<li><a class="facebook" href="#"><span class="fa fa-facebook"></span></a>
</li>
<li><a class="twitter" href="#"><span class="fa fa-twitter"></span></a>
</li>
<li><a class="google-plus" href="#"><span class="fa fa-google-plus"></span></a>
</li>
<li><a class="linkedin" href="#"><span class="fa fa-linkedin"></span></a>
</li>
</ul>
</div>
</div>
</div>
<div class="col-xs-12 col-sm-3">
<div class="bx">
<div>
<img src="resources/image/img1.jpg" class="img-responsive img-circle ">
</div>
<div>
<h4>jamie sidens</h4>
<p>founder</p>
<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's</p>
</div>
<div>
<ul class="social-nav">
<li><a class="facebook" href="#"><span class="fa fa-facebook"></span></a>
</li>
<li><a class="twitter" href="#"><span class="fa fa-twitter"></span></a>
</li>
<li><a class="google-plus" href="#"><span class="fa fa-google-plus"></span></a>
</li>
<li><a class="linkedin" href="#"><span class="fa fa-linkedin"></span></a>
</li>
</ul>
</div>
</div>
</div>
<div class="col-xs-12 col-sm-3">
<div class="bx">
<div>
<img src="resources/image/img1.jpg" class="img-responsive img-circle ">
</div>
<div>
<h4>jamie sidens</h4>
<p>founder</p>
<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's</p>
</div>
<div>
<ul class="social-nav">
<li><a class="facebook" href="#"><span class="fa fa-facebook"></span></a>
</li>
<li><a class="twitter" href="#"><span class="fa fa-twitter"></span></a>
</li>
<li><a class="google-plus" href="#"><span class="fa fa-google-plus"></span></a>
</li>
<li><a class="linkedin" href="#"><span class="fa fa-linkedin"></span></a>
</li>
</ul>
</div>
</div>
</div>
<div class="col-xs-12 col-sm-3">
<div class="bx">
<div>
<img src="resources/image/img1.jpg" class="img-responsive img-circle ">
</div>
<div>
<h4>jamie sidens</h4>
<p>founder</p>
<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's</p>
</div>
<div>
<ul class="social-nav">
<li><a class="facebook" href="#"><span class="fa fa-facebook"></span></a>
</li>
<li><a class="twitter" href="#"><span class="fa fa-twitter"></span></a>
</li>
<li><a class="google-plus" href="#"><span class="fa fa-google-plus"></span></a>
</li>
<li><a class="linkedin" href="#"><span class="fa fa-linkedin"></span></a>
</li>
</ul>
</div>
</div>
</div>
<div class="col-xs-12 col-sm-3">
<div class="bx">
<div>
<img src="resources/image/img1.jpg" class="img-responsive img-circle ">
</div>
<div>
<h4>jamie sidens</h4>
<p>founder</p>
<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's</p>
</div>
<div>
<ul class="social-nav">
<li><a class="facebook" href="#"><span class="fa fa-facebook"></span></a>
</li>
<li><a class="twitter" href="#"><span class="fa fa-twitter"></span></a>
</li>
<li><a class="google-plus" href="#"><span class="fa fa-google-plus"></span></a>
</li>
<li><a class="linkedin" href="#"><span class="fa fa-linkedin"></span></a>
</li>
</ul>
</div>
</div>
</div>
<div class="col-xs-12 col-sm-3">
<div class="bx">
<div>
<img src="resources/image/img1.jpg" class="img-responsive img-circle ">
</div>
<div>
<h4>jamie sidens</h4>
<p>founder</p>
<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's</p>
</div>
<div>
<ul class="social-nav">
<li><a class="facebook" href="#"><span class="fa fa-facebook"></span></a>
</li>
<li><a class="twitter" href="#"><span class="fa fa-twitter"></span></a>
</li>
<li><a class="google-plus" href="#"><span class="fa fa-google-plus"></span></a>
</li>
<li><a class="linkedin" href="#"><span class="fa fa-linkedin"></span></a>
</li>
</ul>
</div>
</div>
</div>
<div class="col-xs-12 col-sm-3">
<div class="bx">
<div>
<img src="resources/image/img1.jpg" class="img-responsive img-circle ">
</div>
<div>
<h4>jamie sidens</h4>
<p>founder</p>
<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's</p>
</div>
<div>
<ul class="social-nav">
<li><a class="facebook" href="#"><span class="fa fa-facebook"></span></a>
</li>
<li><a class="twitter" href="#"><span class="fa fa-twitter"></span></a>
</li>
<li><a class="google-plus" href="#"><span class="fa fa-google-plus"></span></a>
</li>
<li><a class="linkedin" href="#"><span class="fa fa-linkedin"></span></a>
</li>
</ul>
</div>
</div>
</div>
</div>
</div>
答案 1 :(得分:0)
[0-9A-Fa-f]
$('.slider-team ').slick({
infinite: true,
slidesToShow: 4,
slidesToScroll: 4,
adaptiveHeight: true
});
.section-team .bx {
text-align: center;
border: 2px solid #CCCCCC;
border-radius: 3px;
padding: 6%;
color: #CCCCCC;
margin-top: 20px;
}
.slick-prev,
.slick-next {
font-size: 0;
line-height: 0;
position: absolute;
top: 50%;
display: block;
width: 20px;
height: 20px;
z-index: 999;
padding: 0;
-webkit-transform: translate(0, -50%);
-ms-transform: translate(0, -50%);
transform: translate(0, -50%);
cursor: pointer;
color: transparent;
border: none;
outline: none;
background: transparent;
}
.slick-prev {
left: 0 !important;
}
.slick-prev:before,
.slick-next:before {
font-family: 'slick';
font-size: 34px !important;
line-height: 1;
color: #fff;
opacity: 1;
z-index: 999;
position: absolute;
background: #2DA2C8 !important;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
border-top-left-radius: 5px;
border-bottom-left-radius: 5px;
}
/* slider */
.team_area {
float: left;
display: inline;
width: 100%;
}
.slider-team {
float: left;
display: inline;
width: 100%;
}
.slick-prev::before,
.slick-next::before {
background-color: blue;
position: absolute;
font-family: 'FontAwesome' !important;
top: 0;
}
.slick-prev,
.slick-next {
width: 30px;
}
.slick-next {} .slick-prev:before {
content: "\f104" !important;
}
.slick-next:before {
content: "\f105" !important;
}
/* End Slider */
.section-team .bx > div {
margin-bottom: 10px;
}
.section-team .bx > div:last-child {
margin-top: 20px;
}
.section-team .bx img {
width: 150px;
margin: 0px auto;
margin-top: 10px;
}
.section-team .bx h4 {
margin-bottom: 0px;
color: #464646;
}
.section-team .bx h4 + p {
color: #2EA2C7;
}
.section-team .bx h4,
.section-team .bx h4 + p {
text-transform: uppercase;
}
.section-team .bx P + p {
line-height: 1.6;
font-size: 95%;
color: #837979;
}
.social-nav {
margin: 0 auto;
}
.social-nav li {
display: inline-block;
margin-left: 5px;
}
.social-nav li a {
width: 35px;
height: 35px;
border-radius: 50% !important;
display: inline-block;
color: #fff;
background-color: #CCCCCC;
padding-top: 9px;
text-align: center;
vertical-align: middle;
transition: all 0.2s;
}
.social-nav li .facebook:hover {
color: #fff;
background-color: #3b5998;
}
.social-nav li .twitter:hover {
color: #fff;
background-color: #55acee;
}
.social-nav li .google-plus:hover {
color: #fff;
background-color: #f44336;
}
.social-nav li .linkedin:hover {
color: #fff;
background-color: #007bb5;
}