We have made an expandable animated card slider, it will expand and collapse based on card click. We used owl carousel and jQuery for variable width and responsive slider.
Made by Rajnee Makwana from Yudiz
A Pen by Yudiz Solutions Limited on CodePen.
| const CLOSED = "CLOSED"; | |
| const INSUFFICIENT_FUNDS = "INSUFFICIENT_FUNDS"; | |
| const OPEN = "OPEN"; | |
| const PENNY = 0; | |
| const NICKEL = 1; | |
| const DIME = 2; | |
| const QUARTER = 3; | |
| const ONE = 4; | |
| const FIVE = 5; |
| <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 750 500" preserveAspectRatio="xMidYMax slice"> | |
| <defs> | |
| <!-- Scene 1 Gradient --> | |
| <linearGradient id="grad1" x1="-154.32" y1="263.27" x2="-154.32" y2="374.3" | |
| gradientTransform="matrix(-1, 0, 0, 1.36, 231.36, -100.14)" gradientUnits="userSpaceOnUse"> | |
| <stop offset="0.07" stop-color="#9c536b" /> | |
| <stop offset="0.98" stop-color="#d98981" /> | |
| </linearGradient> | |
| <radialGradient id="bg_grad" cx="375" cy="-35" r="318.69" gradientUnits="userSpaceOnUse"> | |
| <stop offset="0.1" stop-color="#F5C54E" id="sun" /> |