css not loading in owl carousel magento 2

Question

hello guys i am trying to use owl carousel in phtml file in console it shows error regarding css Following is my default_head_block.xml file which is a layout file

<?xml version="1.0"?>
<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"/>

    <css src="web/css/owl.carousel.css" /> 
     <css src="web/css/owl.theme.css" /> 


</head>
</page>

Following is my default.xml file through i am calling phtml file

<?xml version="1.0"?>
<page xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="../../../../../../../lib/internal/Magento/Framework/View/Layout/etc/page_configuration.xsd">
<body>
    <referenceContainer name="content">
        <block class="Magento\Framework\View\Element\Template" name="slider_test" template="Magento_Theme::slider.phtml" after="-" />
    </referenceContainer>
    <referenceBlock name="logo">
        <arguments>
            <argument name="logo_img_width" xsi:type="number">148</argument>
            <argument name="logo_img_height" xsi:type="number">43</argument>
        </arguments>
    </referenceBlock>
</body>
</page>

Following is my slider.phtml file in which i am calling owl carousel

 <div class="owl-carousel" id="car">
 <div> Your Content </div>
 <div> Your Content </div>
 <div> Your Content </div>
 <div> Your Content </div>
 <div> Your Content </div>
 <div> Your Content </div>
 <div> Your Content </div>
 </div>

<script type="text/javascript">
require([
    'jquery',
    'owlcarouselslider'
    ], function ($) {
          $("#car").owlCarousel();
});
</script>

Following is output

following is error which showing in console

check htaccess file is there in pub/static then rm -rf pub/static/frontend and deploy to make things working for you — Prathap Gunasekaran, Mar 8, 2019 at 6:56

Muhammad Hasham · Accepted Answer · 2019-03-08 07:02:20Z

This error usually shows up when static content is not correctly generated by Magento. It can show also show up when using a vanilla Magento installation and is not necessarily related to a theme or installed extension.

In most cases, this error disappears once you setup the correct permissions and generate the static content for your store.

Solution 1.

Correctly set Magento permissions by following the instructions under Basic Permissions Setup below:

https://support.weltpixel.com/hc/en-us/articles/115001868933-How-to-set-Magento-2-permissions-and-avoid-installation-errors

Go to Developer mode and then to Production mode. This action performs a cache cleanup, compiles your code and generates the static content.

https://support.weltpixel.com/hc/en-us/articles/115004436368-How-to-set-Magento-2-Developer-and-Production-Mode-via-SSH

Generate static content for each locale if you are using a locale different to en_US (nl_NL, en_GB)

example: php bin/magento setup:static-content:deploy -f en_GB

If this doesn't help, there may be an additional issue related to the pub/static folders caused by the missing .htaccess file.

Solution 2.

To fix this issue,

Go to file path pub/static/
Check whether the .htaccess file is available (hidden file - Press ctrl+H to view it).
If not available, based on the Magento version get the .htaccess file in the file path pub/static/and move it into your server.
Finally, clear your browser and Magento cache and check again.

I hope this will help

@HarshJayswal have you checklist all the things which I mentioned? — Muhammad Hasham, Mar 8, 2019 at 8:59
@HarshJayswal brother your css error solved then what is not working? if my answer helps you in solving your errors then please mark my answer correct and upvote my answer so it helps other as well. keep coding :) thanks :) — Muhammad Hasham, Mar 8, 2019 at 9:26
var config = { paths: { 'owlcarouselslider': "js/owlcarousel", 'banner':'js/banner' }, shim: { 'owlcarouselslider': { deps: ['jquery'] } } }; This is my requirejs-config.js file i have declared banner.js file here but its not loading help me out to load this file — Harsh Jayswal, Mar 8, 2019 at 9:29

Harsh Jayswal · Accepted Answer · 2019-03-08 11:36:48Z

Updated Files

My All css files are located in app/code/design/frontend/CustomTheme/ThemeName/web/css/cssfilename.css

All js files are located in

app/code/design/frontend/CustomTheme/ThemeName/web/js/jsfilename.js

requirejs-config.js file

var config = {
paths: {            
        'owlcarouselslider': "js/owl.carousel.min",
        'banner':"js/banner"
       },   
shim: {
            'owlcarouselslider':
            {
                deps: ['jquery']
            },
            'banner':
            {
                deps:['jquery']
            }

      }
 };

app/code/design/frontend/CustomTheme/ThemeName/Magento_Theme/layout/default_head_blocks.xml file

<?xml version="1.0"?>
<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"/>

    <css src="css/owl.carousel.css" />
    <css src="css/main.css" /> 
    <css src="css/owl.theme.css" /> 
    <css src="css/banner.css" /> 

</head>
</page>

app/code/design/frontend/CustomTheme/ThemeName/Magento_Theme/layout/default.xml file

<?xml version="1.0"?>
<page xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="../../../../../../../lib/internal/Magento/Framework/View/Layout/etc/page_configuration.xsd">

<body>
    <referenceContainer name="content">
        <block class="Magento\Framework\View\Element\Template" name="slider_test" template="Magento_Theme::slider.phtml" after="-" />
    </referenceContainer>
    <referenceBlock name="logo">
        <arguments>
            <argument name="logo_img_width" xsi:type="number">148</argument>
            <argument name="logo_img_height" xsi:type="number">43</argument>
        </arguments>
    </referenceBlock>
</body>
</page>

app/code/design/frontend/CustomTheme/ThemeName/Magento_Theme/templates/slider.phtml file

<div class="owl-carousel owl-theme">
<div class="item"><h4>1</h4></div>
<div class="item"><h4>2</h4></div>
<div class="item"><h4>3</h4></div>
<div class="item"><h4>4</h4></div>
<div class="item"><h4>5</h4></div>
<div class="item"><h4>6</h4></div>
<div class="item"><h4>7</h4></div>
<div class="item"><h4>8</h4></div>
<div class="item"><h4>9</h4></div>
<div class="item"><h4>10</h4></div>
<div class="item"><h4>11</h4></div>
<div class="item"><h4>12</h4></div>

</div>

<script>

require([
    'jquery',
    'owlcarouselslider','banner'
    ], function ($) {

  var owl = $('.owl-carousel');
  owl.owlCarousel({
items:4,
loop:true,
margin:10,
autoplay:true,
autoplayTimeout:1000,
autoplayHoverPause:true
  });

});

banner.js file

require(['jquery'],function($){

$(document).ready(function(){
var owl = $('.owl-carousel');
owl.owlCarousel({
items:4,
loop:true,
margin:10,
autoplay:true,
autoplayTimeout:1000,
autoplayHoverPause:true
});

});

});

Following is output

Shoaib Munir · Accepted Answer · 2019-03-08 07:03:17Z

1

because of your localhost/magento as base URL it is not adding your CSS properly.

You need to set a local domain

in your vhost file of your xampp or wampp

add following: Note: Change directory according to yours

<VirtualHost *:80>
    ServerAdmin [email protected]
    DocumentRoot "C:/xampp/htdocs/magento"
    ServerName magento.local
    ErrorLog "logs/dummy-host2.example.com-error.log"
    CustomLog "logs/dummy-host2.example.com-access.log" common
</VirtualHost>

In windows host file (If you are using windows) add following line:

127.0.0.1       magento.local

Restart apache and change your base URL of magento. This should work

The main point is, you need to change your URL to some URL looks like domain (e.g, magento.local)

answered Mar 8, 2019 at 7:03

Shoaib Munir

9,28410 gold badges46 silver badges104 bronze badges

127.0.0.1/magento i am alredy using this url
– Harsh Jayswal
Mar 8, 2019 at 7:16
not this. you need to use base url like some domain URL. like: magento.local or project.local
– Shoaib Munir
Mar 8, 2019 at 7:30

Add a comment |

Stack Exchange Network

css not loading in owl carousel magento 2

3 Answers 3

Your Answer

Not the answer you're looking for? Browse other questions tagged
magento2
magento-2.1
javascript
css
owl-carousel
or ask your own question.

Hot Network Questions

css not loading in owl carousel magento 2

3 Answers 3

Your Answer

Sign up or log in

Post as a guest

Not the answer you're looking for? Browse other questions tagged magento2magento-2.1javascriptcssowl-carousel or ask your own question.

Related

Hot Network Questions

Not the answer you're looking for? Browse other questions tagged
magento2
magento-2.1
javascript
css
owl-carousel
or ask your own question.