4
0
forked from crowetic/commerce

Merge pull request #9 from okbel/arzafran/fix-pdp-arrows

Change Arrows on PDP slider
This commit is contained in:
Franco Arza 2020-10-23 14:23:59 -03:00 committed by GitHub
commit 64af8c137c
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
4 changed files with 12 additions and 19 deletions

View File

@ -1,19 +1,21 @@
.root { .root {
@apply relative w-full h-full relative; @apply relative w-full h-full;
overflow-y: hidden; overflow-y: hidden;
} }
.leftControl, .leftControl,
.rightControl { .rightControl {
@apply text-white text-xl absolute top-1/2 -translate-x-1/2 z-20 w-16 h-16 flex items-center justify-center bg-hover-1 rounded-full focus:outline-none focus:shadow-outline-blue hover:bg-hover-2; @apply absolute top-1/2 -translate-x-1/2 z-20 w-16 h-16 flex items-center justify-center bg-hover-1 rounded-full focus:outline-none focus:shadow-outline-blue hover:bg-hover-2;
} }
.leftControl { .leftControl {
@apply left-6; @apply bg-cover left-10 md:left-6;
background-image: url('public/cursor-left.png');
} }
.rightControl { .rightControl {
@apply right-6; @apply bg-cover right-10 md:right-6;
background-image: url('public/cursor-right.png');
} }
.control { .control {
@ -66,11 +68,3 @@
.positionIndicatorActive:hover .dot { .positionIndicatorActive:hover .dot {
@apply bg-white; @apply bg-white;
} }
/* sx={{
width: '10px',
height: '10px',
bg: currentSlide === idx ? 'primary' : 'gray',
borderRadius: 'full',
mx: 2,
'&:focus': { outline: 'none' },
}} */

View File

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

Binary file not shown.

Before

Width:  |  Height:  |  Size: 1.4 KiB

After

Width:  |  Height:  |  Size: 1.1 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 1.4 KiB

After

Width:  |  Height:  |  Size: 1.1 KiB