crosterOverWrites/front/slider-whmcs.tpl

{if $block.sliderStyle == "1"}

<!--Clean Slider-->
<section class="cros-Slider">	
	<div class="owl-carousel effects td-slider" id="Slider-{$blockkey}">
		{if count($block.table) > 0}
		{foreach from=$block.table item=$ditem key=$kk}
		<div class="item slides td-item-slides">
			<div class="slide-bg bg-opacity td-slider-bg" {if {$ditem['Slider Image']} != ""}style="background-image:url('{$ditem['Slider Image']}');"{/if}>
				<div class="hero-outer td-silder-hero-outer">
					<div class="hgroup td-silder-hgroup">
						<div class="container td-silder-container">
						    {if count($block.table) <= 1}
							
							<div class="row">
								<div class="col-md-9">
									<h1><mark>{$ditem['SubTitle']}</mark></h1>        
									<h2>{$ditem['Title']}</h2>
									
									{if $ditem['Description'] != ""}
										{$ditem['Description']}
									{/if}
									
									{if $ditem['Link'] != ""}					
									<div class="buttons">
										<a href="{$ditem['Link']}" class="btn btn-primary btn-lg">{if $block.btntext}{$block.btntext}{else}View Plans & Features{/if}</a>
									</div>
									{/if}
								</div>
							</div>
							
							
						    {else}
							<!-- <img class="td-slider-company-logo" src="/templates/croster/assets/images/logo-color-small.png" style="border: 1px solid red; padding: 20px; position: absolute; right:10px; top:70px; width:20vw; height: auto"/> -->
							
							<div class="h1 cros-animation td-slider-h1" data-delay-transtion="1">{$ditem['SubTitle']}</div>        
							<div class="h3 cros-animation td-slider-h3" data-delay-transtion="2">{$ditem['Title']}</div>
						
							{if $ditem['Description'] != ""}
								<div class="cros-animation td-slider-description" data-delay-transtion="3">
									{$ditem['Description']}
								</div>
							{/if}
							
							
							{if $ditem['Link'] != ""}					
							    <div class="buttons cros-animation td-slider-buttons" data-delay-transtion="4">
								<a href="{$ditem['Link']}" class="btn btn-transparent btn-lg td-slider-button">{if $block.btntext}{$block.btntext}{else}View Plans & Features{/if}</a>
							    </div>
							{/if}
							

						    {/if}
						</div>	
					</div>
				</div>
			</div>
		</div>
		{/foreach}
		{/if}		
	</div>
</section>

<script>
    jQuery(document).ready(function () {
		jQuery("#Slider-{$blockkey}").owlCarousel({
		{if count($block.table) <= 1}
			loop: false,
			autoplay: false,
            mouseDrag: false,
			touchDrag: false,
			autoplayHoverPause:false,
		{else}
			loop: {if $block.autoplay}true{else}false{/if},
			autoplay:{if $block.autoplay}true{else}false{/if},
			autoplayHoverPause:true,
		{/if}
			
			items: 1
				
		});
    });
</script>


{else}

{if $blockkey <= "1"}
<section class="mass-head">
{/if}
	<{if $blockkey <= "1"}div{else}section{/if} class="hero-bg-wrap" {if $block.image != ""}style="background-image:url('{$block.image}');"{/if}>
		<div class="container">
			<div class="row{if $block.code != ""} d-flex justify-content-between{/if}">
				<div class="bg-shape-poly col-lg-9">
					<div class="carousel tc-carousel slide" data-interval="{if $block.autoplay}5000{else}false{/if}" data-ride="carousel" id="TM-home-{$blockkey}">
						<div class="carousel-inner">
							{if count($block.table) > 0}
							{foreach from=$block.table item=$ditem key=$kk}
							<div class="carousel-item item px-2 py-4{if $kk eq "0"} active{/if}">
								{if count($block.table) > 1}
								<div class="h1">{$ditem['SubTitle']}</div>
								<div class="h2">{$ditem['Title']}</div>
								{else}
								<h1>{$ditem['SubTitle']}</h1>
								<h2>{$ditem['Title']}</h2>								
								{/if}
								{if $ditem['Description'] != ""}
									{$ditem['Description']}
								{/if}
								{if $ditem['Link'] != ""}
								<div>
									<a href="{$ditem['Link']}" class="btn btn-primary">{if $block.btntext}{$block.btntext}{else}View Plans & Features{/if}</a>
								</div>
								{/if}
							</div>
							{/foreach}
							{/if}                            
						</div>
						{if count($block.table) > 1}
						<ol class="carousel-indicators left">                        
						{foreach from=$block.table item=$ditem key=$kk}
							<li data-target="#TM-home-{$blockkey}" data-slide-to="{$kk}" class=" {if $kk eq "0"}active{/if}"></li>
						{/foreach}
						</ol>
						{/if}
					</div>
				</div>
			</div>
		</div>
	</{if $blockkey <= "1"}div{else}section{/if}>
{if $blockkey <= "1"}
</section>
{/if}


{/if}