Section
Feature Slider
2 个模板实例，23 个 section 配置，1 类 block。
真实模板变体
Schema
{
"name": "Feature Slider",
"tag": "section",
"class": "section",
"settings": [
{
"type": "text",
"id": "section_id",
"label": "Section ID",
"default": "collection-feature-slider"
},
{
"type": "text",
"id": "aria_label",
"label": "Carousel label",
"default": "Feature carousel"
},
{
"type": "text",
"id": "heading",
"label": "Heading",
"default": "Highlights."
},
{
"type": "select",
"id": "heading_tag",
"label": "Heading tag",
"options": [
{
"value": "h1",
"label": "H1"
},
{
"value": "h2",
"label": "H2"
},
{
"value": "h3",
"label": "H3"
},
{
"value": "p",
"label": "Paragraph"
}
],
"default": "h2"
},
{
"type": "checkbox",
"id": "autoplay",
"label": "Auto-rotate slides",
"default": false
},
{
"type": "range",
"id": "autoplay_interval",
"label": "Change slides every",
"min": 3,
"max": 10,
"step": 1,
"unit": "s",
"default": 5
},
{
"type": "range",
"id": "initial_slide_desktop",
"label": "Initial slide on desktop",
"min": 1,
"max": 8,
"step": 1,
"default": 1
},
{
"type": "range",
"id": "initial_slide_mobile",
"label": "Initial slide on mobile",
"min": 1,
"max": 8,
"step": 1,
"default": 1
},
{
"type": "range",
"id": "max_width",
"label": "Active card max width",
"min": 960,
"max": 1800,
"step": 10,
"unit": "px",
"default": 1390
},
{
"type": "range",
"id": "min_height_desktop",
"label": "Desktop card height",
"min": 420,
"max": 900,
"step": 10,
"unit": "px",
"default": 700
},
{
"type": "range",
"id": "slide_gap",
"label": "Gap between cards",
"min": 0,
"max": 80,
"step": 2,
"unit": "px",
"default": 20
},
{
"type": "range",
"id": "mobile_side_space",
"label": "Mobile side spacing",
"min": 20,
"max": 80,
"step": 2,
"unit": "px",
"default": 50
},
{
"type": "range",
"id": "radius",
"label": "Desktop card radius",
"min": 0,
"max": 40,
"step": 2,
"unit": "px",
"default": 24
},
{
"type": "range",
"id": "radius_mobile",
"label": "Mobile card radius",
"min": 0,
"max": 60,
"step": 2,
"unit": "px",
"default": 44
},
{
"type": "range",
"id": "padding_top",
"label": "Desktop padding top",
"min": 0,
"max": 160,
"step": 4,
"unit": "px",
"default": 40
},
{
"type": "range",
"id": "padding_bottom",
"label": "Desktop padding bottom",
"min": 0,
"max": 160,
"step": 4,
"unit": "px",
"default": 88
},
{
"type": "range",
"id": "padding_top_mobile",
"label": "Mobile padding top",
"min": 0,
"max": 180,
"step": 4,
"unit": "px",
"default": 96
},
{
"type": "range",
"id": "padding_bottom_mobile",
"label": "Mobile padding bottom",
"min": 0,
"max": 180,
"step": 4,
"unit": "px",
"default": 108
},
{
"type": "color",
"id": "background_color",
"label": "Section background",
"default": "#f5f6f7"
},
{
"type": "color",
"id": "heading_color",
"label": "Heading color",
"default": "#050505"
},
{
"type": "color",
"id": "mobile_text_color",
"label": "Mobile text color",
"default": "#050505"
},
{
"type": "color",
"id": "dot_color",
"label": "Dot color",
"default": "#cccccc"
},
{
"type": "color",
"id": "dot_active_color",
"label": "Active dot color",
"default": "#111111"
}
],
"blocks": [
{
"type": "slide",
"name": "Feature card",
"settings": [
{
"type": "image_picker",
"id": "image_desktop",
"label": "Desktop image"
},
{
"type": "image_picker",
"id": "image_mobile",
"label": "Mobile image"
},
{
"type": "color",
"id": "card_background",
"label": "Card background",
"default": "#262626"
},
{
"type": "color",
"id": "text_color",
"label": "Desktop text color",
"default": "#ffffff"
},
{
"type": "select",
"id": "content_position",
"label": "Desktop text position",
"options": [
{
"value": "left",
"label": "Top left"
},
{
"value": "right",
"label": "Top right"
},
{
"value": "bottom_left",
"label": "Bottom left"
},
{
"value": "bottom_right",
"label": "Bottom right"
}
],
"default": "left"
},
{
"type": "checkbox",
"id": "enable_image_shade",
"label": "Add image shade behind text",
"default": false
},
{
"type": "text",
"id": "eyebrow",
"label": "Eyebrow"
},
{
"type": "textarea",
"id": "heading",
"label": "Heading",
"default": "Feature highlight."
},
{
"type": "richtext",
"id": "description",
"label": "Description"
},
{
"type": "text",
"id": "button_label",
"label": "Button label"
},
{
"type": "url",
"id": "button_link",
"label": "Button link"
}
]
}
],
"presets": [
{
"name": "Feature Slider",
"blocks": [
{
"type": "slide"
},
{
"type": "slide"
},
{
"type": "slide"
}
]
}
]
}