Question

我尝试在我的网站中使用导航按钮实现slick.js滑块。我想要这个滑块按钮

但我有这样的感觉。

我尝试增加按钮的大小。它出错了。

此外，我尝试给按钮添加填充：课后，但它在按钮内创建了不可点击的空间。

这是我的代码段

＆＃13;

$('.slider-team ').slick({
    infinite: true,
    slidesToShow: 4,
    slidesToScroll: 4,
    adaptiveHeight: true
  });

＆＃13;

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

＆＃13;

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

Answer 1

您是否尝试过将填充添加到.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>

Answer 2

[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;
}

增加slider.js箭头按钮的大小

2 个答案: