4
0
forked from crowetic/commerce

add keen slider and apply to product slider

This commit is contained in:
Julián Benegas 2020-10-22 19:10:09 -03:00
parent b3fec00939
commit 791c4c2fcc
8 changed files with 109 additions and 66 deletions

View File

@ -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;

View File

@ -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' },
}} */

View File

@ -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>
)
}

View File

@ -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 {

View File

@ -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",

View File

@ -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'

View File

@ -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)',

View File

@ -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"