CODEWITHSUNDEEP
javascripthtmlreactjsswiper.jsscript-tag
Vashon
Vashon

Reputation: 1

HTML script tag isn't recognizing Javascript in React project

I'm trying to set up Swiper in my React project so I can have an image carousel, but the script I need to use isn't recognized, like it's not even recognizing the keywords 'const' or 'new' (as you can see they're just white). code screenshot Also, I get a simple "'}' expected" error on all the colons. Am I putting this code in the wrong place? Does React not support the script tag?

I currently have the script tag inside a <main> tag. I tried putting them in a <body> tag but this didn't work either.

Here is the code:

import 'swiper/css';
import 'swiper/css/navigation';
import Swiper from 'swiper';

export const Page = () => {
    return (
        <div className="Container">
            <main className="MainContent">
                <div className="swiper">
                    <div className="swiper-wrapper">
                        <div className="swiper-slide"><img className="SlideImg" src={a}/></div>
                        <div className="swiper-slide"><img className="SlideImg" src={b}/></div>
                        <div className="swiper-slide"><img className="SlideImg" src={c}/></div>
                    </div>
                    <div className="swiper-pagination"></div>
                    <div className="swiper-button-prev"></div>
                    <div className="swiper-button-next"></div>
                </div>
                    <script type="application/javascript" src="https://cdn.jsdelivr.net/npm/swiper@11/swiper-bundle.min.js"></script>
                    <script type="application/javascript">
                        const swiper = new Swiper('.swiper', {
                            loop: true,
                            pagination: {el: '.swiper-pagination'},
                            navigation: {nextEl: '.swiper-button-next', prevEl: '.swiper-button-prev'}
                        });
                    </script>
            </main>
        </div>
    )
}

Upvotes: 0

Views: 59

Answers (1)

GifftyCode
GifftyCode

Reputation: 461

But you can't <script> tags within your JSX to initialize JavaScript libraries in react project instead, you should initialize and configure these libraries within your React component using hooks like useEffect

You can check out these resources: freecodecamp

swipper.js

React JS - React Tutorial for Beginners

Upvotes: 0

Related Questions