jquery - 光滑的 slider 更改当前和非当前的背景颜色

Question

我的 slider 的颜色在获得电流时为红色，opacity: .6 不是时。

我想要的:当前背景颜色什么时候是红色，什么时候不是蓝色。

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

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

html:

<h1> Slick Carousel Center mode </h1>
</h1>
<div class="slider">
  <div>
    <div class="slide-h3">1</div>
  </div>
  <div>
    <div class="slide-h3">2</div>
  </div>
  <div>
    <div class="slide-h3">3</div>
  </div>
  <div>
    <div class="slide-h3">4</div>
  </div>
  <div>
    <div class="slide-h3">5</div>
  </div>
  <div>
    <div class="slide-h3">6</div>
  </div>
</div>

js:

 $(document).ready(function() {
   $('.slider').slick({
     centerMode: true,
     centerPadding: '60px',
     slidesToShow: 3,
     speed: 1500,
     index: 2,
     responsive: [{
       breakpoint: 768,
       settings: {
         arrows: false,
         centerMode: true,
         centerPadding: '40px',
         slidesToShow: 3
       }
     }, {
       breakpoint: 480,
       settings: {
         arrows: false,
         centerMode: true,
         centerPadding: '40px',
         slidesToShow: 1
       }
     }]
   });
 });

jsfiddle: https://jsfiddle.net/y3xw3thy/1/

Answer 1

只需添加这个CSS

    .slick-slide .slide-h3 {
//making all slides blue
      background: blue;
    }
    .slick-center .slide-h3 {
//making one centered lide  red
      background: red;
    }

demo

总 html:

<h1> Slick Carousel Center mode </h1>
</h1>
<div class="slider">
  <div>
    <div class="slide-h3">1</div>
  </div>
  <div>
    <div class="slide-h3">2</div>
  </div>
  <div>
    <div class="slide-h3">3</div>
  </div>
  <div>
    <div class="slide-h3">4</div>
  </div>
  <div>
    <div class="slide-h3">5</div>
  </div>
  <div>
    <div class="slide-h3">6</div>
  </div>
</div>

总计

     $(document).ready(function() {
   $('.slider').slick({
     centerMode: true,
     centerPadding: '60px',
     slidesToShow: 3,
     speed: 1500,
     index: 2,
     responsive: [{
       breakpoint: 768,
       settings: {
         arrows: false,
         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;
}

.slick-slide .slide-h3 {
  background: blue;
}
.slick-center .slide-h3 {
  background: red;
}

.slide-h3 {
  margin: 10% 0 10% 0;
  padding: 40% 20%;
  background: red;
}
.slider div {
  margin-right: 5px;
}

.slick-slide {
  opacity: .6;
}

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

}