0

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:

  1. 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']
        }
    }
};
  1. then in app\design\frontend\Magento\luma\Magento_Theme\web\css i have put custom_style.css , owl.carousel.css , owl.theme.default.css

  2. in app\design\frontend\Magento\luma\Magento_Theme\web\js i have put custom.js , owl.carousel.js

  3. 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
        });
    });
});
  1. 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">
  1. 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

2
  • did you setup:upgrade and deploy and clear cache Nov 7 '21 at 7:29
  • yes i made these commands >>php bin/magento s:up , php bin/magento s:s:d -f , php bin/magento c:f
    – ok_25
    Nov 7 '21 at 9:17
2

it was because i didn't put / to close the css &link tag worked after i did this

        <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"/>

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.