add_action( 'wp_enqueue_scripts', function() { wp_enqueue_style( 'flexslider', '//cdnjs.cloudflare.com/ajax/libs/flexslider/2.7.2/flexslider.min.css' ); wp_enqueue_script( 'jquery' ); wp_enqueue_script( 'flexslider', '//cdnjs.cloudflare.com/ajax/libs/flexslider/2.7.2/jquery.flexslider-min.js', [ 'jquery' ] ); wp_add_inline_script( 'jquery', ' jQuery( document ).ready( function( $ ) { var slider1 = $( ".flexslider" ); slider1.flexslider( { animation: "slide", animationLoop: false, itemWidth: 300, itemMargin: 36, minItems: 1, maxItems: 3 } ); $( window ).resize( function() { slider1.resize(); } ); } ); ', 'after' ); } );
I also recommend placing a CSS rule inside WP Admin > Appearance > Customizer > CSS to hide all but the first slide during page load:
.flexslider .wp-block-cover:not(:first-child) { display: none; }