我 slick.js 菜单与focusOnSelect: true.
现在左右箭头也改变了div的颜色,我想在点击箭头时删除它,有人可以帮忙吗?
谢谢。这是我的代码:https://jsfiddle.net/wv4f2hda/3/
编辑:对不起我觉得我不清楚,我想要做的是:当我点击箭头而不是改变我的div颜色?现在,如果我点击颜色变化,我想删除它。
HTML:
<h1> Slick Carousel Center mode </h1>
</h1>
<div class="slider">
<div>
<div class="slide-h3">
<i class="fa fa-lg fa-trash"></i>
<h3>
1
</h3></div>
</div>
<div>
<div class="slide-h3">
<i class="fa fa-lg fa-trash"></i>
<h3>
2
</h3></div>
</div>
<div>
<div class="slide-h3">
<i class="fa fa-lg fa-trash"></i>
<h3>
3
</h3></div>
</div>
<div>
<div class="slide-h3">
<i class="fa fa-lg fa-trash"></i>
<h3>
4
</h3></div>
</div>
<div>
<div class="slide-h3">
<i class="fa fa-lg fa-trash"></i>
<h3>
5
</h3></div>
</div>
</div>
JS:
$(document).ready(function() {
$('.slider').slick({
centerMode: true,
centerPadding: '60px',
slidesToShow: 4,
speed: 1500,
index: 2,
focusOnSelect:true,
responsive: [{
breakpoint: 768,
settings: {
arrows: true,
centerMode: true,
centerPadding: '40px',
slidesToShow: 3
}
}, {
breakpoint: 480,
settings: {
arrows: false,
centerMode: true,
centerPadding: '40px',
slidesToShow: 1
}
}]
});
});
的CSS:
body {
background-color: grey;
}
.slick-center .slide-h3 {
color: #FFF;
}
.slider {
width: 600px;
height: 150px;
margin: 20px auto;
text-align: center;
}
.slide-h3 {
margin: 10% 0 10% 0;
padding: 40% 20%;
background: red;
}
.slider div {
margin-right: 5px;
}
.slick-slide {
opacity: .6;
width:10px;
}
.slick-center {
display: block;
max-width: 10% !important;
max-height: 20% !important;
opacity: 1;
}
有人认为这可能吗?
谢谢。
答案 0 :(得分:1)
它没有改变颜色,它改变了不透明度。
变化:
.slick-center {
display: block;
max-width: 10% !important;
max-height: 20% !important;
opacity: 1;
}
为:
.slick-center {
display: block;
max-width: 10% !important;
max-height: 20% !important;
opacity: 0.6; /* keep opacity the same, or just remove this line */
}