<section class="carousel-wrap">
<div class="container">
<div class="row">
<?php
$id=862; //homeslider id
$post = get_post($id);
$content = apply_filters('the_content', $post->post_content);
//echo $content;
?>
<div id="Topcarousel" class="carousel slide carousel-home <?php $anima = get_field('slider_animation');if($anima == 'Fade'){ echo 'carousel-fade'; }else{}?>" data-ride="carousel" data-interval="<?php echo get_field('slider_slide_duration');?>">
<ol class="carousel-indicators">
<?php
$image2 = get_field('slider_image_2');
if( !empty($image2) ): ?>
<!-- <li data-target="#Topcarousel" data-slide-to="0" class="active"></li>
<li data-target="#Topcarousel" data-slide-to="1"></li> -->
<?php endif; ?>
<?php
$image3 = get_field('slider_image_3');
if( !empty($image3) ): ?>
<!-- <li data-target="#Topcarousel" data-slide-to="2"></li> -->
<?php endif; ?>
<?php
$image4 = get_field('slider_image_4');
if( !empty($image4) ): ?>
<!-- <li data-target="#Topcarousel" data-slide-to="3"></li> -->
<?php endif; ?>
<?php
$image5 = get_field('slider_image_5');
if( !empty($image5) ): ?>
<!-- <li data-target="#Topcarousel" data-slide-to="4"></li> -->
<?php endif; ?>
</ol>
<div class="carousel-inner">
<?php
$image = get_field('slider_image');
if( !empty($image) ): ?>
<div class="carousel-item imgLiquidFill active">
<div class="car-content">
<img class="d-block w-100" src="<?php echo $image; ?>" alt="<?php echo get_the_title($id); ?>">
<div class="carousel-caption d-none d-md-block <?php if(get_field('slider_headline_position') == "center"){ echo 'carousel-caption-center';}elseif(get_field('slider_headline_position') == "right"){ echo "carousel-caption-right";}?>">
<h2 class="<?php echo strtolower(str_replace(' ','-',get_field('slider_heading_type')));?>"><?php echo get_field('slider_title')?></h2>
<h5 class="<?php echo strtolower(str_replace(' ','-',get_field('slider_desc_type')));?>"><?php echo get_field('slider_short_desc')?></h5>
<?php if(get_field('slider_link')):?>
<a href="<?php echo get_field('slider_link');?>" class="btn btn-outline-primary"><?php echo get_field('slider_link_title') ?></a>
<?php endif;?>
</div>
</div>
</div>
<?php endif; ?>
<?php
$image = get_field('slider_image_2');
if( !empty($image) ): ?>
<div class="carousel-item imgLiquidFill">
<div class="car-content">
<img class="d-block w-100" src="<?php echo $image; ?>" alt="<?php echo get_the_title($id); ?>">
<div class="carousel-caption d-none d-md-block <?php if(get_field('slider_headline_position_2') == "center"){ echo 'carousel-caption-center';}elseif(get_field('slider_headline_position_2') == "right"){ echo "carousel-caption-right";}?>">
<h2 class="<?php echo strtolower(str_replace(' ','-',get_field('slider_heading_type_2')));?>"><?php echo get_field('slider_title_2')?></h2>
<h5 class="<?php echo strtolower(str_replace(' ','-',get_field('slider_desc_type_2')));?>"><?php echo get_field('slider_short_desc_2')?></h5>
<?php if(get_field('slider_link_2')):?>
<a href="<?php echo get_field('slider_link_2');?>" class="btn btn-outline-primary"><?php echo get_field('slider_link_title_2') ?></a>
<?php endif;?>
</div>
</div>
</div>
<?php endif; ?>
<?php
$image = get_field('slider_image_3');
if( !empty($image) ): ?>
<div class="carousel-item imgLiquidFill">
<div class="car-content">
<img class="d-block w-100" src="<?php echo $image; ?>" alt="<?php echo get_the_title($id); ?>">
<div class="carousel-caption d-none d-md-block <?php if(get_field('slider_headline_position_3') == "center"){ echo 'carousel-caption-center';}elseif(get_field('slider_headline_position_3') == "right"){ echo "carousel-caption-right";}?>">
<h2 class="<?php echo strtolower(str_replace(' ','-',get_field('slider_heading_type_3')));?>"><?php echo get_field('slider_title_3')?></h2>
<h5 class="<?php echo strtolower(str_replace(' ','-',get_field('sslider_desc_type_3')));?>"><?php echo get_field('slider_short_desc_3')?></h5>
<?php if(get_field('slider_link_3')):?>
<a href="<?php echo get_field('slider_link_3');?>" class="btn btn-outline-primary"><?php echo get_field('slider_link_title_3') ?></a>
<?php endif;?>
</div>
</div>
</div>
<?php endif; ?>
<?php
$image = get_field('slider_image_4');
if( !empty($image) ): ?>
<div class="carousel-item imgLiquidFill">
<div class="car-content">
<img class="d-block w-100" src="<?php echo $image; ?>" alt="<?php echo get_the_title($id); ?>">
<div class="carousel-caption d-none d-md-block <?php if(get_field('slider_headline_position_4') == "center"){ echo 'carousel-caption-center';}elseif(get_field('slider_headline_position_4') == "right"){ echo "carousel-caption-right";}?>">
<h2 class="<?php echo strtolower(str_replace(' ','-',get_field('slider_heading_type_4')));?>"><?php echo get_field('slider_title_4')?></h2>
<h5 class="<?php echo strtolower(str_replace(' ','-',get_field('slider_desc_type_4')));?>"><?php echo get_field('slider_short_desc_4')?></h5>
<?php if(get_field('slider_link_4')):?>
<a href="<?php echo get_field('slider_link_4');?>" class="btn btn-outline-primary"><?php echo get_field('slider_link_title_4') ?></a>
<?php endif;?>
</div>
</div>
</div>
<?php endif; ?>
<?php
$image = get_field('slider_image_5');
if( !empty($image) ): ?>
<div class="carousel-item imgLiquidFill">
<div class="car-content">
<img class="d-block w-100" src="<?php echo $image; ?>" alt="<?php echo get_the_title($id); ?>">
<div class="carousel-caption d-none d-md-block <?php if(get_field('slider_headline_position_5') == "center"){ echo 'carousel-caption-center';}elseif(get_field('slider_headline_position_5') == "right"){ echo "carousel-caption-right";}?>">
<h2 class="<?php echo strtolower(str_replace(' ','-',get_field('slider_heading_type_5')));?>"><?php echo get_field('slider_title_5')?></h2>
<h5 class="<?php echo strtolower(str_replace(' ','-',get_field('slider_desc_type_5')));?>"><?php echo get_field('slider_short_desc_5')?></h5>
<?php if(get_field('slider_link_5')):?>
<a href="<?php echo get_field('slider_link_5');?>" class="btn btn-outline-primary"><?php echo get_field('slider_link_title_5') ?></a>
<?php endif;?>
</div>
</div>
</div>
<?php endif; ?>
</div>
<?php
$image = get_field('slider_image');
$image2 = get_field('slider_image_2');
if( !empty($image) && !empty($image2)):?>
<a class="carousel-control-prev" href="#Topcarousel" role="button" data-slide="prev">
<span class="carousel-control-prev-icon" aria-hidden="true"></span>
<span class="sr-only">Previous</span>
</a>
<a class="carousel-control-next" href="#Topcarousel" role="button" data-slide="next">
<span class="carousel-control-next-icon" aria-hidden="true"></span>
<span class="sr-only">Next</span>
</a>
<?php endif; ?>
</div>
</div>
</div>
</section>
description:
Used in the pages as hero banner
usage:
$id=862; //homeslider id
indicate that 862 is the slider id, you can update the slider content here http://webtttest.southeastasia.cloudapp.azure.com/wp-admin/post.php?post=862&action=edit