Hi @amirkhan56e983,
Greetings of the day!
You are doing minor mistakes. Kindly check the following steps.
1.Copy owl.carousel.js into app/design/frontend/vendorname/themename/Magento_Theme/web/js
(create a directory if not already there)
2. The other CSS solution could work just as well, or you could copy owl.carousel.css and owl.theme.default.css into the. Less file for the theme, and adjust the styling to your preferences.
3. Copy the following code into app/design/frontend/vendorname/themename/Magento_Theme/require-config.js
(create file/directory if necessary, this code appears to solve the "cannot read property of FN" issue.)
var config = {
paths: {
'owlcarousel': "Magento_Theme/js/owl.carousel"
},
shim: {
'owlcarousel': {
deps: ['jquery']
}
}
};4. In the page content place the following code to define the carousel images
<div class="owl-carousel owl-theme">
<div><img src="{blah blah}"/></div>
<div><img src="{blah blah}"/></div>
<div><img src="{blah blah}"/></div>
<div><img src="{blah blah}"/></div>
</div>
5. After the above code, add the following code for the carousel (this appears to solve the "$ is not a function" error )
<script>
require([
'jquery',
'owlcarousel'
], function () {
'use strict';
jQuery.noConflict();
jQuery(".owl-carousel").owlCarousel({
nav: true, // Show next and prev buttons
navText:["<",">"], //show prev next
loop: true,
autoplay: true, //Set AutoPlay
autoplayHoverPause: true, //stop when mouse on carousel
items : 1
});
});
</script>6. Deploy the static content, e.g. php magento setup:static-content:deploy (note there are various methods for doing this which involve the manual clearing of cache folders and a php magento cache:clean command).
7. Check it out on the website.
Hope this will help you to solve your problem.
If not, feel free to contact me.
Worked?
Click KUDOS and accept as a solution.
Thank you!
