owlCarousel Slider not working

Question

Hi i have custom product slider which is not working below is my code

<?php  
$dailydeal_products = $block->getProductCollection();
 $_helper = $this->helper('Magento\Catalog\Helper\Output');
       $imageBlock = $block->getLayout()->createBlock('Magento\Catalog\Block\Product\Image');
?>

<div id="daily-products" class="owl-carousel owl-theme daily-products">
<?php

    foreach($dailydeal_products as $product)
    {
            $product_data = $block->getProductById($product->getId());
            $product_url = $product_data->getProductUrl();
            $imageUrl = $this->helper('Magento\Catalog\Helper\Image')
                ->init($product_data, 'product_page_image_large')
                ->constrainOnly(FALSE)
                ->keepAspectRatio(TRUE)
                ->keepFrame(TRUE)
                ->resize(256, 329)
                ->getUrl();
               
        
?>
        <div class="daily-deal-items" class="owl-carousel owl-theme daily-deal-products" id="daily-deal-item">
            <a href='<?php echo $product_url ?>' class='daily-deal-img'>
                <img src="<?php echo $imageUrl ?>" alt="<?php echo $product_data->getName() ?>" />
            </a>   

            <a href='<?php echo $product_url ?>' class='daily-deal-name'>
                    <?php echo $product_data->getName() ?>
            </a>

           <div class="daily-deal-detail">
                <div class="daily-deal-price">
                    <?php  echo $block->getProductPrice($product_data);?>
                </div>

                <div class="daily-deal-action">
                    <div class="daily-deal-addtocart">
                            <?php if ($product_data->getTypeInstance()->hasRequiredOptions($product_data)): ?>
                                <button class="action tocart primary" data-mage-init='{"redirectUrl":{"url":"<?php /* @escapeNotVerified */ echo $block->getAddToCartUrl($product_data) ?>"}}'
                                        type="button" title="<?php /* @escapeNotVerified */ echo __('Add to Cart') ?>">
                                    <span><?php /* @escapeNotVerified */ echo __('Add to Cart') ?></span>
                                </button>
                            <?php else: ?>
                            <?php
                                $postDataHelper = $this->helper('Magento\Framework\Data\Helper\PostHelper');
                                $postData = $postDataHelper->getPostData($block->getAddToCartUrl($product_data), ['product' => $product_data->getEntityId()]);

                            ?>
                                <button class="action tocart primary" data-post='<?php /* @escapeNotVerified */ echo $postData; ?>' type="button" title="<?php /* @escapeNotVerified */ echo __('Add to Cart') ?>">
                                    <span><?php /* @escapeNotVerified */ echo __('Add to Cart') ?></span>
                                </button>
                            <?php endif; ?>
                        </div> 
                    </div> 
            </div>
        </div>      
<?php } ?>        
        
    </div>
</div>
                            </div>

<script>
    require([
        'jquery',
        'daily'
        ], function () {
            'use strict';
            jQuery("#daily-products").owlCarousel({
                autoPlay: 3000, //3000 Set AutoPlay to 3 seconds
                margin:10,
                items : 4,
                itemsDesktop : [1199,4],
                itemsDesktopSmall : [979,3],
                itemsTablet : [768,2],
                itemsMobile : [479,1],
                navigation : true,
                pagination : false
          });
    });
</script>

error in console log

require.js:1895 GET http://127.0.0.1:96/m2dev/pub/static/version1601956943/frontend/Magento/luma/en_US/daily.js net::ERR_ABORTED 404 (Not Found)
req.load @ require.js:1895
load @ require.js:1639
load @ require.js:820
fetch @ require.js:810
check @ require.js:840
enable @ require.js:1143
enable @ require.js:1511
(anonymous) @ require.js:1128
(anonymous) @ require.js:132
each @ require.js:57
enable @ require.js:1090
init @ require.js:774
(anonymous) @ require.js:1416
setTimeout (async)
req.nextTick @ require.js:1755
localRequire @ require.js:1405
window.require @ mixins.js:245
(anonymous) @ (index):1047
require.js:166 Uncaught Error: Script error for: daily
http://requirejs.org/docs/errors.html#scripterror
    at makeError (require.js:166)
    at HTMLScriptElement.onScriptError (require.js:1681)
makeError @ require.js:166
onScriptError @ require.js:1681
error (async)
req.load @ require.js:1883
load @ require.js:1639
load @ require.js:820
fetch @ require.js:810
check @ require.js:840
enable @ require.js:1143
enable @ require.js:1511
(anonymous) @ require.js:1128
(anonymous) @ require.js:132
each @ require.js:57
enable @ require.js:1090
init @ require.js:774
(anonymous) @ require.js:1416
setTimeout (async)
req.nextTick @ require.js:1755
localRequire @ require.js:1405
window.require @ mixins.js:245
(anonymous) @ (index):1047

**Unable to resolve the source file for 'frontend/Magento/luma/en_US/daily-deal-item.js'

#1 Magento\Framework\App\StaticResource->launch() called at [vendor\magento\framework\App\Bootstrap.php:261]
#2 Magento\Framework\App\Bootstrap->run(&Magento\Framework\App\StaticResource#000000006d6f5c42000000003da72a7f#) called at [pub\static.php:13]

**

Answer 1

Add owl.carousel.min in your theme web/js/owlcarousel/ and add below requirejs in app/design/frontend/your/theme/theme_name/requirejs-config.js

requirejs-config.js

var config = {
  map: {
        "*": {
            "owlslider" : "js/owlcarousel/owl.carousel.min"
        }
    },
    paths:  {
        "owlslider" : "js/owlcarousel/owl.carousel.min",
    }
};

Deploy your static content properly.

now use RequireJs function like below in your phtml.

<script>
    require([
        'jquery',
        'owlslider'
        ], function ($) {
            'use strict';
            $("#daily-products").owlCarousel({
                autoPlay: 3000, //3000 Set AutoPlay to 3 seconds
                margin:10,
                items : 4,
                itemsDesktop : [1199,4],
                itemsDesktopSmall : [979,3],
                itemsTablet : [768,2],
                itemsMobile : [479,1],
                navigation : true,
                pagination : false
          });
    });
</script>