Réglages de flexslider

Cet article porte sur le réglage de la vitesse de défilement d’un slider « flexslider ». Il est possible qu’il ne fonctionne pas avec des thèmes différents du mien. 

La situation

Un slider « flexslider » est intégré à ma page d’accueil par les moyens suivants.

Le code html sur le template de la page d’accueil (ac-front-page-template.php) :

	<section id="page-slider" class="clair">	
	<?php
	// generated with http://generatewp.com/wp_query/
	$args = array (
	'post_type'              => array( 'page' ),
	'order'                  => 'ASC',
	'orderby'                => 'menu_order',
	'meta_query'             => array(
		array(
			'key'       => 'inclure-slider-accueil',
			'value'     => 'yes',
			'compare'   => '=',
		),
	),
);
	
	$page_slider = new WP_Query( $args );
 ?>

 
	<?php if ( $page_slider->have_posts() ) : ?>
		<div class="flexslider">
			<div class="slides">

			<?php while ( $page_slider->have_posts() ) : $page_slider->the_post(); $do_not_duplicate[] = get_the_ID(); 
			$link_value = get_permalink() ;
			?>
				<figure class="slide">
				<a href="<?php echo $link_value ?>">
				<?php 					
					the_post_thumbnail( 'unique-slider', array( 	
						'class' => 'clea-ac-slider', 
						'alt'   => 'the alt here' ,
						'title' => get_the_title() 
					) ) ; ?>

					<figcaption class="slide-caption">

						<?php the_title( '<h2 class="entry-title">', '</h2>' ); ?>

						<div class="entry-summary">
							<?php the_excerpt(); ?>
						</div><!-- .entry-summary -->
						<div class="bouton-caption">
						<a href="<?php echo $link_value ?>" class="bouton-savoir" target="_self"><i class="fa fa-share"></i>Voir la suite</a>
						</div>
					</figcaption><!-- .slide-caption -->
				</a>
				</figure><!-- .slide -->

			<?php endwhile; ?>

			</div><!-- .slides -->

		</div><!-- .flexslider -->

et functions.php du thème enfant charge flexslider.css et flexslider.js pour la page d’accueil :

<?php 

/* Register and load scripts. */
add_action( 'wp_enqueue_scripts', 'clea_atout_c_enqueue_scripts' );

/* Register and load styles. */
add_action( 'wp_enqueue_scripts', 'clea_atout_c_enqueue_styles', 4 ); 

function clea_atout_c_enqueue_styles() {

	if ( is_page_template( 'page/ac-front-page-template.php' ) ) {
		wp_enqueue_style( 'flexslider', get_template_directory_uri() . '/css/flexslider.css' , array( '25px' ) );
	}
}
	
function clea_atout_c_enqueue_scripts() {

	/* Enqueue the 'flexslider' script. */
	if ( is_page_template( 'page/ac-front-page-template.php' ) ) {
		wp_enqueue_script( 'flexslider', get_template_directory_uri() . '/js/flexslider/flexslider.min.js' , array( 'jquery' ), '20120713', true );
	}
}
?>

Le problème

Le code javascript de flexslider fixe la vitesse de défilement par défaut à 7000. Dans mon cas, comme il y a du texte à lire, c’est un peu trop rapide.

Les sources d’information utilisées :

• http://www.woothemes.com/flexslider/
• https://github.com/woothemes/FlexSlider/wiki/FlexSlider-Properties
• https://github.com/woothemes/FlexSlider/issues/112

Il faut donc que je parviennes à « dire » que mon slider doit défiler plus lentement, en utilisant slideshowSpeed: « 8000 »,  par exemple, au lieu des 7000 par défaut.

La solution

Inspirée de https://github.com/woothemes/FlexSlider/issues/112 :

• attribuer une classe supplémentaire à mon flexslider en modifiant la ligne <div class= »flexslider »>  en <div class= »flexslider temporise »> , dans le template ac-front-page-template.php.
• ajouter un script jquery spécifique à un slider de classe « temporise » (script ajouté dans le template  ac-front-page-template.php  :

<script>
jQuery(".temporise").fadeIn('fast',
    function(){                     
		//Set up the slideshow
		jQuery('.flexslider').flexslider({
			slideshowSpeed: "8500",  
			directionNav: true, 
			slideToStart: 0,
			animation: "fade",
			start: function(slider) {
				 slider.flexAnimate(0);
			}
		});
	});

</script>

Et voilà, le slider défile plus lentement !