<?php
/**
 * Template Part for displaying banner section in homepage
 *
 * @link https://developer.wordpress.org/themes/basics/template-hierarchy/
 *
 * @package NDesign
 */

$ndesign_home_sliders = get_theme_mod( 'slides' ); ?>
<?php if ( get_theme_mod( 'slides' ) ) : ?>
	<section id="home" class="page-section">
		<div class="main-banner swiper-container">
			<div class="swiper-wrapper">
				<?php foreach ( $ndesign_home_sliders as $ndesign_home_slider ) : ?>
					<div class="swiper-slide">
						<div class="banner-content">
							<!-- Main Banner Image Block Start -->
							<img src="<?php echo esc_url(wp_get_attachment_url( $ndesign_home_slider['background'] )); ?>" class="w-100">
							<!-- Main Banner Image Block End -->
							<!-- Main banner caption start -->
							<div class="main-banner-caption d-flex align-items-center">
								<div class="container">
									<div class="row">
										<div class="col-12 col-lg-6" style="color:<?php echo esc_attr( $ndesign_home_slider['textcolor'] ); ?>">
											<!-- Banner Subtitle start -->
											<h4 class="banner-subtitle" data-swiper-parallax="-100">
												<?php echo esc_html(trim( $ndesign_home_slider['subtitle'] ),'ndesign'); ?>
											</h4>
											<!-- Banner Subtitle end -->
											<!-- Banner Title Start -->
											<h2 class="banner-title" data-swiper-parallax="-200">
												<?php echo esc_html(trim( $ndesign_home_slider['title'] ),'ndesign'); ?>
											</h2>
											<!-- Banner Title End -->
											<!-- Banner Description Start -->
											<div class="banner-description mt-3" data-swiper-parallax="-300" >
												<?php echo esc_html(trim( $ndesign_home_slider['description'] ),'ndesign'); ?>
											</div>
											<!-- Banner Description End -->
										</div>
									</div>
								</div>
							</div>
							<!-- Main banner caption end -->
						</div>
					</div>
				<?php endforeach; ?>
			</div>
			<!-- Banner Navigation Start -->
			<div class="swiper-pagination"></div>
			<!-- Banner Navigation End -->
		</div>
	</div><!-- #primary -->
	</section>
<?php endif ?>
<!-- Banner Section End -->
