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;
}
