Slider met lightbox

echo "<link rel='stylesheet' href='";
bloginfo('template_directory');
echo "/dias.css' media='screen' />";

echo "<section class='mt mt_m br br_l'>";
	echo "<div class='slider slider5'>";

		$args = array ( 'posts_per_page' => -1, 'cat' => 5, 'orderby' => 'date', 'order' => 'ASC' );
		$myposts = get_posts( $args );
		
		foreach( $myposts as $post ) :	setup_postdata($post);

		echo "<div><div class='contour'>";
		echo "<figure class='carlb of-cv'><img loading='lazy' src='";
		the_post_thumbnail_url( 'bericht' );
		echo "' data-caption='";
		the_title();
		echo "' alt='";
		the_title(); 
		echo "' /></figure>";
		echo "</div></div>";
							  
		endforeach; 
	          
	echo "</div>";
echo "</section>";

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.9.0/slick.min.js"></script>

<script src="<?php bloginfo('template_directory'); ?>/js/carrousel.js"></script>
<script src="<?php bloginfo('template_directory'); ?>/js/carrousellightbox.js"></script>

<script>
$('.slider5').each(function() {
	var slider = $(this);
	slider.slick({
		arrows: true,
		dots: false,
		infinite: true,
		autoplay: false,
		adaptiveHeight: true,
	});
	
	var sLightbox = $(this);
	sLightbox.slickLightbox({
		src: 'src',
		itemSelector: '.carlb img',
		lazy: true,
		useHistoryApi: 'true',
		caption: 'caption',
		slick: {
		autoplay: false, 
		arrows: true,
	},
	
	});
});
</script>