Magic Cycle

cycle-progressive.js

	    <section class="cycle-slideshow" 
        data-cycle-swipe="true"
        data-cycle-fx="fade" 
        data-cycle-slides=">div"         
        data-cycle-timeout="3000" 
        data-cycle-prev="#prev-vitrine" 
        data-cycle-next="#next-vitrine"
        data-cycle-caption="#vitrine-caption"
        data-cycle-caption-template="<p>{{caption}}</p>"
        data-cycle-loader="true"
        data-cycle-progressive="#vitrine_data"
        data-cycle-log="false" >
        	
			<div class="slide" data-caption="01 - lorem" style="background: url('https://placehold.it/2000x800') no-repeat center center; background-size: cover; width:100%; height:200px;">
				<img src="https://placehold.it/2000x800" class="hidden">
			</div>
        
        </section>
		
		<?php 
			for ( $i=0; $i < 3; $i++ ): 
				$caption = '0' . $i . ' - lorem';
				$img_banner = 'https://placehold.it/2000x800';
				$slides[$i] = "\"<div class='slide' data-caption='" . esc_attr( $caption ) . "' style='background: url(" . $img_banner . ") no-repeat center center; background-size: cover; width:100%; height:200px;'><img src='" . esc_attr( $img_banner ) . "' class='hidden'></div>\"";
				//"<div class='slide' data-caption='03 - lorem' style='background: url(https://placehold.it/2000x800) no-repeat center center; background-size: cover; width:100%; height:200px;'><img src='https://placehold.it/2000x800' class='hidden'></div>"
			endfor;
		?>
        <script id="vitrine_data" type="text/cycle">
	        [
	        	<?php echo implode(",\n", $slides ) . "\n"; ?>
	        ]
        </script>

        <div id="vitrine-caption"></div>
        <button id="prev-vitrine">Prev</button>
        <button id="next-vitrine">Next</button>