2
私は自分のウェブサイトにnavickボタンでslick.jsスライダーを実装しようとしています。私は、このスライダボタンslider.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{
\t float: left;
\t display: inline;
\t width: 100%;
}
.slider-team{
\t float: left;
\t display: inline;
\t 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>
てみ.ill：おそらく、クラス名を使用すると、
など、
button:before/button:afterをどうするの作業の更新をしようとしていたものを上書きしてその1つは、私の更新スニペットを見た。アローボタンは完全にクリック可能ではありません – Aravin