forked from crowetic/commerce
add keen slider and apply to product slider
This commit is contained in:
parent
b3fec00939
commit
791c4c2fcc
@ -13,6 +13,8 @@
|
||||
--text-secondary: white;
|
||||
|
||||
--hover: rgba(0, 0, 0, 0.075);
|
||||
--hover-1: rgba(0, 0, 0, 0.15);
|
||||
--hover-2: rgba(0, 0, 0, 0.25);
|
||||
|
||||
--cyan: #50e3c2;
|
||||
--green: #37b679;
|
||||
@ -40,6 +42,8 @@
|
||||
--secondary: white;
|
||||
--secondary-2: #f1f3f5;
|
||||
--hover: rgba(255, 255, 255, 0.075);
|
||||
--hover-1: rgba(255, 255, 255, 0.15);
|
||||
--hover-2: rgba(255, 255, 255, 0.25);
|
||||
--selection: var(--purple);
|
||||
|
||||
--text-base: white;
|
||||
|
@ -1,22 +1,48 @@
|
||||
.root {
|
||||
@apply relative w-full h-full;
|
||||
@apply relative w-full h-full relative;
|
||||
overflow-y: hidden;
|
||||
}
|
||||
|
||||
& > div {
|
||||
overflow: visible !important;
|
||||
.leftControl,
|
||||
.rightControl {
|
||||
@apply text-white absolute top-1/2 -translate-x-1/2 z-20 w-16 h-16 flex items-center justify-center bg-hover-1 rounded focus:outline-none focus:shadow-outline-blue hover:bg-hover-2;
|
||||
}
|
||||
|
||||
.leftControl {
|
||||
@apply left-6;
|
||||
}
|
||||
|
||||
.rightControl {
|
||||
@apply right-6 rotate-180 transform;
|
||||
}
|
||||
|
||||
.control {
|
||||
@apply opacity-0 transition-all duration-150;
|
||||
}
|
||||
|
||||
.root:hover .control {
|
||||
@apply opacity-100;
|
||||
}
|
||||
|
||||
.positionIndicatorsContainer {
|
||||
@apply hidden;
|
||||
@screen sm {
|
||||
@apply block absolute bottom-6 left-1/2 -translate-x-1/2 transform;
|
||||
}
|
||||
}
|
||||
|
||||
.rootPanel {
|
||||
@apply absolute flex flex-row inset-0 z-20 m-20;
|
||||
.positionIndicator {
|
||||
@apply bg-hover-1 hover:bg-hover-2 transition-colors w-3 h-3 rounded-full mx-2 focus:outline-none;
|
||||
}
|
||||
|
||||
.leftPanel {
|
||||
@apply flex-1;
|
||||
cursor: url('/cursor-left.png'), auto;
|
||||
}
|
||||
|
||||
.rightPanel {
|
||||
@apply flex-1;
|
||||
cursor: url('/cursor-right.png'), auto;
|
||||
.positionIndicatorActive {
|
||||
@apply bg-white hover:bg-white;
|
||||
}
|
||||
/* sx={{
|
||||
width: '10px',
|
||||
height: '10px',
|
||||
bg: currentSlide === idx ? 'primary' : 'gray',
|
||||
borderRadius: 'full',
|
||||
mx: 2,
|
||||
'&:focus': { outline: 'none' },
|
||||
}} */
|
||||
|
@ -1,36 +1,61 @@
|
||||
import React, { FC, useState } from 'react'
|
||||
import SwipeableViews from 'react-swipeable-views'
|
||||
import { ArrowLeft } from '@components/icon'
|
||||
import { useKeenSlider } from 'keen-slider/react'
|
||||
import React, { Children, FC, isValidElement, useState } from 'react'
|
||||
import cn from 'classnames'
|
||||
|
||||
import s from './ProductSlider.module.css'
|
||||
interface Props {
|
||||
children?: any
|
||||
}
|
||||
|
||||
const ProductSlider: FC<Props> = ({ children }) => {
|
||||
const [idx, setIdx] = useState(0)
|
||||
const count = React.Children.count(children)
|
||||
|
||||
const goBack = () => {
|
||||
idx !== 0 ? setIdx(idx - 1) : setIdx(count - 1)
|
||||
}
|
||||
|
||||
const goNext = () => {
|
||||
idx + 1 === count ? setIdx(0) : setIdx(idx + 1)
|
||||
}
|
||||
const ProductSlider: FC = ({ children }) => {
|
||||
const [currentSlide, setCurrentSlide] = useState(0)
|
||||
const [ref, slider] = useKeenSlider<HTMLDivElement>({
|
||||
slideChanged(s) {
|
||||
setCurrentSlide(s.details().relativeSlide)
|
||||
},
|
||||
loop: true,
|
||||
})
|
||||
|
||||
return (
|
||||
<div className={s.root}>
|
||||
<SwipeableViews
|
||||
index={idx}
|
||||
onChangeIndex={setIdx}
|
||||
containerStyle={{ overflow: 'visible' }}
|
||||
slideStyle={{ overflow: 'visible' }}
|
||||
>
|
||||
{children}
|
||||
</SwipeableViews>
|
||||
<div className={s.rootPanel}>
|
||||
<div className={s.leftPanel} onClick={goBack}></div>
|
||||
<div className={s.rightPanel} onClick={goNext}></div>
|
||||
<button className={cn(s.leftControl, s.control)} onClick={slider?.prev}>
|
||||
<ArrowLeft />
|
||||
</button>
|
||||
<button className={cn(s.rightControl, s.control)} onClick={slider?.next}>
|
||||
<ArrowLeft />
|
||||
</button>
|
||||
<div ref={ref} className="keen-slider h-full">
|
||||
{Children.map(children, (child) => {
|
||||
// Add the keen-slider__slide className to children
|
||||
if (isValidElement(child)) {
|
||||
return {
|
||||
...child,
|
||||
props: {
|
||||
...child.props,
|
||||
className: `${
|
||||
child.props.className ? `${child.props.className} ` : ''
|
||||
}keen-slider__slide`,
|
||||
},
|
||||
}
|
||||
}
|
||||
return child
|
||||
})}
|
||||
</div>
|
||||
{slider && (
|
||||
<div className={cn(s.positionIndicatorsContainer)}>
|
||||
{[...Array(slider.details().size).keys()].map((idx) => {
|
||||
return (
|
||||
<button
|
||||
key={idx}
|
||||
className={cn(s.positionIndicator, {
|
||||
[s.positionIndicatorActive]: currentSlide === idx,
|
||||
})}
|
||||
onClick={() => {
|
||||
slider.moveToSlideRelative(idx)
|
||||
}}
|
||||
/>
|
||||
)
|
||||
})}
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
@ -2,7 +2,7 @@
|
||||
@apply relative grid items-start gap-8 grid-cols-1;
|
||||
|
||||
@screen lg {
|
||||
@apply grid-cols-12 pt-10;
|
||||
@apply grid-cols-12;
|
||||
}
|
||||
}
|
||||
|
||||
@ -24,17 +24,11 @@
|
||||
}
|
||||
|
||||
.squareBg {
|
||||
@apply absolute inset-0 bg-violet z-0;
|
||||
max-height: 250px;
|
||||
|
||||
@screen md {
|
||||
@apply inset-20;
|
||||
max-height: 500px;
|
||||
}
|
||||
@apply absolute inset-0 bg-violet z-0 h-full;
|
||||
}
|
||||
|
||||
.nameBox {
|
||||
@apply absolute top-6 left-0 z-10;
|
||||
@apply absolute top-6 left-6 z-20;
|
||||
|
||||
& .name {
|
||||
@apply px-6 py-2 bg-primary text-primary font-bold;
|
||||
@ -49,7 +43,7 @@
|
||||
@screen md {
|
||||
& .name,
|
||||
& .price {
|
||||
@apply bg-violet text-white;
|
||||
@apply bg-hover-1 text-white;
|
||||
}
|
||||
}
|
||||
}
|
||||
@ -67,22 +61,7 @@
|
||||
}
|
||||
|
||||
.img {
|
||||
@apply w-full h-full object-cover;
|
||||
|
||||
@screen md {
|
||||
height: 100%;
|
||||
margin-top: -2.75rem;
|
||||
}
|
||||
|
||||
@screen lg {
|
||||
height: 150%;
|
||||
margin-top: -10%;
|
||||
}
|
||||
|
||||
@screen xl {
|
||||
height: 170%;
|
||||
margin-top: -19%;
|
||||
}
|
||||
@apply w-full h-auto max-h-full object-cover;
|
||||
}
|
||||
|
||||
.button {
|
||||
|
@ -28,6 +28,7 @@
|
||||
"classnames": "^2.2.6",
|
||||
"cookie": "^0.4.1",
|
||||
"js-cookie": "^2.2.1",
|
||||
"keen-slider": "^5.2.4",
|
||||
"lodash.debounce": "^4.0.8",
|
||||
"lodash.random": "^3.2.0",
|
||||
"next": "^9.5.6-canary.9",
|
||||
|
@ -1,6 +1,7 @@
|
||||
import '@assets/global.css'
|
||||
import '@assets/tailwind.css'
|
||||
import '@assets/utils.css'
|
||||
import 'keen-slider/keen-slider.min.css'
|
||||
|
||||
// To be removed
|
||||
import 'animate.css'
|
||||
|
@ -15,6 +15,8 @@ module.exports = {
|
||||
secondary: 'var(--secondary)',
|
||||
'secondary-2': 'var(--secondary-2)',
|
||||
hover: 'var(--hover)',
|
||||
'hover-1': 'var(--hover-1)',
|
||||
'hover-2': 'var(--hover-2)',
|
||||
'accents-0': 'var(--accents-0)',
|
||||
'accents-1': 'var(--accents-1)',
|
||||
'accents-2': 'var(--accents-2)',
|
||||
|
@ -5399,6 +5399,11 @@ jws@^3.2.2:
|
||||
jwa "^1.4.1"
|
||||
safe-buffer "^5.0.1"
|
||||
|
||||
keen-slider@^5.2.4:
|
||||
version "5.2.4"
|
||||
resolved "https://registry.yarnpkg.com/keen-slider/-/keen-slider-5.2.4.tgz#9e2a889c63c02a651c81caa438f3691e9a3bc0a8"
|
||||
integrity sha512-z39afyASW63B+1FzWGzBkvXAnzJl3gAD8M+32TmhJAPJqjckCaKYm7YBjpSba04AoVMQw8y9U1LVcUucVVIQkQ==
|
||||
|
||||
keycode@^2.1.7:
|
||||
version "2.2.0"
|
||||
resolved "https://registry.yarnpkg.com/keycode/-/keycode-2.2.0.tgz#3d0af56dc7b8b8e5cba8d0a97f107204eec22b04"
|
||||
|
Loading…
x
Reference in New Issue
Block a user