carousel

function magazine_plus_render_featured_carousel( $carousel_details = array() ) {

		if ( empty( $carousel_details ) ) {
			return;
		}

		$featured_carousel_enable_autoplay = magazine_plus_get_option( 'featured_carousel_enable_autoplay' );
		$featured_carousel_transition_delay = magazine_plus_get_option( 'featured_carousel_transition_delay' );

		$carousel_args = array(
			'slidesToShow'   => 4,
			'slidesToScroll' => 1,
			'dots'           => false,
			'prevArrow'      => '<span data-role="none" class="slick-prev" tabindex="0"><i class="fa fa-angle-left" aria-hidden="true"></i></span>',
			'nextArrow'      => '<span data-role="none" class="slick-next" tabindex="0"><i class="fa fa-angle-right" aria-hidden="true"></i></span>',
			'responsive'     => array(
				array(
					'breakpoint' => 1024,
					'settings'   => array(
						'slidesToShow' => 3,
						),
					),
				array(
					'breakpoint' => 768,
					'settings'   => array(
						'slidesToShow' => 2,
						),
					),
				array(
					'breakpoint' => 480,
					'settings'   => array(
						'slidesToShow' => 1,
						),
					),
				),
			);

		if ( true === $featured_carousel_enable_autoplay ) {
			$carousel_args['autoplay']      = true;
			$carousel_args['autoplaySpeed'] = 1000 * absint( $featured_carousel_transition_delay );
		}

		$carousel_args_encoded = wp_json_encode( $carousel_args );
		?>

		<div id="featured-carousel">
			<div class="container">
				<div class="featured-carousel-wrapper" data-slick='<?php echo $carousel_args_encoded; ?>'>
					<?php foreach ( $carousel_details as $item ) : ?>

						<div class="featured-carousel-item">
							<div class="featured-carousel-inner">
							<div class="featured-carousel-item-thumb">
									<?php if ( ! empty( $item['images'] ) ) : ?>
									<div class="featured-carousel-item-thumb-inner">
										<a href="<?php echo esc_url( $item['url'] ); ?>">
											<img src="<?php echo esc_url( $item['images'][0] ); ?>" alt="" />
										</a>
									</div><!-- .featured-carousel-item-thumb-inner -->

									<?php endif; ?>
								<h3 class="featured-carousel-item-title"><a href="<?php echo esc_url( $item['url'] ); ?>"><?php echo esc_html( $item['title'] ); ?></a></h3>

								<div class="featured-carousel-item-meta">
									<?php if ( ! empty( $item['date'] ) ) : ?>
										<span class="date"><?php echo esc_html( $item['date'] ); ?></span>
									<?php endif; ?>
									<?php if ( isset( $item['categories'] ) && ! empty( $item['categories'] ) ) : ?>
										<span class="categories">
										<?php foreach ( $item['categories'] as $key => $cat ) : ?>
											<a href="<?php echo esc_url( $cat['url'] ); ?>"><?php echo esc_html( $cat['name'] ); ?></a>
										<?php endforeach; ?>
										</span>
									<?php endif; ?>

								</div>
								</div>
							</div><!-- .featured-carousel-item-thumb -->
						</div><!-- .featured-carousel-item -->

					<?php endforeach; ?>

				</div><!-- .featured-carousel-wrapper -->
			</div><!-- .container -->
		</div><!-- #featured-carousel -->
		<?php
	}