css not loading in owl carousel magento 2

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.

  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

  1. 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

  1. 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,

  1. Go to file path pub/static/

  2. Check whether the .htaccess file is available (hidden file - Press ctrl+H to view it).

  3. If not available, based on the Magento version get the .htaccess file in the file path pub/static/and move it into your server.

  4. Finally, clear your browser and Magento cache and check again.

I hope this will help


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 enter image description here

Tags:

Javascript

Css

Owl Carousel

Magento2

Magento 2.1

Recent Posts