slick.js从箭头中删除focusOnSelect

时间:2016-07-05 08:09:38

标签: javascript jquery slick.js

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;
}
有人认为这可能吗?

谢谢。

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 */
}

Updated fiddle