1. Home
  2. Docs
  3. Front Page (page-home.php)
  4. Carousel/Hero Banner
  5. Carousel Scripts

Carousel Scripts

<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

Was this article helpful to you? Yes No

How can we help?

Leave a Reply

Your email address will not be published. Required fields are marked *