Edit Image Slider

Name

Also known as (comma separated)

Brief definition Carousel specifically for images.

Notes

Tier Core Useful Reference Deleted

Controls schema (JSON array) [ { "id": "dotStyle", "type": "select", "label": "Dot style", "default": "circle", "options": [ "circle", "line" ] }, { "id": "accent", "type": "color", "label": "Accent colour", "default": "#BFD9F2", "presets": [ "#A8E6C1", "#F5C2E0", "#BFD9F2", "#D9C8F0", "#E8A020", "#241430" ] }, { "id": "showArrows", "type": "toggle", "label": "Show arrows", "default": true }, { "id": "radius", "type": "number", "label": "Corner radius", "default": 10, "min": 0, "max": 24, "step": 1 } ]

Templates (JSON object keyed by format) { "html": "<div class=\"img-slider\" style=\"--accent:{{accent}};\">\n <input class=\"img-slider__radio\" type=\"radio\" name=\"img-slider-slide\" id=\"img-slider-s1\" checked />\n <input class=\"img-slider__radio\" type=\"radio\" name=\"img-slider-slide\" id=\"img-slider-s2\" />\n <input class=\"img-slider__radio\" type=\"radio\" name=\"img-slider-slide\" id=\"img-slider-s3\" />\n\n <div class=\"img-slider__viewport\" style=\"border-radius:{{radius}}px;\">\n <div class=\"img-slider__track\">\n <img class=\"img-slider__img\" src=\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='400' height='260'%3E%3Crect width='400' height='260' fill='%23A8E6C1'/%3E%3Ccircle cx='200' cy='130' r='70' fill='%23FAF7F2'/%3E%3C/svg%3E\" alt=\"Slide 1: pale circle on mint\" loading=\"lazy\" width=\"400\" height=\"260\" />\n <img class=\"img-slider__img\" src=\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='400' height='260'%3E%3Crect width='400' height='260' fill='%23BFD9F2'/%3E%3Ccircle cx='200' cy='130' r='70' fill='%23FAF7F2'/%3E%3C/svg%3E\" alt=\"Slide 2: pale circle on sky blue\" loading=\"lazy\" width=\"400\" height=\"260\" />\n <img class=\"img-slider__img\" src=\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='400' height='260'%3E%3Crect width='400' height='260' fill='%23F5C2E0'/%3E%3Ccircle cx='200' cy='130' r='70' fill='%23FAF7F2'/%3E%3C/svg%3E\" alt=\"Slide 3: pale circle on blush pink\" loading=\"lazy\" width=\"400\" height=\"260\" />\n </div>\n {{#if showArrows}}\n <div class=\"img-slider__arrows\">\n <label class=\"img-slider__arrow img-slider__arrow--for-1\" for=\"img-slider-s3\" aria-label=\"Previous image\">&#8249;</label>\n <label class=\"img-slider__arrow img-slider__arrow--for-1\" for=\"img-slider-s2\" aria-label=\"Next image\">&#8250;</label>\n <label class=\"img-slider__arrow img-slider__arrow--for-2\" for=\"img-slider-s1\" aria-label=\"Previous image\">&#8249;</label>\n <label class=\"img-slider__arrow img-slider__arrow--for-2\" for=\"img-slider-s3\" aria-label=\"Next image\">&#8250;</label>\n <label class=\"img-slider__arrow img-slider__arrow--for-3\" for=\"img-slider-s2\" aria-label=\"Previous image\">&#8249;</label>\n <label class=\"img-slider__arrow img-slider__arrow--for-3\" for=\"img-slider-s1\" aria-label=\"Next image\">&#8250;</label>\n </div>\n {{/if}}\n </div>\n\n <div class=\"img-slider__dots img-slider__dots--{{dotStyle}}\">\n <label class=\"img-slider__dot\" for=\"img-slider-s1\" aria-label=\"Go to slide 1\"></label>\n <label class=\"img-slider__dot\" for=\"img-slider-s2\" aria-label=\"Go to slide 2\"></label>\n <label class=\"img-slider__dot\" for=\"img-slider-s3\" aria-label=\"Go to slide 3\"></label>\n </div>\n</div>\n<style>\n.img-slider { max-width: 360px; font: 13px/1.4 system-ui, sans-serif; color: #241430; }\n.img-slider__radio { position: absolute; opacity: 0; width: 1px; height: 1px; overflow: hidden; }\n.img-slider__viewport { position: relative; overflow: hidden; border: 1px solid #24143022; }\n.img-slider__track { display: flex; width: 300%; }\n@media (prefers-reduced-motion: no-preference) {\n.img-slider__track { transition: transform .2s ease; }\n}\n.img-slider__img { flex: 0 0 33.333%; display: block; width: 33.333%; aspect-ratio: 400 / 260; object-fit: cover; }\n#img-slider-s1:checked ~ .img-slider__viewport .img-slider__track { transform: translateX(0%); }\n#img-slider-s2:checked ~ .img-slider__viewport .img-slider__track { transform: translateX(-33.333%); }\n#img-slider-s3:checked ~ .img-slider__viewport .img-slider__track { transform: translateX(-66.666%); }\n.img-slider__arrows { position: absolute; inset: 0; display: flex; align-items: center; justify-content: space-between; padding: 0 8px; pointer-events: none; }\n.img-slider__arrow { pointer-events: auto; display: none; align-items: center; justify-content: center; width: 28px; height: 28px; border-radius: 50%; background: #FAF7F2cc; color: #241430; cursor: pointer; font-size: 16px; line-height: 1; text-decoration: none; }\n.img-slider__arrow:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }\n#img-slider-s1:checked ~ .img-slider__viewport .img-slider__arrow--for-1 { display: flex; }\n#img-slider-s2:checked ~ .img-slider__viewport .img-slider__arrow--for-2 { display: flex; }\n#img-slider-s3:checked ~ .img-slider__viewport .img-slider__arrow--for-3 { display: flex; }\n.img-slider__dots { display: flex; gap: 8px; justify-content: center; margin-top: 10px; }\n.img-slider__dot { display: block; cursor: pointer; background: #24143033; }\n.img-slider__dots--circle .img-slider__dot { width: 8px; height: 8px; border-radius: 50%; }\n.img-slider__dots--line .img-slider__dot { width: 20px; height: 4px; border-radius: 2px; }\n.img-slider__dot:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }\n#img-slider-s1:checked ~ .img-slider__dots label:nth-of-type(1) { background: var(--accent); }\n#img-slider-s2:checked ~ .img-slider__dots label:nth-of-type(2) { background: var(--accent); }\n#img-slider-s3:checked ~ .img-slider__dots label:nth-of-type(3) { background: var(--accent); }\n</style>", "tailwind": "<div class=\"img-slider-tw max-w-[360px] font-sans text-[13px] text-[#241430]\" style=\"--accent:{{accent}};\">\n <input class=\"img-slider-tw__radio\" type=\"radio\" name=\"img-slider-tw-slide\" id=\"img-slider-tw-s1\" checked />\n <input class=\"img-slider-tw__radio\" type=\"radio\" name=\"img-slider-tw-slide\" id=\"img-slider-tw-s2\" />\n <input class=\"img-slider-tw__radio\" type=\"radio\" name=\"img-slider-tw-slide\" id=\"img-slider-tw-s3\" />\n\n <div class=\"img-slider-tw__viewport relative overflow-hidden border border-[#24143022]\" style=\"border-radius:{{radius}}px;\">\n <div class=\"img-slider-tw__track flex w-[300%] motion-safe:transition-transform motion-safe:duration-300\">\n <img class=\"block w-1/3 object-cover\" style=\"aspect-ratio:400/260;\" src=\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='400' height='260'%3E%3Crect width='400' height='260' fill='%23A8E6C1'/%3E%3Ccircle cx='200' cy='130' r='70' fill='%23FAF7F2'/%3E%3C/svg%3E\" alt=\"Slide 1: pale circle on mint\" loading=\"lazy\" width=\"400\" height=\"260\" />\n <img class=\"block w-1/3 object-cover\" style=\"aspect-ratio:400/260;\" src=\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='400' height='260'%3E%3Crect width='400' height='260' fill='%23BFD9F2'/%3E%3Ccircle cx='200' cy='130' r='70' fill='%23FAF7F2'/%3E%3C/svg%3E\" alt=\"Slide 2: pale circle on sky blue\" loading=\"lazy\" width=\"400\" height=\"260\" />\n <img class=\"block w-1/3 object-cover\" style=\"aspect-ratio:400/260;\" src=\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='400' height='260'%3E%3Crect width='400' height='260' fill='%23F5C2E0'/%3E%3Ccircle cx='200' cy='130' r='70' fill='%23FAF7F2'/%3E%3C/svg%3E\" alt=\"Slide 3: pale circle on blush pink\" loading=\"lazy\" width=\"400\" height=\"260\" />\n </div>\n {{#if showArrows}}\n <div class=\"absolute inset-0 flex items-center justify-between px-2\" style=\"pointer-events:none;\">\n <label class=\"img-slider-tw__arrow img-slider-tw__arrow--for-1 w-7 h-7 rounded-full items-center justify-center bg-[#FAF7F2]/80 text-[#241430] cursor-pointer\" style=\"pointer-events:auto;\" for=\"img-slider-tw-s3\" aria-label=\"Previous image\">&#8249;</label>\n <label class=\"img-slider-tw__arrow img-slider-tw__arrow--for-1 w-7 h-7 rounded-full items-center justify-center bg-[#FAF7F2]/80 text-[#241430] cursor-pointer\" style=\"pointer-events:auto;\" for=\"img-slider-tw-s2\" aria-label=\"Next image\">&#8250;</label>\n <label class=\"img-slider-tw__arrow img-slider-tw__arrow--for-2 w-7 h-7 rounded-full items-center justify-center bg-[#FAF7F2]/80 text-[#241430] cursor-pointer\" style=\"pointer-events:auto;\" for=\"img-slider-tw-s1\" aria-label=\"Previous image\">&#8249;</label>\n <label class=\"img-slider-tw__arrow img-slider-tw__arrow--for-2 w-7 h-7 rounded-full items-center justify-center bg-[#FAF7F2]/80 text-[#241430] cursor-pointer\" style=\"pointer-events:auto;\" for=\"img-slider-tw-s3\" aria-label=\"Next image\">&#8250;</label>\n <label class=\"img-slider-tw__arrow img-slider-tw__arrow--for-3 w-7 h-7 rounded-full items-center justify-center bg-[#FAF7F2]/80 text-[#241430] cursor-pointer\" style=\"pointer-events:auto;\" for=\"img-slider-tw-s2\" aria-label=\"Previous image\">&#8249;</label>\n <label class=\"img-slider-tw__arrow img-slider-tw__arrow--for-3 w-7 h-7 rounded-full items-center justify-center bg-[#FAF7F2]/80 text-[#241430] cursor-pointer\" style=\"pointer-events:auto;\" for=\"img-slider-tw-s1\" aria-label=\"Next image\">&#8250;</label>\n </div>\n {{/if}}\n </div>\n\n <div class=\"img-slider-tw__dots img-slider-tw__dots--{{dotStyle}} flex gap-2 justify-center mt-2.5\">\n <label class=\"img-slider-tw__dot block cursor-pointer bg-[#24143033]\" for=\"img-slider-tw-s1\" aria-label=\"Go to slide 1\"></label>\n <label class=\"img-slider-tw__dot block cursor-pointer bg-[#24143033]\" for=\"img-slider-tw-s2\" aria-label=\"Go to slide 2\"></label>\n <label class=\"img-slider-tw__dot block cursor-pointer bg-[#24143033]\" for=\"img-slider-tw-s3\" aria-label=\"Go to slide 3\"></label>\n </div>\n</div>\n<style>\n.img-slider-tw__radio { position: absolute; opacity: 0; width: 1px; height: 1px; overflow: hidden; }\n#img-slider-tw-s1:checked ~ .img-slider-tw__viewport .img-slider-tw__track { transform: translateX(0%); }\n#img-slider-tw-s2:checked ~ .img-slider-tw__viewport .img-slider-tw__track { transform: translateX(-33.333%); }\n#img-slider-tw-s3:checked ~ .img-slider-tw__viewport .img-slider-tw__track { transform: translateX(-66.666%); }\n.img-slider-tw__arrow { display: none; }\n.img-slider-tw__arrow:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }\n#img-slider-tw-s1:checked ~ .img-slider-tw__viewport .img-slider-tw__arrow--for-1 { display: flex; }\n#img-slider-tw-s2:checked ~ .img-slider-tw__viewport .img-slider-tw__arrow--for-2 { display: flex; }\n#img-slider-tw-s3:checked ~ .img-slider-tw__viewport .img-slider-tw__arrow--for-3 { display: flex; }\n.img-slider-tw__dots--circle .img-slider-tw__dot { width: 8px; height: 8px; border-radius: 50%; }\n.img-slider-tw__dots--line .img-slider-tw__dot { width: 20px; height: 4px; border-radius: 2px; }\n.img-slider-tw__dot:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }\n#img-slider-tw-s1:checked ~ .img-slider-tw__dots label:nth-of-type(1) { background: var(--accent); }\n#img-slider-tw-s2:checked ~ .img-slider-tw__dots label:nth-of-type(2) { background: var(--accent); }\n#img-slider-tw-s3:checked ~ .img-slider-tw__dots label:nth-of-type(3) { background: var(--accent); }\n</style>", "react": "export function ImageSlider({\n dotStyle = \"{{dotStyle}}\",\n accent = \"{{accent}}\",\n showArrows = {{showArrows}},\n radius = {{radius}},\n}) {\n const slides = [\n { fill: \"#A8E6C1\", alt: \"Slide 1: pale circle on mint\" },\n { fill: \"#BFD9F2\", alt: \"Slide 2: pale circle on sky blue\" },\n { fill: \"#F5C2E0\", alt: \"Slide 3: pale circle on blush pink\" },\n ];\n const dotSize = dotStyle === \"line\" ? { width: 20, height: 4, borderRadius: 2 } : { width: 8, height: 8, borderRadius: \"50%\" };\n return (\n <div style={{ maxWidth: 360, font: \"13px/1.4 system-ui, sans-serif\", color: \"#241430\", \"--accent\": accent }}>\n <input className=\"img-slider-rc__radio\" type=\"radio\" name=\"img-slider-rc-slide\" id=\"img-slider-rc-s1\" defaultChecked />\n <input className=\"img-slider-rc__radio\" type=\"radio\" name=\"img-slider-rc-slide\" id=\"img-slider-rc-s2\" />\n <input className=\"img-slider-rc__radio\" type=\"radio\" name=\"img-slider-rc-slide\" id=\"img-slider-rc-s3\" />\n\n <div className=\"img-slider-rc__viewport\" style={{ position: \"relative\", overflow: \"hidden\", border: \"1px solid #24143022\", borderRadius: radius }}>\n <div className=\"img-slider-rc__track\" style={{ display: \"flex\", width: \"300%\" }}>\n {slides.map((s) => (\n <svg key={s.alt} viewBox=\"0 0 400 260\" width=\"100%\" height=\"100%\" style={{ flex: \"0 0 33.333%\", display: \"block\" }} role=\"img\" aria-label={s.alt}>\n <rect width=\"400\" height=\"260\" fill={s.fill} />\n <circle cx=\"200\" cy=\"130\" r=\"70\" fill=\"#FAF7F2\" />\n </svg>\n ))}\n </div>\n {showArrows && (\n <div className=\"img-slider-rc__arrows\" style={{ position: \"absolute\", inset: 0, display: \"flex\", alignItems: \"center\", justifyContent: \"space-between\", padding: \"0 8px\", pointerEvents: \"none\" }}>\n <label className=\"img-slider-rc__arrow img-slider-rc__arrow--for-1\" htmlFor=\"img-slider-rc-s3\" aria-label=\"Previous image\">&#8249;</label>\n <label className=\"img-slider-rc__arrow img-slider-rc__arrow--for-1\" htmlFor=\"img-slider-rc-s2\" aria-label=\"Next image\">&#8250;</label>\n <label className=\"img-slider-rc__arrow img-slider-rc__arrow--for-2\" htmlFor=\"img-slider-rc-s1\" aria-label=\"Previous image\">&#8249;</label>\n <label className=\"img-slider-rc__arrow img-slider-rc__arrow--for-2\" htmlFor=\"img-slider-rc-s3\" aria-label=\"Next image\">&#8250;</label>\n <label className=\"img-slider-rc__arrow img-slider-rc__arrow--for-3\" htmlFor=\"img-slider-rc-s2\" aria-label=\"Previous image\">&#8249;</label>\n <label className=\"img-slider-rc__arrow img-slider-rc__arrow--for-3\" htmlFor=\"img-slider-rc-s1\" aria-label=\"Next image\">&#8250;</label>\n </div>\n )}\n </div>\n\n <div style={{ display: \"flex\", gap: 8, justifyContent: \"center\", marginTop: 10 }}>\n <label className=\"img-slider-rc__dot\" htmlFor=\"img-slider-rc-s1\" aria-label=\"Go to slide 1\" style={{ display: \"block\", cursor: \"pointer\", background: \"#24143033\", ...dotSize }} />\n <label className=\"img-slider-rc__dot\" htmlFor=\"img-slider-rc-s2\" aria-label=\"Go to slide 2\" style={{ display: \"block\", cursor: \"pointer\", background: \"#24143033\", ...dotSize }} />\n <label className=\"img-slider-rc__dot\" htmlFor=\"img-slider-rc-s3\" aria-label=\"Go to slide 3\" style={{ display: \"block\", cursor: \"pointer\", background: \"#24143033\", ...dotSize }} />\n </div>\n\n <style>{`\n .img-slider-rc__radio { position: absolute; opacity: 0; width: 1px; height: 1px; overflow: hidden; }\n @media (prefers-reduced-motion: no-preference) {\n.img-slider-rc__track { transition: transform .2s ease; }\n}\n #img-slider-rc-s1:checked ~ .img-slider-rc__viewport .img-slider-rc__track { transform: translateX(0%); }\n #img-slider-rc-s2:checked ~ .img-slider-rc__viewport .img-slider-rc__track { transform: translateX(-33.333%); }\n #img-slider-rc-s3:checked ~ .img-slider-rc__viewport .img-slider-rc__track { transform: translateX(-66.666%); }\n .img-slider-rc__arrow { pointer-events: auto; display: none; align-items: center; justify-content: center; width: 28px; height: 28px; border-radius: 50%; background: #FAF7F2cc; color: #241430; cursor: pointer; font-size: 16px; line-height: 1; text-decoration: none; }\n .img-slider-rc__arrow:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }\n #img-slider-rc-s1:checked ~ .img-slider-rc__viewport .img-slider-rc__arrow--for-1 { display: flex; }\n #img-slider-rc-s2:checked ~ .img-slider-rc__viewport .img-slider-rc__arrow--for-2 { display: flex; }\n #img-slider-rc-s3:checked ~ .img-slider-rc__viewport .img-slider-rc__arrow--for-3 { display: flex; }\n .img-slider-rc__dot:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }\n #img-slider-rc-s1:checked ~ div label:nth-of-type(1),\n #img-slider-rc-s2:checked ~ div label:nth-of-type(2),\n #img-slider-rc-s3:checked ~ div label:nth-of-type(3) { background: var(--accent); }\n `}</style>\n </div>\n );\n}" }