What is a good jQuery content slider plugin? [closed]

Question

I know you said you are looking for a WordPress Plugin but most of the content sliders are very easy to add manually and will be a lot less bloated because you only have to add the features you want to use. I will give a few options:

JQuery Cycle (by far the simplest for images)

I use this for images and wrote a short code for it so it can easily be added to posts, pages or widgets. To use add the div class and shortcodes for the images:

<div class="slideshow"> [slideimage name=name-of-image-uploaded-to-media] [slideimage name=next-image-name] </div> (This will only work for .jpg's if you want to use .png change the ext to 'png' in the shortcode function

In footer.php just call the cycle.js you download from http://jquery.malsup.com/cycle/download.html
and add this between script tags or to your master js

jQuery(function() {
jQuery(‘.slideshow’).cycle();
});

function slideimage_shortcode($atts, $content = null) {
    extract( shortcode_atts( array(
    'name' => '',
    'ext' => 'jpg',
    'path' => '/wp-content/uploads/',
    'url' => ''
    ), $atts ) );
    $file=ABSPATH."$path$name.$ext";
    if (file_exists($file)) {
        $size=getimagesize($file);
        if ($size!==false) $size=$size[3];
        $output = "<img src="".get_option("siteurl')."$path$name.$ext'   $size alt="$name" />";
        if ($url) $output = "<a href="$url" title="$name">".$output.'</a>';
        return $output;
    }
    else {
        trigger_error("'$path$name.$ext' image not found", E_USER_WARNING);
        return '';
    }
}
add_shortcode('slideimage','slideimage_shortcode');

For Sliders that contain posts, HTML, or pretty much anything I use JQuery Tools Scrollable
http://flowplayer.org/tools/scrollable/index.html

The instructions on the jQuery Tools site are very well written and basically you wrap the slider in a div then the individual posts or items are wrapped in another div inside the main one.

You have to call the plugin js in your footer and add the function to your master js or in script tags:
jQuery(function() {
jQuery(“.scrollable”).scrollable({vertical:true,mousewheel:false});
});

EDIT: Add query post by category to any template file to allow end user to add posts to the slider.

The following code would add any posts in category 8 to the slider:

<div id="slider">
  <?php query_posts('post_type=post&order=asc&cat=8'); ?>

        <div id="actions">
    <a class="prev">&laquo; Back</a>
    <a class="next">More &raquo;</a>
</div>

  <div class="scrollable">
   <div class="items">
 <?php while (have_posts()) : the_post(); ?>
 <div>
 <?php the_content(); ?>
 </div>
<?php endwhile;?>
</div>
                </div>

            </div>

To make the whole setup more Plugin like, register and enqueue jquery tools in functions.php

<?php
if ( !is_admin() ) { // instruction to only load if it is not the admin area
   // register your script location, dependencies and version
   wp_register_script('jquerytools',
       http://cdn.jquerytools.org/1.2.4/all/jquery.tools.min.js',
       array('jquery'),
       '1.4.2' );
   // enqueue the script
   wp_enqueue_script('jquerytools');
}
?>

Now add another function to add the slider configuration:

// add jquery tools configuration to footer
function add_jquerytools_config() {
    echo '<script type="text/javascript">';
    echo 'jQuery(document).ready(function($) {';
        echo '$(".slider").scrollable({circular:true}).autoscroll(8000);';
        echo '$(".scrollable").scrollable({vertical:false,mousewheel:false});});';
    echo '</script>';
}
add_action('wp_footer', 'add_jquerytools_config');

Related Posts:

Leave a Comment Cancel reply