crowetic/commerce
1
0
Fork 1
mirror of https://github.com/vercel/commerce.git synced 2025-03-14 22:42:33 +00:00
Code Issues Packages Projects Releases Wiki Activity

use bg-image

Browse Source
This commit is contained in:
Franco Arza 2020-10-23 12:15:12 -03:00
parent b15ae59aaf
commit e4f8a74f63
2 changed files with 8 additions and 15 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

10
components/product/ProductSlider/ProductSlider.module.css
View File

@ -10,10 +10,12 @@
.leftControl {
@apply left-6;
background-image: url('public/cursor-left.png');
}
.rightControl {
@apply right-6;
background-image: url('public/cursor-right.png');
}
.control {
@ -66,11 +68,3 @@
.positionIndicatorActive:hover .dot {
@apply bg-white;
}
/* sx={{
width: '10px',
height: '10px',
bg: currentSlide === idx ? 'primary' : 'gray',
borderRadius: 'full',
mx: 2,
'&:focus': { outline: 'none' },
}} */

13
components/product/ProductSlider/ProductSlider.tsx
View File

@ -1,6 +1,6 @@
import { useKeenSlider } from 'keen-slider/react'
import Image from 'next/image'
import React, { Children, FC, isValidElement, useState } from 'react'
import { HiChevronLeft, HiChevronRight } from 'react-icons/hi'
import cn from 'classnames'
import s from './ProductSlider.module.css'
@ -20,12 +20,11 @@ const ProductSlider: FC = ({ children }) => {
return (
<div className={s.root}>
<button className={cn(s.leftControl, s.control)} onClick={slider?.prev}>
<HiChevronLeft />
</button>
<button className={cn(s.rightControl, s.control)} onClick={slider?.next}>
<HiChevronRight />
</button>
<button className={cn(s.leftControl, s.control)} onClick={slider?.prev} />
<button
className={cn(s.rightControl, s.control)}
onClick={slider?.next}
/>
<div
ref={ref}
className="keen-slider h-full transition-opacity duration-150"