fix: Creating unique hash for slider id instead of slider name

This commit is contained in:
Shariq Ansari 2021-09-20 20:52:08 +05:30
parent b0d970001a
commit 3e8e6ac4e2

View File

@ -27,12 +27,14 @@
</div>
{%- endmacro -%}
<div id="{{ slider_name }}" class="section-carousel carousel slide" data-ride="carousel">
{%- set hero_slider_id = 'id-' + frappe.utils.generate_hash('HeroSlider', 12) -%}
<div id="{{ hero_slider_id }}" 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>
<li data-target="#{{ hero_slider_id }}" data-slide-to="{{ frappe.utils.cint(index) - 1 }}" class="{{ 'active' if index=='1' else ''}}"></li>
{%- endif -%}
{%- endfor -%}
</ol>
@ -54,7 +56,7 @@
{%- endfor -%}
</div>
{%- if show_controls -%}
<a class="carousel-control-prev" href="#{{ slider_name }}" role="button" data-slide="prev">
<a class="carousel-control-prev" href="#{{ hero_slider_id }}" 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"/>
@ -62,7 +64,7 @@
</div>
<span class="sr-only">Previous</span>
</a>
<a class="carousel-control-next" href="#{{ slider_name }}" role="button" data-slide="next">
<a class="carousel-control-next" href="#{{ hero_slider_id }}" 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"/>
@ -73,13 +75,12 @@
{%- endif -%}
</div>
<script type="text/javascript">
$('.carousel').carousel({
interval: false,
pause: "hover",
wrap: true
})
<script>
frappe.ready(function () {
$('.carousel').carousel({
interval: false,
pause: "hover",
wrap: true
})
});
</script>
<style>
</style>