Un slider de post ou custom post vertical

Voici un petit mémo pour afficher vos articles ou custom post sur votre site wordpress, en défilement automatique vertical :
Dans le Gif animé, on voit un certain nombre de custom post appelés « chroniques ». La manière dont ils vont se présenter va dépendre de votre css. Ici, je le fais ressortir sous la forme de petits rectangles avec avatar à gauche, nom de l’auteur et titre à droite..et le but est de les faire défiler de bas en haut de manière continue.

Au préalable il faut télécharger le plugin js.caroufredsel.

Voici le code de ma boucle:

  <div id="chronics">
        
        <?php
        $chronicslist = get_posts( array('post_type' => 'chroniques','posts_per_page' => -1) );
        foreach ($chronicslist as $post) :  setup_postdata($post);
            ?>
            <div class="row-fluid">
                <div class="span12">
                    
                    <div class="chronic">
                        <?php echo get_avatar( get_the_author_meta( 'user_email' ), apply_filters( 'twentyten_author_bio_avatar_size', 100 ) ); ?>
                        <div class="chronic-content">
                            <a href="<?php the_permalink(); ?>" class="chronic-author"><?php the_author_meta('display_name'); ?></a>
                            <h3 class="chronic-title"><a href="<?php the_permalink(); ?>">« <?php the_title(); ?> »</a></h3>
                        </div>
                    </div>
                </div>
            </div>
            
            <?php
        endforeach;

        ?>
        </ul>
    </div>

Dans un fichier, que je nomme copiercoller-caroufredsel.js , j’ajoute ma fonction jquery .

$(document).ready(function() {

    // Using custom configuration
    $('#chronics').carouFredSel({
        items               : 3,
        direction           : "up",
        scroll : {
            items           : 1,
            easing          : "elastic",
            duration        : 1000,                         
            pauseOnHover    : true,
            responsive: true
        }                   
    });
});

Le plugin agit sur la div englobante, ici « #chronics« . On note ici l’argument « up » qui indique à jquery la direction dans laquelle vont se diriger mes vignettes et j’indique le nombre de custom posts souhaité à l’affichage.

Je n’oublie pas d’appeler mes fichiers js depuis mon fichier functions.php

function copiercoller_load_caroufredsel() {
    // Enqueue carouFredSel, note that we specify 'jquery' as a dependency, and we set 'true' for loading in the footer:
    wp_register_script( 'caroufredsel', get_template_directory_uri() . '/js/jquery.carouFredSel-6.2.1-packed.js', array( 'jquery' ), '6.2.1', true );
 wp_enqueue_scipt('caroufredsel');
    // For either a plugin or a theme, you can then enqueue the script:
    wp_enqueue_script( 'copiercoller-caroufredsel', get_template_directory_uri() . '/js/copiercoller-caroufredsel.js', array( 'caroufredsel' ), '', true );
}
add_action( 'wp_enqueue_scripts', 'copiercoller_load_caroufredsel' );

Je vous liste ici l’ensemble des arguments que l’on peut ajouter à son carousel:

$('#carousel').carouFredSel({
    circular: true,         // Determines whether the carousel should be circular.
    infinite: true,         // Determines whether the carousel should be infinite. Note: It is possible to create a non-circular, infinite carousel, but it is not possible to create a circular, non-infinite carousel.
    responsive: false,      // Determines whether the carousel should be responsive. If true, the items will be resized to fill the carousel.
    direction: "left",      // The direction to scroll the carousel. Possible values: "right", "left", "up" or "down".
    width: null,            // The width of the carousel. Can be null (width will be calculated), a number, "variable" (automatically resize the carousel when scrolling items with variable widths), "auto" (measure the widest item) or a percentage like "100%" (only applies on horizontal carousels)
    height: null,           // The height of the carousel. Can be null (width will be calculated), a number, "variable" (automatically resize the carousel when scrolling items with variable heights), "auto" (measure the tallest item) or a percentage like "100%" (only applies on vertical carousels)
    align: "center",        // Whether and how to align the items inside a fixed width/height. Possible values: "center", "left", "right" or false.
    padding: null,          // Padding around the carousel (top, right, bottom and left). For example: [10, 20, 30, 40] (top, right, bottom, left) or [0, 50] (top/bottom, left/right).
    synchronise: null,      // Selector and options for the carousel to synchronise: [string selector, boolean inheritOptions, boolean sameDirection, number deviation] For example: ["#foo2", true, true, 0]
    cookie: false,          // Determines whether the carousel should start at its last viewed position. The cookie is stored until the browser is closed. Can be a string to set a specific name for the cookie to prevent multiple carousels from using the same cookie.
    onCreate: null          // Function that will be called after the carousel has been created. Receives a map of all data.
});

19/06/2014 Mis à jour le 19/12/2019 Par Copier coller | Dans jQuery