-
Notifications
You must be signed in to change notification settings - Fork 0
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
- Loading branch information
1 parent
6853b5a
commit d580612
Showing
19 changed files
with
397 additions
and
119 deletions.
There are no files selected for viewing
Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.
Oops, something went wrong.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -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; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -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%; | ||
} | ||
`; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file was deleted.
Oops, something went wrong.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -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> | ||
); | ||
} |
Oops, something went wrong.