I have been experiencing issues trying to add a script.js file to angular.json and use it in one component. Adding a script tag directly to my HTML file is not the ideal solution. Can someone suggest an alternative approach or point out what I may be missing to make my script work? Thank you.
Below is the script I am trying to implement:
$('.owl-carousel').owlCarousel({
loop:true,
margin:10,
dots:false,
nav:true,
mouseDrag:false,
autoplay:true,
animateOut: 'slideOutUp',
responsive:{
0:{
items:1
},
600:{
items:1
},
1000:{
items:1
}
}
});
file.html:
<header>
<div class="owl-carousel owl-theme">
<div class="item">
<img src="https://cdn.pixabay.com/photo/2017/10/24/10/30/business-2884023_960_720.jpg" alt="images not found">
<div class="cover">
<div class="container">
<div class="header-content">
<div class="line"></div>
<h2>Teimagine Digital Experience with</h2>
<h1>Start-ups and solutions</h1>
<h4>We help entrepreneurs, start-ups and enterprises shape their ideas into products</h4>
</div>
</div>
</div>
</div>
<div class="item">
<img src="https://cdn.pixabay.com/photo/2016/03/09/09/22/workplace-1245776_960_720.jpg" alt="images not found">
<div class="cover">
<div class="container">
<div class="header-content">
<div class="line animated bounceInLeft"></div>
<h2>Reimagine Digital Experience with</h2>
<h1>Intelligent solutions</h1>
<h4>We help entrepreneurs, start-ups and enterprises shape their ideas into products</h4>
</div>
</div>
</div>
</div>
</header>