Youtube Movie & TV Page Slider

functions.php

<?php

// reference
// https://www.youtube.com/feed/storefront

function custom_swiper_slider_shortcode() {
	ob_start();

	// Fetch posts from the 'giveawayslider' custom post type
	$args = [
		'post_type' => 'giveawayslider',
		'posts_per_page' => -1,
	];
	$slider_posts = new WP_Query($args);

	if ($slider_posts->have_posts()) :
?>
<link
	  rel="stylesheet"
	  href="https://unpkg.com/swiper/swiper-bundle.min.css"
	  />
<style>
	.giveaway-slider-container {
		width: 80%;
		margin: 50px auto;
		border-radius: 15px;
		overflow: hidden;
		position: relative;
	}

	.giveaway-slider-container .swiper-slide {
		display: flex;
		align-items: center;
		justify-content: center;
		position: relative;
		height: 400px;
	}

	.slide-content {
		position: absolute;
		top: 20px;
		left: 20px;
		z-index: 2;
	}

	.slide-content h1 {
		font-size: 36px;
		margin: 0;
	}

	.slide-content p {
		font-size: 16px;
		margin: 10px 0;
	}

	.slide-content button {
		padding: 10px 20px;
		border: none;
		background-color: #fff;
		color: #000;
		font-size: 16px;
		border-radius: 5px;
		cursor: pointer;
	}

	.giveaway-slider-container .swiper-thumbs {
		position: absolute;
		bottom: 10px;
		left: 20px;
		display: flex;
		gap: 10px;
		z-index: 3;
		width:50%;
	}

	.swiper-thumbs .swiper-slide {
		width: 80px;
		height: 50px;
		opacity: 0.5;
		cursor: pointer;
		position: relative;
	}

	.swiper-thumbs .swiper-slide-thumb-active {
		opacity: 1;
	}
	.swiper-thumbs .swiper-slide .progress-bar {
		opacity:0;
	}
	.swiper-thumbs .swiper-slide-thumb-active .progress-bar {
		opacity:1;				
	}
	.swiper-thumbs .progress-bar {
		position: absolute;
		bottom: 0;
		left: 0;
		height: 4px;
		background-color: #fff;
		width: 0;
		transition: width 5s linear;
	}

	.main-image {
		width: 100%;
		height: 100%;
		object-fit: cover;
	}
</style>
<div class="giveaway-slider-container">
	<!-- Main Slider -->
	<div class="swiper main-slider">
		<div class="swiper-wrapper">
			<?php while ($slider_posts->have_posts()) : $slider_posts->the_post(); ?>
			<div class="swiper-slide">
				<div class="slide-content">
					<h1><?php the_title(); ?></h1>
					<p><?php the_excerpt(); ?></p>
					<button>Pay to Watch</button>
				</div>
				<img
					 src="<?php echo get_the_post_thumbnail_url(get_the_ID(), 'large'); ?>"
					 alt="<?php the_title(); ?>"
					 class="main-image"
					 />
			</div>
			<?php endwhile; ?>
		</div>
	</div>

	<!-- Thumbnails -->
	<div class="swiper swiper-thumbs">
		<div class="swiper-wrapper">
			<?php while ($slider_posts->have_posts()) : $slider_posts->the_post(); ?>
			<div class="swiper-slide">
				<img
					 src="<?php echo get_the_post_thumbnail_url(get_the_ID(), 'thumbnail'); ?>"
					 alt="<?php the_title(); ?>"
					 />
				<div class="progress-bar"></div>
			</div>
			<?php endwhile; ?>
		</div>
	</div>
</div>

<script src="https://unpkg.com/swiper/swiper-bundle.min.js"></script>
<script>
	const mainSlider = new Swiper('.main-slider', {
		spaceBetween: 10,
		autoplay: {
			delay: 5000,
			disableOnInteraction: false,
		},
		thumbs: {
			swiper: {
				el: '.swiper-thumbs',
				slidesPerView: 4,
			},
		},
	});

	const thumbnailSlides = document.querySelectorAll('.swiper-thumbs .swiper-slide');
	let activeProgressBar;

	mainSlider.on('slideChange', () => {
		if (activeProgressBar) {
			activeProgressBar.style.width = '0';
		}

		const activeSlide = document.querySelector('.swiper-thumbs .swiper-slide-thumb-active .progress-bar');
		if (activeSlide) {
			activeSlide.style.width = '100%';
			activeSlide.style.transition = 'width 5s linear';
			activeProgressBar = activeSlide;
		}
	});

	mainSlider.emit('slideChange'); // Initialize progress bar on load
</script>
<?php
	wp_reset_postdata();
	else :
	echo '<p>No slides found.</p>';
	endif;

	return ob_get_clean();
}
add_shortcode('custom_swiper_slider', 'custom_swiper_slider_shortcode');