Un slider de post ou custom post vertical

Un slider de post ou custom post vertical

slidervrtical

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

 

Laisser un commentaire

Votre adresse de messagerie ne sera pas publiée. Les champs obligatoires sont indiqués avec *

Ce site utilise Akismet pour réduire les indésirables. En savoir plus sur comment les données de vos commentaires sont utilisées.