React based application

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.

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.

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,
//using owl.carousel
inside index.html
<script type="text/javascript">
      $(document).ready(function() {
          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,
//refreshing pages like this temporarily
    <script type="text/javascript">
      $(document).ready(function() {
        $("ul li").click(function(e) {
          location.href = $(this)
          // window.location.reload(true);
    </script>`Preformatted text`


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>

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

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.

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:

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


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.

take a look this library

Hi Maverick, thank you for you suggestion.

Thank you. I will have a look.