lianahus
2 years ago
committed by
Aniket
parent
dc5f7eff86
commit
282b43f464
|
After Width: | Height: | Size: 26 KiB |
|
After Width: | Height: | Size: 639 KiB |
|
After Width: | Height: | Size: 1.3 KiB |
|
After Width: | Height: | Size: 552 KiB |
|
After Width: | Height: | Size: 972 KiB |
@ -0,0 +1,21 @@ |
||||
/* eslint-disable @typescript-eslint/no-unused-vars */ |
||||
import React, { useEffect, useState, useRef } from 'react' |
||||
|
||||
interface CustomButtonGroupAsArrowsProps {} |
||||
|
||||
function CustomButtonGroupAsArrows ({ next, previous }) { |
||||
return ( |
||||
<div |
||||
style={{ |
||||
textAlign: "center", |
||||
}} |
||||
> |
||||
<h4>These buttons can be positioned anywhere you want on the screen</h4> |
||||
<button onClick={previous}>Prev</button> |
||||
<button onClick={next}>Next</button> |
||||
</div> |
||||
) |
||||
} |
||||
} |
||||
|
||||
export default CustomButtonGroupAsArrows |
||||
@ -0,0 +1,20 @@ |
||||
/* eslint-disable @typescript-eslint/no-unused-vars */ |
||||
import React from 'react' |
||||
|
||||
const CustomNavButtons = ({ next, previous, goToSlide, ...rest }) => { |
||||
const { carouselState: { currentSlide, totalItems } } = rest |
||||
return ( |
||||
<div className="mt-1 d-flex justify-content-end carousel-button-group"> |
||||
<button className={currentSlide === 0 ? 'disable py-0 border btn' : 'py-0 border btn'} onClick={() => previous()}> |
||||
<i className="fas fa-angle-left"></i> |
||||
</button> |
||||
<button className={currentSlide + 1 === totalItems ? 'disable py-0 border btn' : 'py-0 border btn'} onClick={() => { |
||||
if (currentSlide + 1 < totalItems) goToSlide(currentSlide + 1) |
||||
}} > |
||||
<i className="fas fa-angle-right"></i> |
||||
</button> |
||||
</div> |
||||
) |
||||
} |
||||
|
||||
export default CustomNavButtons |
||||
@ -0,0 +1,116 @@ |
||||
import * as React from "react"; |
||||
export interface ResponsiveType { |
||||
[key: string]: { |
||||
breakpoint: { max: number; min: number }; |
||||
items: number; |
||||
partialVisibilityGutter?: number; // back-ward compatible, because previously there has been a typo
|
||||
paritialVisibilityGutter?: number; |
||||
slidesToSlide?: number; |
||||
}; |
||||
} |
||||
export function isMouseMoveEvent( |
||||
e: React.MouseEvent | React.TouchEvent |
||||
): e is React.MouseEvent { |
||||
return "clientX" && "clientY" in e; |
||||
} |
||||
export interface CarouselProps { |
||||
responsive: ResponsiveType; |
||||
deviceType?: string; |
||||
ssr?: boolean; |
||||
slidesToSlide?: number; |
||||
draggable?: boolean; |
||||
arrows?: boolean; // show or hide arrows.
|
||||
renderArrowsWhenDisabled?: boolean; // Allow for the arrows to have a disabled attribute instead of not showing them
|
||||
swipeable?: boolean; |
||||
removeArrowOnDeviceType?: string | Array<string>; |
||||
children: any; |
||||
customLeftArrow?: React.ReactElement<any> | null; |
||||
customRightArrow?: React.ReactElement<any> | null; |
||||
customDot?: React.ReactElement<any> | null; |
||||
customButtonGroup?: React.ReactElement<any> | null; |
||||
infinite?: boolean; |
||||
minimumTouchDrag?: number; // default 50px. The amount of distance to drag / swipe in order to move to the next slide.
|
||||
afterChange?: (previousSlide: number, state: StateCallBack) => void; // Change callback after sliding everytime. `(previousSlide, currentState) => ...`
|
||||
beforeChange?: (nextSlide: number, state: StateCallBack) => void; // Change callback before sliding everytime. `(previousSlide, currentState) => ...`
|
||||
sliderClass?: string; // Use this to style your own track list.
|
||||
itemClass?: string; // Use this to style your own Carousel item. For example add padding-left and padding-right
|
||||
itemAriaLabel?: string; // Use this to add your own Carousel item aria-label.if it is not defined the child aria label will be applied if the child dont have one than a default empty string will be applied
|
||||
containerClass?: string; // Use this to style the whole container. For example add padding to allow the "dots" or "arrows" to go to other places without being overflown.
|
||||
className?: string; // Use this to style the whole container with styled-components
|
||||
dotListClass?: string; // Use this to style the dot list.
|
||||
keyBoardControl?: boolean; |
||||
centerMode?: boolean; // show previous and next set of items partially
|
||||
autoPlay?: boolean; |
||||
autoPlaySpeed?: number; // default 3000ms
|
||||
showDots?: boolean; |
||||
renderDotsOutside?: boolean; // show dots outside of the container for custom styling.
|
||||
renderButtonGroupOutside?: boolean; // show buttonGroup outside of the container for custom styling.
|
||||
// Show next/previous item partially
|
||||
// partialVisible has to be used in conjunction with the responsive props, details are in documentation.
|
||||
// it shows the next set of items partially, different from centerMode as it shows both.
|
||||
partialVisible?: boolean; |
||||
partialVisbile?: boolean; // old typo - deprecated (will be remove in 3.0)
|
||||
customTransition?: string; |
||||
transitionDuration?: number; |
||||
// if you are using customTransition, make sure to put the duration here.
|
||||
// for example, customTransition="all .5" then put transitionDuration as 500.
|
||||
// this is needed for the resizing to work.
|
||||
focusOnSelect?: boolean; |
||||
additionalTransfrom?: number; // this is only used if you want to add additional transfrom to the current transform
|
||||
pauseOnHover?: boolean; |
||||
shouldResetAutoplay?: boolean; |
||||
rewind?: boolean; |
||||
rewindWithAnimation?: boolean; |
||||
rtl?: boolean; |
||||
} |
||||
|
||||
export type StateCallBack = CarouselInternalState; |
||||
|
||||
export type Direction = "left" | "right" | "" | undefined; |
||||
export type SkipCallbackOptions = |
||||
| boolean |
||||
| { skipBeforeChange?: boolean; skipAfterChange?: boolean }; |
||||
export interface ButtonGroupProps { |
||||
previous?: () => void; |
||||
next?: () => void; |
||||
goToSlide?: (index: number, skipCallbacks?: SkipCallbackOptions) => void; |
||||
carouselState?: StateCallBack; |
||||
} |
||||
export interface ArrowProps { |
||||
onClick?: () => void; |
||||
carouselState?: StateCallBack; |
||||
} |
||||
export interface DotProps { |
||||
index?: number; |
||||
active?: boolean; |
||||
onClick?: () => void; |
||||
carouselState?: StateCallBack; |
||||
} |
||||
|
||||
export interface CarouselInternalState { |
||||
itemWidth: number; |
||||
containerWidth: number; |
||||
slidesToShow: number; |
||||
currentSlide: number; |
||||
totalItems: number; |
||||
domLoaded: boolean; |
||||
deviceType?: string; |
||||
transform: number; |
||||
} |
||||
|
||||
export default class Carousel extends React.Component<CarouselProps> { |
||||
previous: (slidesHavePassed: number) => void; |
||||
next: (slidesHavePassed: number) => void; |
||||
goToSlide: (slide: number, skipCallbacks?: SkipCallbackOptions) => void; |
||||
state: CarouselInternalState; |
||||
setClones: ( |
||||
slidesToShow: number, |
||||
itemWidth?: number, |
||||
forResizing?: boolean |
||||
) => void; // reset carousel in infinite mode.
|
||||
setItemsToShow: (shouldCorrectItemPosition?: boolean) => void; // reset carousel in non-infinite mode.
|
||||
correctClonesPosition: ({ domLoaded }: { domLoaded: boolean }) => void; |
||||
onMove: boolean; |
||||
direction: Direction; |
||||
containerRef: React.RefObject<HTMLDivElement>; |
||||
} |
||||
Loading…
Reference in new issue