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:
- Focus Effect: The center card is highlighted with a darker brown background (
#a39882) while other cards are dimmed with reduced opacity. - Smooth Transitions: Cards slide with smooth animations when navigating between testimonials.
- Navigation Controls: Arrow buttons at the bottom allow users to navigate through testimonials.
- Responsive Design: The slider works on all screen sizes, adjusting the card sizes appropriately.
- Keyboard Navigation: Users can navigate using left and right arrow keys for accessibility.
- Matching Aesthetics: I've used the same beige/tan color scheme from your image for the background (
#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:
Key Changes:
V-Shape Positioning:
- The center/active card is now positioned 40px lower than the others
- Adjacent cards (immediately to the left and right) are positioned 10px lower
- The outermost cards are at the top of the "V" shape
Vertical Offset Logic:
- Added a
verticalOffsetcalculation that determines how much each card should be moved vertically based on its position - Applied these offsets using CSS transforms with
translate-yproperties
- Added a
Increased Container Height:
- Increased the minimum height of the container to accommodate the vertical arrangement
- Moved the navigation buttons down slightly to account for the new layout
Maintained Original Styling:
- Kept the same color scheme and dimming effect from the original design
- The active card still has the darker brown background and full opacity
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.