Question

我的幻灯片块的颜色在获得最新时为红色，而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>

总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
       }
     }]
   });
 });

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

}

光滑滑块更改背景颜色以获取当前和非当前颜色

1 个答案: