From 70768fe5874cf2f2031e1f0f10ba9e9db6cf98a9 Mon Sep 17 00:00:00 2001 From: Dinesh Salunke <dineshsalunke@consultbop.com> Date: Tue, 7 Nov 2023 12:04:16 +0530 Subject: [PATCH] refactor: update the styling for the image slider --- .../views/templates/hook/slider.tpl | 26 +++++-------------- 1 file changed, 6 insertions(+), 20 deletions(-) diff --git a/modules/ps_imageslider/views/templates/hook/slider.tpl b/modules/ps_imageslider/views/templates/hook/slider.tpl index c670467..55775ad 100644 --- a/modules/ps_imageslider/views/templates/hook/slider.tpl +++ b/modules/ps_imageslider/views/templates/hook/slider.tpl @@ -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"></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"></i> - </span> - <span class="sr-only">{l s='Next' d='Shop.Theme.Global'}</span> - </a> - </div> </div> {/if}