BxSlider in React.JS component

Question

I am trying to run bxSlider in a React Component. Have installed jQuery in the project imported jQuery in the App.js file. import $ from 'jquery'. Followed this for installing bxSlider via npm.

Step-1 ) Added following lines in index.html

<link rel="stylesheet" href="/node_modules/bxslider/dist/jquery.bxslider.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js">
</script>
<script src="/node_modules/bxslider/dist/jquery.bxslider.min.js"></script>

Step-2) Added following lines in App.js render()

<ul class="bxslider">
  <li><img src="/images/pic1.jpg" /></li>
  <li><img src="/images/pic2.jpg" /></li>
  <li><img src="/images/pic3.jpg" /></li>
  <li><img src="/images/pic4.jpg" /></li>
</ul>

Step-3) Added following lines in App.js componentDidMount()

$(document).ready(function(){
  $('.bxslider').bxSlider();
});

Error being displayed:

TypeError: jquery__WEBPACK_IMPORTED_MODULE_3___default(...)(...).bxSlider is not a function

Please advice what I am missing here. I have also tried importing directly then shows jquery is not defined:

import '../../../node_modules/bxslider/dist/jquery.bxslider'

Answer 1

I succeeded to make it work in my app, but struggle to show you in a code sandbox

I just added this in my index.html

    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
    <script src="https://cdn.jsdelivr.net/bxslider/4.2.12/jquery.bxslider.min.js"></script>

    <script>
      $(document).ready(function() {
        $('.slider').bxSlider()
      })
    </script>

and this code in my App.js

      <div className="slider">
        <div>I am a slide.</div>
        <div>I am another slide.</div>
      </div>

and I make it works, another solution will be to use react-slick instead