change product-recomendatios.liquid (shopify store) - shopify

Question

thank you for taking the time to answer my question.
I have been trying to make the recommended products section instead of being displayed as a grid to be displayed in the form of a carousel, this is what I have tried:
<link rel="stylesheet" href="{{ 'component-card.css' | asset_url }}" media="print" onload="this.media='all'">
<link rel="stylesheet" href="{{ 'component-price.css' | asset_url }}" media="print" onload="this.media='all'">
<link rel="stylesheet" href="{{ 'section-product-recommendations.css' | asset_url }}" media="print" onload="this.media='all'">
<link rel="stylesheet" href="{{ 'owl.carousel.min.css' | asset_url }}" media="print">
<noscript>{{ 'component-card.css' | asset_url | stylesheet_tag }}</noscript>
<noscript>{{ 'component-price.css' | asset_url | stylesheet_tag }}</noscript>
<noscript>{{ 'section-product-recommendations.css' | asset_url | stylesheet_tag }}</noscript>
<noscript>{{ 'owl.carousel.min.css' | asset_url | stylesheet_tag }}</noscript>
<script src="{{ 'jquery.min.js' | asset_url }}"></script>
<script src="{{ 'owl.carousel.min.js' | asset_url }}"></script>
<script>
$(document).ready(function(){
$('.owl-carousel').owlCarousel({
loop:true,
margin:10,
responsiveClass:true,0
responsive:{
0:{
items:1,
nav:true
},
600:{
items:3,
nav:false
},
1000:{
items:5,
nav:true,
loop:false
}
}
});
});
</script>
{%- style -%}
.section-{{ section.id }}-padding {
padding-top: {{ section.settings.padding_top | times: 0.75 | round: 0 }}px;
padding-bottom: {{ section.settings.padding_bottom | times: 0.75 | round: 0 }}px;
}
#media screen and (min-width: 750px) {
.section-{{ section.id }}-padding {
padding-top: {{ section.settings.padding_top }}px;
padding-bottom: {{ section.settings.padding_bottom }}px;
}
}
{%- endstyle -%}
<div class="color-{{ section.settings.color_scheme }} gradient no-js-hidden">
<product-recommendations class="product-recommendations page-width section-{{ section.id }}-padding isolate" data-url="{{ routes.product_recommendations_url }}?section_id={{ section.id }}&product_id={{ product.id }}&limit={{ section.settings.products_to_show }}">
{% if recommendations.performed and recommendations.products_count > 0 %}
<h2 class="product-recommendations__heading {{ section.settings.heading_size }}">{{ section.settings.heading | escape }}</h2>
<ul class="owl-carousel">
{% for recommendation in recommendations.products %}
<li>
{% render 'card-product',
card_product: recommendation,
media_aspect_ratio: section.settings.image_ratio,
show_secondary_image: section.settings.show_secondary_image,
show_vendor: section.settings.show_vendor,
show_rating: section.settings.show_rating
%}
</li>
{% endfor %}
</ul>
{% endif %}
</product-recommendations>
</div>
If there is a simpler way to do it, it would also help me, I am avoiding incorporating third-party apps to maintain the speed and efficiency of my website