Add Slider Function

src/App.js

@@ -16,6 +16,7 @@ import CreateAppointment from './routes/CreateAppointment';
 import Layout from './components/Layout';
 import NotMatch from './routes/NotMatch';
 import Logout from './routes/Logout';
+import Test from './routes/Test';
 
 function App() {
   return (
@@ -38,6 +39,7 @@ function App() {
             <Route path="logout" element={<Logout />} />
           </Route>
           <Route path="*" element={<NotMatch />} />
+          <Route path="test" element={<Test />} />
         </Routes>
       </BrowserRouter>
       <ToastContainer />

src/routes/Test.jsx

@@ -0,0 +1,43 @@
+import React, { useEffect } from 'react';
+import { useDispatch, useSelector } from 'react-redux';
+import { Link } from 'react-router-dom';
+import Slider from 'react-slick';
+import { fetchdoctors } from '../redux/doctors/doctorSlice';
+import 'slick-carousel/slick/slick.css';
+import 'slick-carousel/slick/slick-theme.css';
+
+const Test = () => {
+  const doctorsDispatch = useDispatch();
+
+  const allDoctors = useSelector((state) => state.doctors);
+  const finalDoctorsData = allDoctors.doctors;
+
+  useEffect(() => {
+    doctorsDispatch(fetchdoctors());
+  }, [doctorsDispatch]);
+
+  const settings = {
+    dots: true,
+    infinite: true,
+    speed: 500,
+    slidesToShow: 3,
+    slidesToScroll: 1,
+  };
+
+  return (
+    <>
+      <Slider {...settings}>
+        {finalDoctorsData.map((item) => (
+
+          <Link to={`/doctor/${item.id}`} className="flex border w-auto justify-center items-center h-[250px] flex-col bg-[blue]" key={item.id}>
+            <img src={item.photo_url} alt={item.name} />
+
+          </Link>
+
+        ))}
+      </Slider>
+    </>
+  );
+};
+
+export default Test;

src/styles/style.css

@@ -6,7 +6,7 @@
 }
 
 .doctor-container {
-  width: 100%;
+  width: 70%;
   height: auto;
   display: flex;
 }
@@ -56,7 +56,7 @@
 
 .doctor-box {
   height: auto;
-  width: 300px;
+  width: calc(33.33% - 10px);
   background: transparent;
   border: 1px solid #f3eeee;
   display: flex;