it's my first time using Magento and I have a luma theme "without sample data" and I want to put the slider in it, when I do this the images show 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.
This is what I did:
- in app\design\frontend\Magento\luma\Magento_Theme I have created the 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 app\design\frontend\Magento\luma\Magento_Theme\web\css i have put custom_style.css , owl.carousel.css , owl.theme.default.css
in app\design\frontend\Magento\luma\Magento_Theme\web\js 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 app\design\frontend\Magento\luma\Magento_Theme\layout\default_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 a static block from the 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 the custom style and js files
