Why isn’t the Slick slider being utilized in the slider_frontend_scripts() But it’s not utilizing the Slick slider despite enqueuing its scripts and styles. Here is the current code

function slider_frontend_scripts() {
    wp_enqueue_script('jquery-cdn', 'https://ajax.googleapis.com/ajax/libs/jquery/3.7.1/jquery.min.js', array('jquery'), '1.0.0', true);
    wp_enqueue_style('slider-frontend-style', '//cdn.jsdelivr.net/npm/[email protected]/slick/slick.css');
    wp_enqueue_script('slick-carousel', '//cdn.jsdelivr.net/npm/[email protected]/slick/slick.min.js', array('jquery'), '1.8.1', true);
    wp_enqueue_script('slider-custom', plugin_dir_url(__FILE__) . 'assets/custom.js', array('jquery', 'slick-carousel'), '1.0.0', true);
    wp_enqueue_style('custom-frontend-style', plugin_dir_url(__FILE__) . 'assets/customstyle.css');
}
add_action('wp_enqueue_scripts', 'slider_frontend_scripts');

// Shortcode to render the slider
function slider_shortcode() {
    global $wpdb;
    $sql = "SELECT * FROM {$wpdb->prefix}image_url";
    $results = $wpdb->get_results($sql);

    ob_start();
    ?>
    <div id="slider_slick">
        <?php foreach ($results as $image): ?>
            <div class="slider-image">
                <div class="slider-container">
                    <img src="<?php echo esc_url($image->url); ?>" alt="<?php echo esc_attr($image->text); ?>">
                    <p class="slider-title"><?php echo esc_html($image->text); ?></p>
                </div>
            </div>
        <?php endforeach; ?>
    </div>
    <?php
    return ob_get_clean();
}
add_shortcode('my_slider', 'slider_shortcode');

Here is the custom.js

jQuery(document).ready(function($) {
$('#slider_slick').slick({
    dots: true,
    infinite: true,
    speed: 300,
    slidesToShow: 1,
    adaptiveHeight: true
});

});

Tried different slider packages and other things but its not using the packages at all.