can you design a slider like this ? card - slider, one is visible others are dim
I'll create a testimonial slider that matches the design in your image, with one card in focus and others dimmed. Let me implement this for you:
This testimonial slider matches the design from your image with the following features:
#a39882) while other cards are dimmed with reduced opacity.#e6deca) and the active card.You can customize the testimonials by modifying the testimonials array in the code. Each testimonial has fields for the quote, author, location, and additional information.
can you make it more look like "V" shape line in screenshot. Where centered element is a bit low and making v
I'll modify the slider to create that "V" shape arrangement where the center card is positioned lower than the surrounding cards. Here's the updated implementation:
I've updated the slider to create a "V" shape arrangement as you requested:
V-Shape Positioning:
Vertical Offset Logic:
verticalOffset calculation that determines how much each card should be moved vertically based on its positiontranslate-y propertiesIncreased Container Height:
Maintained Original Styling:
This creates a visually interesting "V" shape where your eye is drawn to the center card that sits lower than the others, just as shown in your screenshot. The cards will maintain this V-shaped arrangement as users navigate through the testimonials.