Carousel
Explore different variants and configurations of the Carousel component.
Install with:
npx afnoui add carousel/carousel-premium-fadePremium Fade
Slide 1
Slide 2
Slide 3
Engine BehaviorOpacity TransitionLoopingYes
Install with:
npx afnoui add carousel/carousel-product-rowProduct Row
Product 1
Product 2
Product 3
Product 4
Product 5
Product 6
Engine BehaviorBasis-1/3 Align StartLoopingNo
Install with:
npx afnoui add carousel/carousel-infinite-sliderInfinite Slider
FirstStandard sliding effect
SecondStandard sliding effect
ThirdStandard sliding effect
Engine BehaviorDefault Slide LogicLoopingYes
Install with:
npx afnoui add carousel/carousel-scale-focusScale Focus
1
2
3
4
5
Engine BehaviorConditional Opacity/ScaleLoopingYes
Install with:
npx afnoui add carousel/carousel-progress-barProgress Bar
Slide 1
Slide 2
Slide 3
Slide 4
Engine BehaviorState Driven WidthLoopingYes
Install with:
npx afnoui add carousel/carousel-momentum-galleryMomentum Gallery
ASSET_ID: 000
Dynamic Width 40%
ASSET_ID: 001
Dynamic Width 60%
ASSET_ID: 002
Dynamic Width 30%
ASSET_ID: 003
Dynamic Width 70%
Engine BehaviordragFree: trueLoopingYes
Install with:
npx afnoui add carousel/carousel-horizontal-feedHorizontal Feed
System Alert: Success Level
System Alert: Warning Level
System Alert: Error Level
System Alert: Info Level
Engine BehaviorAutoplayLoopingYes