swiper slider added

package.json

@@ -24,6 +24,7 @@
     "redux": "^4.1.2",
     "sass": "^1.45.0",
     "sweetalert2": "^11.3.4",
+    "swiper": "^8.0.6",
     "tw-elements": "^1.0.0-alpha8",
     "use-draggable-scroll": "^0.1.0",
     "web-vitals": "^2.1.2"

src/components/Digikala/Offer.js

@@ -1,4 +1,10 @@
 import React from "react";
+import { Swiper, SwiperSlide } from "swiper/react";
+// Import Swiper styles
+import "swiper/css";
+import "swiper/css/navigation";
+import "swiper/css/pagination";
+
 import "./index";
 
 import leftArrow from "./white-left-arrow.svg";
@@ -33,52 +39,33 @@ const Offer = ({ products }) => {
           </button>
         </div>
         {/* left */}
-        {/* no-scrollbar */}
+        <div className="w-10/12 flex flex-row items-center rounded-lg bg-white">
-        <div
+          <Swiper
-          className="tabbar overflow-x-scroll scrolling-touch w-10/12 flex flex-row items-center rounded-lg bg-white"
+            // spaceBetween={0}
-          onMouseDown={(e) => {
+            slidesPerView={5}
-            const slider = window.document.querySelector(".tabbar");
+            navigation
-            window.isDown = true;
+            pagination={{ clickable: true }}
-            window.startX = e.pageX - slider.offsetLeft;
+            scrollbar={{ draggable: true }}
-            window.scrollLeft = slider.scrollLeft;
+            onSlideChange={() => console.log("slide change")}
-          }}
+            onSwiper={(swiper) => console.log(swiper)}
-          onMouseLeave={(e) => {
-            window.isDown = false;
-          }}
-          onMouseUp={(e) => {
-            window.isDown = false;
-          }}
-          onMouseMove={(e) => {
-            const slider = window.document.querySelector(".tabbar");
-            if (!window.isDown) return;
-            e.preventDefault();
-            const x = e.pageX - slider.offsetLeft;
-            const walk = (x - window.startX) * 1;
-            slider.scrollLeft = window.scrollLeft - walk;
-          }}
           >
+            {/*  */}
             {products.map((product, index) => (
-            <div
+              <SwiperSlide>
-              className="flex flex-col p-2"
+                <div className="flex flex-col p-2">
-              aria-current="page"
+                  <img src={product.image} className="rounded" />
-              onClick={(e) => {
-                if (window.isDown) return e.preventDefault();
-                ///do here
-              }}
-            >
-              <img src={product.image} className="rounded w-40" />
                   <div className="flex flex-row justify-between items-center mt-4">
-                {/* right */}
                     <p className="text-xs text-white bg-red-600 px-2 py-0.5 rounded-lg mr-1">
                       {product.discount}
                       <span className="">%</span>
                     </p>
-                {/* left */}
                     <div className="flex flex-row items-center">
                       <p className="text-sm ml-1">{product.price}</p>
                       <div className="relative">
                         <span className="text-xs">توما</span>
-                    <span className="text-xs absolute left-0.5 -top-2">ن</span>
+                        <span className="text-xs absolute left-0.5 -top-2">
+                          ن
+                        </span>
                       </div>
                     </div>
                   </div>
@@ -88,7 +75,7 @@ const Offer = ({ products }) => {
                   >
                     {product.discountPrice}
                   </p>
-              <div className="bg-gray-200 h-1.5 mx-auto rounded mt-2 flex flex-row-reverse w-10/12">
+                  <div className="bg-gray-200 h-1.5 mx-auto rounded mt-2 flex flex-row-reverse w-11/12">
                     <div
                       className={`h-1.5 rounded duration-500`}
                       style={{
@@ -98,7 +85,9 @@ const Offer = ({ products }) => {
                     ></div>
                   </div>
                 </div>
+              </SwiperSlide>
             ))}
+          </Swiper>
         </div>
       </div>
     </section>