Как затемнить slick слайдер

Question

Пример как я затемнил, но не пойму как сделать так, чтобы блок затемнения автоматически подстраивался под размер слайдера. Если есть более простые варианты, подскажите как это сделать.

// https://jsfiddle.net/VIKOTOR/zq5c6eud/6/


<link rel="stylesheet" type="text/css" href="//cdn.jsdelivr.net/npm/[email protected]/slick/slick.css"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script type="text/javascript" src="//cdn.jsdelivr.net/npm/[email protected]/slick/slick.min.js"></script>
        <style>header{position:relative;min-height:630px;}
.banner_block{
    position:absolute;top:0;max-width:1920px;width:100%;z-index:10;left:50%;transform:translate(-50%, 0%);
}
.banner_dark_block{
    width: 100%;
    height: 630px;
    background: rgb(0 16 71 / 30%);
    position: absolute;
    z-index: 1000;
}
</style>        
<header>
        <div class="banner_block">
            <div class="banner_dark_block"></div>
            <div class="slider_banner">
                <div><img src='https://cdn.pixabay.com/photo/2021/02/07/09/11/sunset-5990540_960_720.jpg'/></div>
                <div><img src='https://cdn.pixabay.com/photo/2021/02/01/16/22/flamingo-5971206_960_720.jpg'/></div>
                <div><img src='https://cdn.pixabay.com/photo/2021/02/01/20/16/yachts-5971866_960_720.jpg'/></div>
            </div>
        </div>
    </header>
    <script>$('.slider_banner').slick({
    slidesToShow: 1,
    slidesToScroll: 1,
    infinite: true,
    autoplay: true,
    autoplaySpeed: 5000,
    dots:false,
    fade: true,
    arrows: false
  });
          </script>

Answer 1

Затемнить слайды лучше таким вот образом, с помощью псевдоэлемента ::before или ::after:

$('.slider_banner').slick({
  slidesToShow: 1,
  slidesToScroll: 1,
  infinite: true,
  autoplay: true,
  autoplaySpeed: 5000,
  dots: false,
  fade: true,
  arrows: false
});

header {
  position: relative;
  min-height: 630px;
}

.banner_block {
  position: absolute;
  top: 0;
  /*max-width: 1920px;*/
  max-width: 640px;
  width: 100%;
  z-index: 10;
  left: 50%;
  transform: translate(-50%, 0%);
}

.slider_banner {
  position: relative;
}

.slick-slide:before {
  content: "";
  display: block;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(255, 0, 0, 0.7);
}

<link rel="stylesheet" type="text/css" href="//cdn.jsdelivr.net/npm/[email protected]/slick/slick.css" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script type="text/javascript" src="//cdn.jsdelivr.net/npm/[email protected]/slick/slick.min.js"></script>

<header>
  <div class="banner_block">
    <div class="slider_banner">
      <div><img src='https://cdn.pixabay.com/photo/2021/02/07/09/11/sunset-5990540_960_720.jpg' /></div>
      <div><img src='https://cdn.pixabay.com/photo/2021/02/01/16/22/flamingo-5971206_960_720.jpg' /></div>
      <div><img src='https://cdn.pixabay.com/photo/2021/02/01/20/16/yachts-5971866_960_720.jpg' /></div>
    </div>
  </div>
</header>

БЛОГ НА HUSL

Как затемнить slick слайдер

Ответы (1 шт):