mohitj
/
theme-elegance
forked from brooksbingham/theme-elegance
1
0
Fork 0
Code Pull Requests Activity

refactor: update the styling for the image slider

pagebuilder
Dinesh Salunke 2023-11-07 12:04:16 +05:30
parent 1147c59fb7
commit 70768fe587
1 changed files with 6 additions and 20 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

26
modules/ps_imageslider/views/templates/hook/slider.tpl
View File

@ -24,17 +24,17 @@
*}
{if $homeslider.slides}
<div id="carousel" data-ride="carousel" class="carousel slide" data-interval="{$homeslider.speed}" data-wrap="{(string)$homeslider.wrap}" data-pause="{$homeslider.pause}">
<div id="carousel" data-ride="carousel" class="carousel slide mb-16" data-interval="{$homeslider.speed}" data-wrap="{(string)$homeslider.wrap}" data-pause="{$homeslider.pause}">
<ul class="carousel-inner" role="listbox">
{foreach from=$homeslider.slides item=slide name='homeslider'}
<li class="carousel-item {if $smarty.foreach.homeslider.first}active{/if}" role="option" aria-hidden="{if $smarty.foreach.homeslider.first}false{else}true{/if}">
<a href="{$slide.url}">
<figure class="relative">
<img src="{$slide.image_url}" alt="{$slide.legend|escape}">
<figure class="relative h-screen bg-gray-50">
<img class="w-full h-full object-contain md:object-cover" src="{$slide.image_url}" alt="{$slide.legend|escape}">
{if $slide.title || $slide.description}
<figcaption class="caption absolute right-0 bottom-0">
<h2 class="display-1 text-uppercase">{$slide.title}</h2>
<div class="caption-description">{$slide.description nofilter}</div>
<figcaption class="caption absolute left-16 md:left-1/2 bottom-0 top-0 right-16 flex flex-col justify-center">
<h2 class="text-xl md:text-2xl lg:text-4xl xl:text-6xl font-bold mb-4">{$slide.title}</h2>
<div class="text-sm md:text-base font-medium">{$slide.description nofilter}</div>
</figcaption>
{/if}
</figure>
@ -42,19 +42,5 @@
</li>
{/foreach}
</ul>
<div class="direction" aria-label="{l s='Carousel buttons' d='Shop.Theme.Global'}">
<a class="left carousel-control" href="#carousel" role="button" data-slide="prev">
<span class="icon-prev hidden-xs" aria-hidden="true">
<i class="material-icons">&#xE5CB;</i>
</span>
<span class="sr-only">{l s='Previous' d='Shop.Theme.Global'}</span>
</a>
<a class="right carousel-control" href="#carousel" role="button" data-slide="next">
<span class="icon-next" aria-hidden="true">
<i class="material-icons">&#xE5CC;</i>
</span>
<span class="sr-only">{l s='Next' d='Shop.Theme.Global'}</span>
</a>
</div>
</div>
{/if}