owl carousel not working in magento2.4

it’s my first time using magento and i have luma theme “without sample data” and i want to put slider in it, when i do this the images showing under each other like a block not a slider,
i searched a lot for this issue and found a lot of solutions but nothing worked for me so i want to know if i’m doing something wrong.

these is what i did:

in appdesignfrontendMagentolumaMagento_Theme i have created requirejs-config.js file and put this code

var config = {
    paths: {
        'owlcarousel': "Magento_Theme/js/owl.carousel",
        'customjs': "Magento_Theme/js/custom"
    },
    shim: {
        'owlcarousel': {
            deps: ['jquery']
        },
        'customjs': {
            deps: ['jquery']
        }
    }
};

then in appdesignfrontendMagentolumaMagento_Themewebcss
i have put custom_style.css , owl.carousel.css , owl.theme.default.css
in appdesignfrontendMagentolumaMagento_Themewebjs
i have put custom.js , owl.carousel.js
inside custom.js

require(['jquery', 'owlcarousel'], function ($) {
    $(document).ready(function () {
        
        $(".owl-carousel").owlCarousel({
            navigation: true,
            autoplay: true,
            autoplayHoverPause: false,
            autoplaySpeed: 2000,
            loop: true,
            smartSpeed: 450
        });
    });
});

inside appdesignfrontendMagentolumaMagento_Themelayoutdefault_head_blocks.xml

<page xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:framework:View/Layout/etc/page_configuration.xsd">
    <head>
        <meta name="viewport" content="width=device-width, initial-scale=1"/>
        <font src="fonts/opensans/light/opensans-300.woff2"/>
        <font src="fonts/opensans/regular/opensans-400.woff2"/>
        <font src="fonts/opensans/semibold/opensans-600.woff2"/>
        <font src="fonts/opensans/bold/opensans-700.woff2"/>
        <font src="fonts/Luma-Icons.woff2"/>
        <css  src="css/owl.carousel.css"/>
        <css  src="css/owl.theme.default.css"/>
        <css src="css/custom_style.css" media="all">
        <link src="js/owl.carousel.js">
        <link src="js/custom.js">
    </head>
</page>

also i tried to change the path like this but doesn’t work either

        <css  src="Magento_Theme::css/owl.carousel.css"/>
        <css  src="Magento_Theme::css/owl.theme.default.css"/>
        <css src="Magento_Theme::css/custom_style.css" media="all">
        <link src="Magento_Theme::js/owl.carousel.js">
        <link src="Magento_Theme::js/custom.js">

i create static block from admin dashboard like this

<div class="owl-carousel owl-theme">
    <div class="item"><img></div>
    <div class="item"><img></div>
    <div class="item"><img></div>
</div>

and if i wanted to put script after the div or put inline-style it get removed that’s why i created custom style and js files