slick.js从箭头上删除focusOnSelect

Question

I Have slick.js menu working perfect with focusOnSelect: true.

Right now the left and right arrows are changing the colours too of the divs, I would like remove this when I click in the arrows, someone can help?

thank you.

here is my code: https://jsfiddle.net/wv4f2hda/3/

edit: sorry I think I was not clear, what I am trying to do is: when I click in the arrows not change my div colours? right now if I click the colours change, I would like remove that.

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

someone think that can be possible?

Thank you.

Answer 1

It's not changing the color, it's changing the opacity.

Change:

.slick-center {
  display: block;
  max-width: 10% !important;
  max-height: 20% !important;
  opacity: 1;
}

to:

.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