Пример как я затемнил, но не пойму как сделать так, чтобы блок затемнения автоматически подстраивался под размер слайдера. Если есть более простые варианты, подскажите как это сделать.
// https://jsfiddle.net/VIKOTOR/zq5c6eud/6/
<link rel="stylesheet" type="text/css" href="//cdn.jsdelivr.net/npm/slick-carousel@1.8.1/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/slick-carousel@1.8.1/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>