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 !