{"html":"\n

\n \n

HELLO THERE

Am Ashwin.A

\n \n

Do follow on Insta

ashwin_ambar_

\n \n

Replace cards with images

for a image slider

\n \n

Html css only

Hover to stop the slides

\n \n

Card 5

Content for card 5

\n \n

Card 6

Content for card 6

\n \n

Card 7

Modify it and use

\n \n

Card 8

Content for card 8

\n \n

card 9

Content for card 9

\n \n \n\n","css":".card {\n width: 100%;\n height: 100%;\n padding: 15px;\n border: 1px solid #ccc;\n border-radius: 8px;\n box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);\n color: white;\n text-align: center;\n}\n\n.card p {\n font-size: 14px;\n color: white;\n}\n\n.slider {\n width: 100%;\n height: var(--height);\n overflow: hidden;\n mask-image: linear-gradient(to right, transparent, #000 10% 90%, transparent);\n}\n.slider .list {\n display: flex;\n width: 100%;\n min-width: calc(var(--width) * var(--quantity));\n position: relative;\n}\n.slider .list .item {\n width: var(--width);\n height: var(--height);\n position: absolute;\n left: 100%;\n animation: autoRun 10s linear infinite;\n transition: filter 0.5s;\n animation-delay: calc(\n (10s / var(--quantity)) * (var(--position) - 1) - 10s\n ) !important;\n}\n.slider .list .item img {\n width: 100%;\n}\n@keyframes autoRun {\n from {\n left: 100%;\n }\n to {\n left: calc(var(--width) * -1);\n }\n}\n.slider:hover .item {\n animation-play-state: paused !important;\n filter: grayscale(1);\n}\n.slider .item:hover {\n filter: grayscale(0);\n}\n.slider[reverse=\"true\"] .item {\n animation: reversePlay 10s linear infinite;\n}\n@keyframes reversePlay {\n from {\n left: calc(var(--width) * -1);\n }\n to {\n left: 100%;\n }\n}\n"}

tough-baboon-50

👁 实时预览

📝 源代码