swiper loading but not properly, test file added

Author: SethCram

package-lock.json

@@ -3,6 +3,6 @@
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
     "react-icons": "^4.4.0",
-    "swiper": "^8.4.3"
+    "swiper": "^8.4.4"
   }
 }

package.json

@@ -9,7 +9,8 @@
     "@testing-library/user-event": "^13.5.0",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
-    "react-scripts": "5.0.1",
+    "react-scripts": "^5.0.1",
+    "swiper": "^8.4.4",
     "web-vitals": "^2.1.4"
   },
   "scripts": {

portfolio_website/package-lock.json

@@ -6,23 +6,25 @@ import About from './components/about/About.jsx'
 import Experience from './components/experience/Experience.jsx'
 import Services from './components/services/Services.jsx'
 import Portfolio from './components/portfolio/Portfolio.jsx'
-import Work_History from './components/work_history/Work_History.jsx'
+import WorkHistory from './components/workhistory/WorkHistory.jsx'
 import Contact from './components/contact/Contact.jsx'
 import Footer from './components/footer/Footer.jsx'
+import Test from './components/workhistory/Test.jsx'
 
 //all self closing tags
 const app = () => {
   return (
-    <>
+    <div id='app'>
       <Header />
       <Nav />
       <About />
       <Experience />
       <Portfolio />
-      <Work_History />
+      <WorkHistory />
       <Contact />
       <Footer />
-    </>
+      <Test />
+    </div>
   )
 }
 

portfolio_website/package.json

@@ -0,0 +1,23 @@
+// Import Swiper React components
+import { Swiper, SwiperSlide } from 'swiper/react';
+
+// Import Swiper styles
+import 'swiper/css';
+
+const Test = () => {
+    return (
+        <Swiper
+            spaceBetween={50}
+            slidesPerView={3}
+            onSlideChange={() => console.log('slide change')}
+            onSwiper={(swiper) => console.log(swiper)}
+        >
+      <SwiperSlide>Slide 1</SwiperSlide>
+      <SwiperSlide>Slide 2</SwiperSlide>
+      <SwiperSlide>Slide 3</SwiperSlide>
+      <SwiperSlide>Slide 4</SwiperSlide>
+    </Swiper>
+    );
+};
+
+export default Test

portfolio_website/src/App.jsx

@@ -6,6 +6,7 @@ import Uidaho from '../../assets/uidaho.jpg'
 // import Swiper core and required modules
 import { Pagination } from 'swiper';
 
+// Import Swiper React components
 import { Swiper, SwiperSlide } from 'swiper/react';
 
 // Import Swiper styles

portfolio_website/src/components/workhistory/Test.jsx

@@ -2,6 +2,7 @@ import './index.css'
 import App from './App'
 
 import { createRoot } from 'react-dom/client';
+
 const container = document.querySelector("#root");
 const root = createRoot(container); // createRoot(container!) if you use TypeScript
 root.render(<App tab="home" />);