[Magento 2.2.4] Implementing Bootstrap 4 Carousel to Homepage | JS seems to not be functioning

[j_w2]

Hey folks,

I've been trying to get the Bootstrap 4 Carousel to work on my homepage and I've been facing an issues that seems like the JS may not be functioning. This is the way that I went about doing so.

I added:

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.0/umd/popper.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.0/js/bootstrap.min.js"></script>
  <style>
  /* Make the image fully responsive */
  .carousel-inner img {
      width: 100%;
      height: 100%;
  }
  </style>

to

Admin Panel->Content->Configuration->HTML Head->Scripts and Stylesheets

then I added this code:

<div id="demo" class="carousel slide" data-ride="carousel">

  <!-- Indicators -->
  <ul class="carousel-indicators">
    <li data-target="#demo" data-slide-to="0" class="active"></li>
    <li data-target="#demo" data-slide-to="1"></li>
    <li data-target="#demo" data-slide-to="2"></li>
  </ul>
  
  <!-- The slideshow -->
  <div class="carousel-inner">
    <div class="carousel-item active">
      <img src="https://www.w3schools.com/bootstrap4/la.jpg" alt="Los Angeles" width="1100" height="500">
    </div>
    <div class="carousel-item">
      <img src="https://www.w3schools.com/bootstrap4/chicago.jpg" alt="Chicago" width="1100" height="500">
    </div>
    <div class="carousel-item">
      <img src="https://www.w3schools.com/bootstrap4/ny.jpg" alt="New York" width="1100" height="500">
    </div>
  </div>
  
  <!-- Left and right controls -->
  <a class="carousel-control-prev" href="#demo" data-slide="prev">
    <span class="carousel-control-prev-icon"></span>
  </a>
  <a class="carousel-control-next" href="#demo" data-slide="next">
    <span class="carousel-control-next-icon"></span>
  </a>
</div>

to

Admin Panel -> Content -> Pages -> Home Page -> Content (HTML)

The banner looks right but the scrolling functionality is not working. This is what I am seeing, but it is not shuffling through the banners.

  I would really appreciate some help with this. Thank you all in advance.

[Manthan Dave]

Hi @j_w2

Well first thing - i have seen in your code you have added jQuery google cdn - which is really not needed ! 

magento 2 itself load latest version of jquery in-built - so we don't required to add jQuery in it !

Second thing as i have seen you are adding bootstrap carousal js directly - instead of that you need to add it in magento 2 way , using requirejs-config.js file !

here  i am sharing the link which gives you exact idea how to add bootstrap carousal js - https://firebearstudio.com/blog/bootstrap-js-in-magento-2.html

Your js is not functioning because right now you js file is not working 

if you wanted to check error - you can check error on browser console !

Hope it helps 

[j_w2]

Hi @Manthan Dave,

Thank you again for coming to the rescue. I just checked out the guide you sent me and did a bit of research myself. It seems that the file system may have changed since version 2.2.3. I just wanted to make sure I am messing with the right files. Its under:

/vendor/magento/theme-frontend-luma

right? Thank you in advance.

[Rakesh Jesadiya]

By default all the default core luma theme template comes from below folder,

/vendor/magento/theme-frontend-luma

All the luma theme frontend content comes from above module and if you want to override any template or CSS file from above location you need to create your custom theme.

When you work for customization on default theme you need to create your own theme by below links, Create a Custom theme in Magento 2

Now you can override your core module template to your custom theme.

[Manthan Dave · Accepted solution]

Hi @j_w2

Yes it is correct , so you are referring below path Which is correct !

/vendor/magento/theme-frontend-luma

Now as i have give link above you need to create a custom theme to override the file of magento core theme ! then you can add your bootstrap carousal js over there and do the further operations for the same ! because editing directly core files its not a standard practice !

So either create a custom theme or create a custom module for the same , it will works for you !

[j_w2 · Accepted solution]

@Manthan Dave @Rakesh Jesadiya

Thank you both for your reply. Based on what you both have suggested, I went ahead and did the custom module route. Here are the steps that I took:

Created the following files

/app/code/bootstrap/bootstrap/registration.php

<?php
\Magento\Framework\Component\ComponentRegistrar::register(
\Magento\Framework\Component\ComponentRegistrar::MODULE,
'bootstrap_bootstrap',
__DIR__
);

/app/code/bootstrap/bootstrap/etc/module.xml

<?xml version="1.0"?>
<config xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="../../../../../vendor/magento/framework/Module/etc/module.xsd">
  <module name="bootstrap_bootstrap" setup_version="0.0.1" />
</config>

/app/code/bootstrap/bootstrap/view/frontend/requirejs-config.js

var config = {
  paths:{
    "jquery.bootstrap":"https://maxcdn.bootstrapcdn.com/bootstrap/4.1.0/js/bootstrap.min.js"
  },
  shim:{
    'jquery.bootstrap':{
        'deps':['jquery']
    }
  }
};

/app/code/bootstrap/bootstrap/view/frontend/layout/default.xml

<?xml version="1.0"?>
<page xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="../../../../../vendor/magento/framework/Module/etc/module.xsd">
<referenceBlock name="head">
    <block class="Magento\Theme\Block\Html\Head\Script" name="requirejs" before="-">
        <arguments>
            <!-- RequireJs library enabled -->
            <argument name="file" xsi:type="string">requirejs/require.js</argument>
        </arguments>
    </block>
    <!-- Special block with necessary config is added on the page -->
    <block class="Magento\RequireJs\Block\Html\Head\Config" name="requirejs-config" after="requirejs"/>
</referenceBlock>
</page>

/app/code/bootstrap/bootstrap/view/frontend/layout/default_head_blocks.xml

<?xml version="1.0"?>
<page xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="../../../../../vendor/magento/framework/Module/etc/module.xsd">
<referenceBlock name="head">
    <block class="Magento\Theme\Block\Html\Head\Script" name="requirejs" before="-">
        <arguments>
            <!-- RequireJs library enabled -->
            <argument name="file" xsi:type="string">requirejs/require.js</argument>
        </arguments>
    </block>
    <!-- Special block with necessary config is added on the page -->
    <block class="Magento\RequireJs\Block\Html\Head\Config" name="requirejs-config" after="requirejs"/>
</referenceBlock>
</page>
zelris@zelris.com [~/public_html/app/code/bootstrap/bootstrap/view/frontend/layout]# cat default
default_head_blocks.xml  default.xml              
zelris@zelris.com [~/public_html/app/code/bootstrap/bootstrap/view/frontend/layout]# cat default_head_blocks.xml 
<?xml version="1.0"?>
<page xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="../../../../../vendor/magento/framework/Module/etc/module.xsd">
<head>
  <css src="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.0/js/bootstrap.min.js" src_type="url" />
</head>
</page>

and I did 

php -f bin/magento module:enable --clear-static-content [Vendor]_[ModuleName]

php -f bin/magento setup:upgrade

php bin/magento setup:static-content:deploy

I even verified that the module was enabled by doing 

php bin/magento module:status

I added the following code to my homepage

<script type="text/javascript" xml="space">// <![CDATA[
requirejs(['jquery','jquery.bootstrap'], function(jQuery, jQueryBootstrap){
jQuery('.carousel').carousel();
});
// ]]></script>
<div id="demo" class="carousel slide" data-ride="carousel">
<ul class="carousel-indicators">
<li class="active" data-target="#demo" data-slide-to="0"></li>
<li data-target="#demo" data-slide-to="1"></li>
<li data-target="#demo" data-slide-to="2"></li>
</ul>
<div class="carousel-inner">
<div class="carousel-item active"><img src="https://www.w3schools.com/bootstrap4/la.jpg" alt="Los Angeles" width="1100" height="500" />
<div class="carousel-caption">
<h3>Los Angeles</h3>
<p>We had such a great time in LA!</p>
</div>
</div>
<div class="carousel-item"><img src="https://www.w3schools.com/bootstrap4/chicago.jpg" alt="Chicago" width="1100" height="500" />
<div class="carousel-caption">
<h3>Chicago</h3>
<p>Thank you, Chicago!</p>
</div>
</div>
<div class="carousel-item"><img src="https://www.w3schools.com/bootstrap4/ny.jpg" alt="New York" width="1100" height="500" />
<div class="carousel-caption">
<h3>New York</h3>
<p>We love the Big Apple!</p>
</div>
</div>
</div>
<a class="carousel-control-prev" href="#demo" data-slide="prev"> <span class="carousel-control-prev-icon"></span> </a> <a class="carousel-control-next" href="#demo" data-slide="next"> <span class="carousel-control-next-icon"></span> </a></div>

However, this still has not solved the issue of the slider not scrolling

I have checked the browser console and got the following error:

http://website/pub/static/version1528395987/frontend/Magento/luma/en_US/jquery.bootstrap.js 404 (Not Found)

Can you guys please provide me with some more guidance? I would highly appreciate it.