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,72 +39,55 @@ const Offer = ({ products }) => {
           </button>
         </div>
         {/* left */}
-        {/* no-scrollbar */}
-        <div
-          className="tabbar overflow-x-scroll scrolling-touch w-10/12 flex flex-row items-center rounded-lg bg-white"
-          onMouseDown={(e) => {
-            const slider = window.document.querySelector(".tabbar");
-            window.isDown = true;
-            window.startX = e.pageX - slider.offsetLeft;
-            window.scrollLeft = slider.scrollLeft;
-          }}
-          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
-              className="flex flex-col p-2"
-              aria-current="page"
-              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>
+        <div className="w-10/12 flex flex-row items-center rounded-lg bg-white">
+          <Swiper
+            // spaceBetween={0}
+            slidesPerView={5}
+            navigation
+            pagination={{ clickable: true }}
+            scrollbar={{ draggable: true }}
+            onSlideChange={() => console.log("slide change")}
+            onSwiper={(swiper) => console.log(swiper)}
+          >
+            {/*  */}
+            {products.map((product, index) => (
+              <SwiperSlide>
+                <div className="flex flex-col p-2">
+                  <img src={product.image} className="rounded" />
+                  <div className="flex flex-row justify-between items-center mt-4">
+                    <p className="text-xs text-white bg-red-600 px-2 py-0.5 rounded-lg mr-1">
+                      {product.discount}
+                      <span className="">%</span>
+                    </p>
+                    <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>
+                      </div>
+                    </div>
+                  </div>
+                  <p
+                    className="text-left text-xs line-through my-2 ml-3"
+                    style={{ color: "#c0c2c5" }}
+                  >
+                    {product.discountPrice}
+                  </p>
+                  <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={{
+                        width: product.rangeWidth,
+                        backgroundColor: "#ef3a4f",
+                      }}
+                    ></div>
                   </div>
                 </div>
-              </div>
-              <p
-                className="text-left text-xs line-through my-2 ml-3"
-                style={{ color: "#c0c2c5" }}
-              >
-                {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={`h-1.5 rounded duration-500`}
-                  style={{
-                    width: product.rangeWidth,
-                    backgroundColor: "#ef3a4f",
-                  }}
-                ></div>
-              </div>
-            </div>
-          ))}
+              </SwiperSlide>
+            ))}
+          </Swiper>
         </div>
       </div>
     </section>