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 !