How to fix issues with custom slick slider inside Elementor? - wordpress

Question

I need to add a custom looking slider to website made on Elementor.
The website itself
I didn't make it from the start, I just have to fix slider. Not that one from premium features - it has to look different.
I added the custom post type called 'slider', and use it for a loop, like I always do without elementor.
// Shortcode to output custom PHP in Elementor
function wpc_elementor_shortcode( $atts ) {?>
<section class="slider-section">
<div class="slider-section-inner">
<div class="slider-item-wrapper">
<?php
global $post;
$args = array( 'numberposts' => -1, 'post_type' => 'slider');
$myposts = get_posts( $args );
foreach($myposts as $post){ setup_postdata($post); ?>
<div class="slider-item">
<div class="slider-item-inner d-flex">
<div class="slider-item-img">
<?php the_post_thumbnail()?>
</div>
<div class="slider-item-text">
<h2 class="elementor-heading-title elementor-size-default">
<?php the_title()?>
</h2>
<div class="d-flex">
<span class="jet-headline__label">
<?php the_excerpt()?>
</span>
<div class="content-button">
<?php the_content()?>
</div>
</div>
</div>
</div>
</div>
<?php
}
wp_reset_postdata();
?>
</div>
</div>
</section>
<?php }
add_shortcode( 'my_elementor_php_output', 'wpc_elementor_shortcode');
Added its loop to the shortcode, pasted the shortcode to the text block, and one item appears correctly, but something wrong with the slick.
Then added the script to functions.php
add_action('wp_footer','slider_main');
function slider_main(){?>
<script>
jQuery(document).ready(function(){
jQuery('section.slider-section .content-button a').addClass('raven-button raven-button-link elementor-animation-grow');
jQuery('.slider-item-wrapper').each(function() {
var slider = jQuery(this);
slider.slick({
slidesToShow: 1,
slidesToScroll: 1,
dots:false,
arrows: true,
});
});
});
</script>
<?php }
It's fully white, I don't see it.
I experemented to change containers and wrappers, but it's still something wrong. Please help - maybe I miss something.
Is it a script or maybe a style?
section.slider-section {
width: 100%;
display: flex;
justify-content: center;
margin-top: 90px;
margin-bottom: 200px;
overflow-x:hidden
}
.slider-item-inner.d-flex {
display: flex;
align-items: center;
}
.slider-item-img {
width: 50%;
}
.slider-item-img img {
height: auto;
max-width: 100%;
}
.slider-item-text {
width: 50%;
}
section.slider-section h2.elementor-heading-title.elementor-size-default {
color: #000000;
font-family: "Alef", Sans-serif;
font-size: 120px;
font-weight: 600;
line-height: 83px;
margin-right:50px
}
.slider-section-inner{
max-width:1140px;
}
section.slider-section .slick-track{
display:flex!important;
justify-content:center;
}
section.slider-section span.jet-headline__label {
color: #000000;
font-family: "Alef", Sans-serif;
font-size: 35px;
font-weight: 400;
}
span.jet-headline__label p {
padding: 10px 0px 10px 0px;
border-style: solid;
border-width: 0px 0px 10px 0px;
border-color: #E1FF25;
}
.slider-item-text p {
display: flex;
width: fit-content;
}
.slider-item-text .d-flex {
display: flex;
flex-wrap: wrap;
align-items: center;
justify-content: space-between;
max-width: 24vw;
margin-right:50px
}
.content-button a {
padding: 15px 15px 15px 15px;
background-color: #E1FF25;
background-image: none;
border-color: #000000;
border-style: solid;
border-width: 0px 0px 0px 0px;
border-radius: 0px 0px 0px 0px;
font-family: "Alef", Sans-serif;
font-size: 25px;
font-weight: 800;
color: #000000;
}
.raven-button:focus, .raven-button:hover, .raven-button:visited, a.raven-button:focus, a.raven-button:hover, a.raven-button:visited{
color:unset!important;
text-decoration:none!important
}