feat: add slider template
This commit is contained in:
Shivam Mishra
parent
fa102e4713
commit
09c8aaa87a
@ -0,0 +1,112 @@
|
||||
{%- macro slide(image, title, subtitle, action, label, index, align="Left", theme="Dark") -%}
|
||||
{%- set align_class = resolve_class({
|
||||
'text-right': align == 'Right',
|
||||
'text-centre': align == 'Center',
|
||||
'text-left': align == 'Left',
|
||||
}) -%}
|
||||
|
||||
{%- set heading_class = resolve_class({
|
||||
'text-white': theme == 'Dark',
|
||||
'': theme == 'Light',
|
||||
}) -%}
|
||||
<div class="carousel-item {{ 'active' if index=='1' else ''}}" style="height: 450px;">
|
||||
<img class="d-block h-100 w-100" style="object-fit: cover;" src="{{ image }}" alt="{{ title }}">
|
||||
{%- if title or subtitle -%}
|
||||
<div class="carousel-body container d-flex {{ align_class }}">
|
||||
<div class="carousel-content align-self-center">
|
||||
{%- if title -%}<h2 class="{{ heading_class }}">{{ title }}</h2>{%- endif -%}
|
||||
{%- if subtitle -%}<p class="text-muted mt-2">{{ subtitle }}</p>{%- endif -%}
|
||||
{%- if action -%}
|
||||
<a href="{{ action }}" class="btn btn-primary mt-3">
|
||||
{{ label }}
|
||||
</a>
|
||||
{%- endif -%}
|
||||
</div>
|
||||
</div>
|
||||
{%- endif -%}
|
||||
</div>
|
||||
{%- endmacro -%}
|
||||
|
||||
<div id="{{ slider_name }}" class="section-carousel carousel slide" data-ride="carousel">
|
||||
{%- if show_indicators -%}
|
||||
<ol class="carousel-indicators">
|
||||
{%- for index in ['1', '2', '3', '4', '5'] -%}
|
||||
{%- if values['slide_' + index + '_image'] -%}
|
||||
<li data-target="#{{ slider_name }}" data-slide-to="{{ frappe.utils.cint(index) - 1 }}" class="{{ 'active' if index=='1' else ''}}"></li>
|
||||
{%- endif -%}
|
||||
{%- endfor -%}
|
||||
</ol>
|
||||
{%- endif -%}
|
||||
<div id="{{ slider_name }}423243" class="carousel-inner">
|
||||
{%- for index in ['1', '2', '3', '4', '5'] -%}
|
||||
{%- set image = values['slide_' + index + '_image'] -%}
|
||||
{%- set title = values['slide_' + index + '_title'] -%}
|
||||
{%- set subtitle = values['slide_' + index + '_subtitle'] -%}
|
||||
{%- set primary_action = values['slide_' + index + '_primary_action'] -%}
|
||||
{%- set primary_action_label = values['slide_' + index + '_primary_action_label'] -%}
|
||||
{%- set align = values['slide_' + index + '_content_align'] -%}
|
||||
{%- set theme = values['slide_' + index + '_theme'] -%}
|
||||
|
||||
{%- if image -%}
|
||||
{{ slide(image, title, subtitle, primary_action, primary_action_label, index, align, theme) }}
|
||||
{%- endif -%}
|
||||
|
||||
{%- endfor -%}
|
||||
</div>
|
||||
{%- if show_controls -%}
|
||||
<a class="carousel-control-prev" href="#{{ slider_name }}" role="button" data-slide="prev">
|
||||
<div class="carousel-control">
|
||||
<svg class="mr-1" width="20" height="20" viewBox="0 0 18 18" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<path d="M11.625 3.75L6.375 9L11.625 14.25" stroke="#4C5A67" stroke-linecap="round" stroke-linejoin="round"/>
|
||||
</svg>
|
||||
</div>
|
||||
<span class="sr-only">Previous</span>
|
||||
</a>
|
||||
<a class="carousel-control-next" href="#{{ slider_name }}" role="button" data-slide="next">
|
||||
<div class="carousel-control">
|
||||
<svg class="ml-1" width="20" height="20" viewBox="0 0 18 18" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<path d="M6.375 14.25L11.625 9L6.375 3.75" stroke="#4C5A67" stroke-linecap="round" stroke-linejoin="round"/>
|
||||
</svg>
|
||||
</div>
|
||||
<span class="sr-only">Next</span>
|
||||
</a>
|
||||
{%- endif -%}
|
||||
</div>
|
||||
|
||||
<script type="text/javascript">
|
||||
$('.carousel').carousel({
|
||||
interval: false,
|
||||
pause: "hover",
|
||||
wrap: true
|
||||
})
|
||||
</script>
|
||||
|
||||
<style>
|
||||
.carousel-control {
|
||||
height: 42px;
|
||||
width: 42px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
background: white;
|
||||
box-shadow: 0px 1px 2px rgba(0, 0, 0, 0.08), 0px 1px 2px 1px rgba(0, 0, 0, 0.06);
|
||||
border-radius: 100px;
|
||||
}
|
||||
|
||||
.carousel-control-prev,
|
||||
.carousel-control-next {
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
.carousel-body {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
}
|
||||
|
||||
.carousel-content {
|
||||
max-width: 400px;
|
||||
}
|
||||
</style>
|
||||
@ -5,35 +5,56 @@
|
||||
"doctype": "Web Template",
|
||||
"fields": [
|
||||
{
|
||||
"__unsaved": 1,
|
||||
"fieldname": "slider_name",
|
||||
"fieldtype": "Data",
|
||||
"label": "Slider Name",
|
||||
"reqd": 1
|
||||
},
|
||||
{
|
||||
"default": "1",
|
||||
"fieldname": "show_indicators",
|
||||
"fieldtype": "Check",
|
||||
"label": "Show Indicators",
|
||||
"reqd": 0
|
||||
},
|
||||
{
|
||||
"default": "1",
|
||||
"fieldname": "show_controls",
|
||||
"fieldtype": "Check",
|
||||
"label": "Show Controls",
|
||||
"reqd": 0
|
||||
},
|
||||
{
|
||||
"fieldname": "slide_1",
|
||||
"fieldtype": "Section Break",
|
||||
"label": "Slide 1",
|
||||
"reqd": 0
|
||||
},
|
||||
{
|
||||
"fieldname": "slide_1_image",
|
||||
"fieldtype": "Attach Image",
|
||||
"label": "Image",
|
||||
"reqd": 0
|
||||
},
|
||||
{
|
||||
"__unsaved": 1,
|
||||
"fieldname": "slide_1_title",
|
||||
"fieldtype": "Data",
|
||||
"label": "Title",
|
||||
"reqd": 0
|
||||
},
|
||||
{
|
||||
"__unsaved": 1,
|
||||
"fieldname": "slide_1_subtitle",
|
||||
"fieldtype": "Data",
|
||||
"fieldtype": "Small Text",
|
||||
"label": "Subtitle",
|
||||
"reqd": 0
|
||||
},
|
||||
{
|
||||
"__unsaved": 1,
|
||||
"fieldname": "slide_1_primary_action_label",
|
||||
"fieldtype": "Data",
|
||||
"label": "Primary Action Label",
|
||||
"reqd": 0
|
||||
},
|
||||
{
|
||||
"__unsaved": 1,
|
||||
"fieldname": "slide_1_primary_action",
|
||||
"fieldtype": "Data",
|
||||
"label": "Primary Action",
|
||||
@ -41,46 +62,73 @@
|
||||
},
|
||||
{
|
||||
"__unsaved": 1,
|
||||
"fieldname": "slide_1_content_align",
|
||||
"fieldtype": "Select",
|
||||
"label": "Content Align",
|
||||
"options": "Left\nCentre\nRight",
|
||||
"reqd": 0
|
||||
},
|
||||
{
|
||||
"__unsaved": 1,
|
||||
"fieldname": "slide_1_theme",
|
||||
"fieldtype": "Select",
|
||||
"label": "Slide Theme",
|
||||
"options": "Dark\nLight",
|
||||
"reqd": 0
|
||||
},
|
||||
{
|
||||
"fieldname": "slide_2",
|
||||
"fieldtype": "Section Break",
|
||||
"label": "Slide 2",
|
||||
"reqd": 0
|
||||
},
|
||||
{
|
||||
"__unsaved": 1,
|
||||
"fieldname": "slide_2_image",
|
||||
"fieldtype": "Attach Image",
|
||||
"label": "Image ",
|
||||
"reqd": 0
|
||||
},
|
||||
{
|
||||
"__unsaved": 1,
|
||||
"fieldname": "slide_2_title",
|
||||
"fieldtype": "Data",
|
||||
"label": "Title ",
|
||||
"reqd": 0
|
||||
},
|
||||
{
|
||||
"__unsaved": 1,
|
||||
"fieldname": "slide_2_subtitle",
|
||||
"fieldtype": "Data",
|
||||
"fieldtype": "Small Text",
|
||||
"label": "Subtitle ",
|
||||
"reqd": 0
|
||||
},
|
||||
{
|
||||
"__unsaved": 1,
|
||||
"fieldname": "slide_2_primary_action_label",
|
||||
"fieldtype": "Data",
|
||||
"label": "Primary Action Label ",
|
||||
"reqd": 0
|
||||
},
|
||||
{
|
||||
"__unsaved": 1,
|
||||
"fieldname": "slide_2_primary_action",
|
||||
"fieldtype": "Data",
|
||||
"label": "Primary Action ",
|
||||
"reqd": 0
|
||||
},
|
||||
{
|
||||
"__unsaved": 1,
|
||||
"default": "Left",
|
||||
"fieldname": "slide_2_content_align",
|
||||
"fieldtype": "Select",
|
||||
"label": "Content Align",
|
||||
"options": "Left\nCentre\nRight",
|
||||
"reqd": 0
|
||||
},
|
||||
{
|
||||
"__unsaved": 1,
|
||||
"fieldname": "slide_2_theme",
|
||||
"fieldtype": "Select",
|
||||
"label": "Slide Theme",
|
||||
"options": "Dark\nLight",
|
||||
"reqd": 0
|
||||
},
|
||||
{
|
||||
"__islocal": 1,
|
||||
"__unsaved": 1,
|
||||
@ -94,7 +142,7 @@
|
||||
"__unsaved": 1,
|
||||
"fieldname": "slide_3_image",
|
||||
"fieldtype": "Attach Image",
|
||||
"label": "Image ",
|
||||
"label": "Image",
|
||||
"reqd": 0
|
||||
},
|
||||
{
|
||||
@ -102,15 +150,15 @@
|
||||
"__unsaved": 1,
|
||||
"fieldname": "slide_3_title",
|
||||
"fieldtype": "Data",
|
||||
"label": "Title ",
|
||||
"label": "Title",
|
||||
"reqd": 0
|
||||
},
|
||||
{
|
||||
"__islocal": 1,
|
||||
"__unsaved": 1,
|
||||
"fieldname": "slide_3_subtitle",
|
||||
"fieldtype": "Data",
|
||||
"label": "Subtitle ",
|
||||
"fieldtype": "Small Text",
|
||||
"label": "Subtitle",
|
||||
"reqd": 0
|
||||
},
|
||||
{
|
||||
@ -118,7 +166,7 @@
|
||||
"__unsaved": 1,
|
||||
"fieldname": "slide_3_primary_action_label",
|
||||
"fieldtype": "Data",
|
||||
"label": "Primary Action Label ",
|
||||
"label": "Primary Action Label",
|
||||
"reqd": 0
|
||||
},
|
||||
{
|
||||
@ -126,12 +174,156 @@
|
||||
"__unsaved": 1,
|
||||
"fieldname": "slide_3_primary_action",
|
||||
"fieldtype": "Data",
|
||||
"label": "Primary Action ",
|
||||
"label": "Primary Action",
|
||||
"reqd": 0
|
||||
},
|
||||
{
|
||||
"__islocal": 1,
|
||||
"__unsaved": 1,
|
||||
"fieldname": "slide_3_content_align",
|
||||
"fieldtype": "Select",
|
||||
"label": "Content Align",
|
||||
"reqd": 0
|
||||
},
|
||||
{
|
||||
"__islocal": 1,
|
||||
"__unsaved": 1,
|
||||
"fieldname": "slide_3_theme",
|
||||
"fieldtype": "Select",
|
||||
"label": "Slide Theme",
|
||||
"reqd": 0
|
||||
},
|
||||
{
|
||||
"__islocal": 1,
|
||||
"__unsaved": 1,
|
||||
"fieldname": "slide_4",
|
||||
"fieldtype": "Section Break",
|
||||
"label": "Slide 4",
|
||||
"reqd": 0
|
||||
},
|
||||
{
|
||||
"__islocal": 1,
|
||||
"__unsaved": 1,
|
||||
"fieldname": "slide_4_image",
|
||||
"fieldtype": "Attach Image",
|
||||
"label": "Image",
|
||||
"reqd": 0
|
||||
},
|
||||
{
|
||||
"__islocal": 1,
|
||||
"__unsaved": 1,
|
||||
"fieldname": "slide_4_title",
|
||||
"fieldtype": "Data",
|
||||
"label": "Title",
|
||||
"reqd": 0
|
||||
},
|
||||
{
|
||||
"__islocal": 1,
|
||||
"__unsaved": 1,
|
||||
"fieldname": "slide_4_subtitle",
|
||||
"fieldtype": "Small Text",
|
||||
"label": "Subtitle",
|
||||
"reqd": 0
|
||||
},
|
||||
{
|
||||
"__islocal": 1,
|
||||
"__unsaved": 1,
|
||||
"fieldname": "slide_4_primary_action_label",
|
||||
"fieldtype": "Data",
|
||||
"label": "Primary Action Label",
|
||||
"reqd": 0
|
||||
},
|
||||
{
|
||||
"__islocal": 1,
|
||||
"__unsaved": 1,
|
||||
"fieldname": "slide_4_primary_action",
|
||||
"fieldtype": "Data",
|
||||
"label": "Primary Action",
|
||||
"reqd": 0
|
||||
},
|
||||
{
|
||||
"__islocal": 1,
|
||||
"__unsaved": 1,
|
||||
"fieldname": "slide_4_content_align",
|
||||
"fieldtype": "Select",
|
||||
"label": "Content Align",
|
||||
"reqd": 0
|
||||
},
|
||||
{
|
||||
"__islocal": 1,
|
||||
"__unsaved": 1,
|
||||
"fieldname": "slide_4_theme",
|
||||
"fieldtype": "Select",
|
||||
"label": "Slide Theme",
|
||||
"reqd": 0
|
||||
},
|
||||
{
|
||||
"__islocal": 1,
|
||||
"__unsaved": 1,
|
||||
"fieldname": "slide_5",
|
||||
"fieldtype": "Section Break",
|
||||
"label": "Slide 5",
|
||||
"reqd": 0
|
||||
},
|
||||
{
|
||||
"__islocal": 1,
|
||||
"__unsaved": 1,
|
||||
"fieldname": "slide_5_image",
|
||||
"fieldtype": "Attach Image",
|
||||
"label": "Image",
|
||||
"reqd": 0
|
||||
},
|
||||
{
|
||||
"__islocal": 1,
|
||||
"__unsaved": 1,
|
||||
"fieldname": "slide_5_title",
|
||||
"fieldtype": "Data",
|
||||
"label": "Title",
|
||||
"reqd": 0
|
||||
},
|
||||
{
|
||||
"__islocal": 1,
|
||||
"__unsaved": 1,
|
||||
"fieldname": "slide_5_subtitle",
|
||||
"fieldtype": "Small Text",
|
||||
"label": "Subtitle",
|
||||
"reqd": 0
|
||||
},
|
||||
{
|
||||
"__islocal": 1,
|
||||
"__unsaved": 1,
|
||||
"fieldname": "slide_5_primary_action_label",
|
||||
"fieldtype": "Data",
|
||||
"label": "Primary Action Label",
|
||||
"reqd": 0
|
||||
},
|
||||
{
|
||||
"__islocal": 1,
|
||||
"__unsaved": 1,
|
||||
"fieldname": "slide_5_primary_action",
|
||||
"fieldtype": "Data",
|
||||
"label": "Primary Action",
|
||||
"reqd": 0
|
||||
},
|
||||
{
|
||||
"__islocal": 1,
|
||||
"__unsaved": 1,
|
||||
"fieldname": "slide_5_content_align",
|
||||
"fieldtype": "Select",
|
||||
"label": "Content Align",
|
||||
"reqd": 0
|
||||
},
|
||||
{
|
||||
"__islocal": 1,
|
||||
"__unsaved": 1,
|
||||
"fieldname": "slide_5_theme",
|
||||
"fieldtype": "Select",
|
||||
"label": "Slide Theme",
|
||||
"reqd": 0
|
||||
}
|
||||
],
|
||||
"idx": 0,
|
||||
"modified": "2020-11-17 15:23:48.584868",
|
||||
"modified": "2020-11-18 17:09:31.323198",
|
||||
"modified_by": "Administrator",
|
||||
"module": "Shopping Cart",
|
||||
"name": "Hero Slider",
|
||||
|
||||
Loading…
Reference in New Issue
Block a user