React based application

React
1

Hi Mosh ,
Merry Christmas.
I am working on React based web application.
I am using Carousel for image slider using Script tag on index html page like below

When I navigate to different page images won’t load unless I refresh the page.
Now I am forcefully refreshing the page like this using javascript tag in index html page

Can you please give me some solution??
This is my app.

2

you need to show the code for us to help.
Just looking at the application doesn’t help that much.

There are libraries you can use for sliders in ReactJS.

3 
Hi Maverick, 
thanks for letting me know.
I have added codes here.
Can you please let me know if there is way to run the following script code inside the slider.jsx file?
I look forward to hearing from you.
Kind regards,
Pankaj
 
//using owl.carousel
inside index.html
//carousel
<script type="text/javascript">
      $(document).ready(function() {
        $(".owl-carousel").owlCarousel({
          loop: true,
          margin: 10,
          nav: true,
          autoplay: true,
          autoplayTimeout: 3000,
          autoplayHoverPause: true,
          center: true,
          // navText: [
          //   "<i class='fa fa-angle-left'></i>",
          //   "<i class='fa fa-angle-right'></i>",
          // ],
          responsive: {
            0: {
              items: 1,
            },
            600: {
              items: 1,
            },
            1000: {
              items: 3,
            },
          },
        });
      });
    </script>
    
//refreshing pages like this temporarily
    <script type="text/javascript">
      $(document).ready(function() {
        $("ul li").click(function(e) {
          location.href = $(this)
            .children("a")
            .attr("href");
          // window.location.reload(true);
        });
      });
    </script>`Preformatted text`



//slider.jsx

import React from "react";

const Projects = ({ datas }) => {
  return (
    <section id="slider" className="container-fluid mt-5 pt-5 ">
      <div className="row ">
        <h1 className="text-center pb-4">
          <b>Our Projects</b>
        </h1>

        <div className="slider position-relative">
          <div className="owl-carousel ">
            {datas.map((data) => (
              <div className="slider-card mb-3" key={data.id}>
                <div
                  key={data.id}
                  className="d-flex justify-content-center align-items-center mb-4"
                >
                  <img src={data.intSource} alt="" style={{ width: "100%" }} />
                </div>
              </div>
            ))}
          </div>
        </div>
      </div>
    </section>
  );
};

export default Projects;

```[quote="maverick, post:2, topic:17318, full:true"]
you need to show the code for us to help.
Just looking at the application doesn't help that much.

There are libraries you can use for sliders in ReactJS.
[/quote]
4

Owl Carousel uses DOM APIs to work. ReactJS is different and it abstracts the DOM APIs and helps you focus on modelling your app without worrying about the DOM APIs.

I believe that approach to use owl carousel for ReactJS is not good and I encourage to use either some library for building a slider or follow different approach (like animating the content when you click the prev / next button and updating the image with another image.)

Honestly, I haven’t used any sliders in my projects so far and this is the best answer I can provide at the moment.

However, if you insist to follow that approach, you should try the useEffect() or componentDidMount() hook to initialize the owlCarousel() object.

for class components:
---------------------

componentDidMount(){
    // create ref for the div (with the id/class).
    // use that ref to initialize the ownCarousel() and supply options (carousel).
}

for functional components;
---------------------------
step 1# import at the top.
import { useEffect } from 'react';

step 2# 
useEffect(() => {
    // steps just like above.
    // reference the div and initialize the carousel object.
});

But

I can guarantee that the carousel you are using is not built for React and probably won’t work (using above technique).

Look into this library: react-owl-carousel - npm
and try to solve the problem with it.

Hope it helps.

5

take a look this library https://swiperjs.com/

6

Hi Maverick, thank you for you suggestion.

7

Thank you. I will have a look.