Card Carousel

真实模板变体

Schema

{
  "name": "Card Carousel",
  "tag": "section",
  "class": "section",
  "settings": [
    {
      "type": "text",
      "id": "section_id",
      "label": "Section ID",
      "default": "collection-card-carousel"
    },
    {
      "type": "header",
      "content": "Heading"
    },
    {
      "type": "richtext",
      "id": "heading",
      "label": "Heading",
      "default": "<p>Learn About Our Brush Heads</p>"
    },
    {
      "type": "select",
      "id": "heading_tag",
      "label": "Heading tag (SEO)",
      "options": [
        {
          "value": "h1",
          "label": "H1"
        },
        {
          "value": "h2",
          "label": "H2"
        },
        {
          "value": "h3",
          "label": "H3"
        },
        {
          "value": "p",
          "label": "Paragraph"
        }
      ],
      "default": "h2"
    },
    {
      "type": "header",
      "content": "Autoplay"
    },
    {
      "type": "checkbox",
      "id": "autoplay",
      "label": "Enable autoplay",
      "default": true
    },
    {
      "type": "range",
      "id": "autoplay_interval",
      "label": "Autoplay interval",
      "min": 2,
      "max": 10,
      "step": 1,
      "unit": "s",
      "default": 4
    },
    {
      "type": "range",
      "id": "initial_slide",
      "label": "Initial slide",
      "min": 1,
      "max": 8,
      "step": 1,
      "default": 1
    },
    {
      "type": "header",
      "content": "Layout"
    },
    {
      "type": "range",
      "id": "slide_width_desktop",
      "label": "Slide width (Desktop)",
      "min": 50,
      "max": 90,
      "step": 1,
      "unit": "%",
      "default": 72
    },
    {
      "type": "range",
      "id": "max_width",
      "label": "Container max width",
      "min": 960,
      "max": 1800,
      "step": 10,
      "unit": "px",
      "default": 1310
    },
    {
      "type": "range",
      "id": "slide_gap",
      "label": "Gap between slides",
      "min": 0,
      "max": 80,
      "step": 4,
      "unit": "px",
      "default": 24
    },
    {
      "type": "range",
      "id": "card_radius",
      "label": "Card corner radius",
      "min": 0,
      "max": 48,
      "step": 2,
      "unit": "px",
      "default": 16
    },
    {
      "type": "header",
      "content": "Colors"
    },
    {
      "type": "color",
      "id": "section_bg",
      "label": "Section background",
      "default": "#f5f5f7"
    },
    {
      "type": "color",
      "id": "heading_color",
      "label": "Heading color",
      "default": "#111111"
    },
    {
      "type": "color",
      "id": "badge_color",
      "label": "Badge color",
      "default": "#2f6df6"
    },
    {
      "type": "color",
      "id": "title_color",
      "label": "Card title color",
      "default": "#111111"
    },
    {
      "type": "color",
      "id": "text_color",
      "label": "Card description color",
      "default": "#444444"
    },
    {
      "type": "color",
      "id": "button_bg",
      "label": "Button background",
      "default": "#111111"
    },
    {
      "type": "color",
      "id": "button_text_color",
      "label": "Button text color",
      "default": "#ffffff"
    },
    {
      "type": "color",
      "id": "dot_color",
      "label": "Dot color",
      "default": "#cccccc"
    },
    {
      "type": "color",
      "id": "dot_active_color",
      "label": "Active dot color",
      "default": "#111111"
    },
    {
      "type": "header",
      "content": "Accessibility"
    },
    {
      "type": "text",
      "id": "aria_label",
      "label": "Accessibility label",
      "default": "Brush heads carousel"
    }
  ],
  "blocks": [
    {
      "type": "slide",
      "name": "Slide",
      "settings": [
        {
          "type": "image_picker",
          "id": "image",
          "label": "Image fallback"
        },
        {
          "type": "image_picker",
          "id": "image_desktop",
          "label": "Background image (desktop)"
        },
        {
          "type": "image_picker",
          "id": "image_mobile",
          "label": "Background image (mobile)"
        },
        {
          "type": "text",
          "id": "badge",
          "label": "Badge text",
          "default": "NEW"
        },
        {
          "type": "text",
          "id": "title",
          "label": "Title",
          "default": "Laifen Pro Series Brush Heads"
        },
        {
          "type": "richtext",
          "id": "description",
          "label": "Description",
          "default": "<p>Comprehensive Cleaning With Gentle Gum Protection.</p>"
        },
        {
          "type": "text",
          "id": "button_label",
          "label": "Button label",
          "default": "Learn More"
        },
        {
          "type": "url",
          "id": "button_link",
          "label": "Button link"
        },
        {
          "type": "color",
          "id": "card_bg",
          "label": "Card background",
          "default": "#f2e9e1"
        }
      ]
    }
  ],
  "presets": [
    {
      "name": "Card Carousel",
      "blocks": [
        {
          "type": "slide"
        },
        {
          "type": "slide"
        },
        {
          "type": "slide"
        }
      ]
    }
  ]
}