slider added

package.json

@@ -8,6 +8,7 @@
     "@testing-library/user-event": "^13.5.0",
     "antd": "^5.10.1",
     "axios": "^1.5.1",
+    "keen-slider": "^6.8.6",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
     "react-id-swiper": "^4.0.0",

src/components/Sections/Home/Clients/clients.js

@@ -0,0 +1,60 @@
+import React from "react";
+import "keen-slider/keen-slider.min.css";
+import { useKeenSlider } from "keen-slider/react";
+import { ClientsWrapper, Container, Logo } from "./styles";
+import { data } from "../../../../data";
+
+const animation = { duration: 55000, easing: (t) => t };
+const Clients = () => {
+  const [sliderRef] = useKeenSlider({
+    loop: true,
+    renderMode: "performance",
+    drag: false,
+
+    created(s) {
+      s.moveToIdx(5, true, animation);
+    },
+    updated(s) {
+      s.moveToIdx(s.track.details.abs + 5, true, animation);
+    },
+    animationEnded(s) {
+      s.moveToIdx(s.track.details.abs + 5, true, animation);
+    },
+  });
+  return (
+    <ClientsWrapper>
+      <Container>
+        <div ref={sliderRef} className="keen-slider">
+          {data.logos.map(({id,img}) => {
+            return (
+              <div key={id} className="keen-slider__slide number-slide1">
+                <Logo>
+                  <img src={img} alt="img" />
+                </Logo>
+              </div>
+            );
+          })}
+           {data.logos.map(({id,img}) => {
+            return (
+              <div key={id} className="keen-slider__slide number-slide1">
+                <Logo>
+                  <img src={img} alt="img" />
+                </Logo>
+              </div>
+            );
+          })}
+          {data.logos.map(({id,img}) => {
+            return (
+              <div key={id} className="keen-slider__slide number-slide1">
+                <Logo>
+                  <img src={img} alt="img" />
+                </Logo>
+              </div>
+            );
+          })}
+        </div>
+      </Container>
+    </ClientsWrapper>
+  );
+};
+export default Clients;

src/components/Sections/Home/Clients/styles.js

@@ -0,0 +1,33 @@
+import styled from "styled-components";
+
+export const ClientsWrapper = styled.div`
+width: 100%;
+position: relative;
+`;
+export const Container = styled.div`
+width: 70%;
+margin: auto;
+height: 100%;
+overflow: hidden;
+overflow-x: hidden !important;
+
+margin: auto;
+display: flex;
+.keen-slider{
+    margin: auto;
+}
+.number-slide1{
+    min-width: 400px !important;
+    padding: 60px 0;
+    display: flex;
+    justify-content: center;
+}
+`;
+export const Logo = styled.div`
+height: 70px;
+width: fit-content;
+img{
+    height: 100%;
+    width: 100%;
+}
+`;

src/components/Sections/Home/OurService/style.js

@@ -17,6 +17,9 @@ export const Container = styled.div`
   margin: auto;
   display: flex;
   flex-direction: column;
+  @media screen and (max-width:1450px) {
+    width: 90%;
+  }
   @media screen and (max-width: 800px) {
     width: 90%;
   }

src/components/Silder/index.js

@@ -1,79 +1,159 @@
-import React, { Component, Fragment, useState } from "react";
-import Slide from "./Slide";
-import { Pagination, Button, Flex } from "./style";
-import img01 from "../../assets/new/uzum-og.png"
-import img02 from "../../assets/new/wb.png"
-import img03 from "../../assets/new/amazon-png-logo-vector-6701s.png"
-
-
+import React, { Fragment, useState } from "react";
+import {
+  CardWrapper,
+  Card,
+  LeftContent,
+  ButtonClick,
+  SlideWrapper,
+  DotWrapper,
+} from "./style";
+import PopUp from "../popUp";
+import { data } from "../../data";
+import { useKeenSlider } from "keen-slider/react";
+import "keen-slider/keen-slider.min.css";
 const Slider = () => {
-  const [state,setState] = useState({
-    slide: [
-      {
-        id: "1",
-        title:"wILDBERRIES",
-        image:img02,
-        text: "At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium voluptatum deleniti atque corrupti quos dolores et quas molestias excepturi sint occaecati cupiditate non provident, similique sunt in culpa qui officia deserunt mollitia animi, id est laborum et dolorum fuga"
+  const [popUp, setPopUp] = useState(false);
+  const [currentSlide, setCurrentSlide] = useState(0);
+  const [loaded, setLoaded] = useState(false);
+  const [sliderRef, instanceRef] = useKeenSlider(
+    {
+      loop: Infinity,
+      initial: 0,
+      slideChanged(slider) {
+        setCurrentSlide(slider.track.details.rel);
       },
-
-      {
-        id: "2",
-        title:"AMAZON",
-        image:img03,
-        text: "On the other hand, we denounce with righteous indignation and dislike men who are so beguiled and demoralized by the charms of pleasure of the moment, so blinded by desire, that they cannot foresee the pain and trouble that are bound to ensue; and equal blame belongs to those who fail in their duty through weakness of will, which is the same as saying through shrinking from toil and pain. These cases are perfectly simple and easy to distinguish"
+      created() {
+        setLoaded(true);
       },
-      {
-        id: "3",
-        title:"UZUM MARKET",
-        image:img01,
-        text: "But I must explain to you how all this mistaken idea of denouncing pleasure and praising pain was born and I will give you a complete account of the system, and expound the actual teachin"
+      dragSpeed: 3,
+    },
+    [
+      (slider) => {
+        let timeout;
+        let mouseOver = false;
+        function clearNextTimeout() {
+          clearTimeout(timeout);
+        }
+        function nextTimeout() {
+          clearTimeout(timeout);
+          if (mouseOver) return;
+          timeout = setTimeout(() => {
+            slider.next();
+          }, 3000);
+        }
+        slider.on("created", () => {
+          slider.container.addEventListener("mouseover", () => {
+            mouseOver = true;
+            clearNextTimeout();
+          });
+          slider.container.addEventListener("mouseout", () => {
+            mouseOver = false;
+            nextTimeout();
+          });
+          nextTimeout();
+        });
+        slider.on("dragStarted", clearNextTimeout);
+        slider.on("animationEnded", nextTimeout);
+        slider.on("updated", nextTimeout);
       },
-    ],
-    currentIndex: 0
-  })
+    ]
+  );
 
- const  previousState = () => {
-    const { slide, currentIndex } = state;
-    if (currentIndex === 0) {
-      return setState({ currentIndex: slide.length - 1 });
-    }
-    setState({ currentIndex: currentIndex - 1 });
-  };
+  return (
+    <SlideWrapper>
+      {popUp ? <PopUp popUp={popUp} setPopUp={setPopUp} /> : ""}
 
- const  nextState = () => {
-    const { currentIndex, slide } = state;
-    if (currentIndex === slide.length - 1) {
-      return setState({ currentIndex: 0 });
-    }
-    setState({ currentIndex: currentIndex + 1 });
-  };
+      <div ref={sliderRef} className="keen-slider">
+        {data.clients?.map(({ id, title, image, text }) => {
+          return (
+            <div key={id}>
+              <div className="keen-slider__slide ">
+                <CardWrapper>
+                  <Card>
+                    <div className="card-img">
+                      <img src={image} alt="uzum img" />
+                    </div>
+                  </Card>
 
- const  indexSlide = info => {
-    const { id } = info;
+                  <LeftContent>
+                    <p className="title-content">{title}</p>
+                    <p className="text-content">{text}</p>
+                    <ButtonClick onClick={() => setPopUp(true)}>
+                      Оставить заявку
+                    </ButtonClick>
+                  </LeftContent>
+                </CardWrapper>
+              </div>
+            </div>
+          );
+        })}
+      </div>
 
-    setState({ currentIndex: id - 1 });
-  };
+      <DotWrapper>
+        <div className="slide-arrow">
+        {loaded && instanceRef.current && (
+          <>
+            <Arrow
+              left
+              onClick={(e) =>
+                e.stopPropagation() || instanceRef.current?.prev()
+              }
+              disabled={currentSlide === 0}
+            />
 
-    const { slide, currentIndex } = state;
+            <Arrow
+              onClick={(e) =>
+                e.stopPropagation() || instanceRef.current?.next()
+              }
+              disabled={
+                currentSlide ===
+                instanceRef.current.track.details.slides.length - 1
+              }
+            />
+          </>
+        )}
 
-    return (
-      <Fragment>
-        <Slide key={slide[currentIndex].id} info={slide[currentIndex]} />
-        <Flex background>
-          {console.log(slide)}
-          {slide?.map(v => {
-            return (
-              <Pagination
-                key={v.id}
-                color={true}
-                onClick={() => indexSlide(v)}
-              />
-            );
-          })}
-
-        </Flex>
-      </Fragment>
-    );
-}
+        </div>
+        {loaded && instanceRef.current && (
+          <div className="dots">
+            {[
+              ...Array(instanceRef.current.track.details.slides.length).keys(),
+            ].map((idx) => {
+              return (
+                <button
+                  key={idx}
+                  onClick={() => {
+                    instanceRef.current?.moveToIdx(idx);
+                  }}
+                  className={"dot" + (currentSlide === idx ? " active" : "")}
+                ></button>
+              );
+            })}
+          </div>
+        )}
+      </DotWrapper>
+    </SlideWrapper>
+  );
+};
 
 export default Slider;
+function Arrow(props) {
+  const disabled = props.disabled ? " arrow--disabled" : "";
+  return (
+    <svg
+      onClick={props.onClick}
+      className={`arrow ${
+        props.left ? "arrow--left" : "arrow--right"
+      } ${disabled}`}
+      xmlns="http://www.w3.org/2000/svg"
+      viewBox="0 0 24 24"
+    >
+      {props.left && (
+        <path d="M16.67 0l2.83 2.829-9.339 9.175 9.339 9.167-2.83 2.829-12.17-11.996z" />
+      )}
+      {!props.left && (
+        <path d="M5 3l3.057-3 11.943 12-11.943 12-3.057-3 9-9z" />
+      )}
+    </svg>
+  );
+}