What is a good jQuery content slider plugin?

4 comments

1. 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');
   

   Log in to Reply

2. I’ve settled on the SlideDeck plugin for WordPress for this project. In short, it’s very well put together, looks great, is very flexible, etc. etc. I’m pretty impressed thus far. The only drawback is that the free version includes a very small attribution image link, but honestly, it’s probably worth the $49 they want for the WP plugin.

   Log in to Reply

3. I’ve been very happy with jcarousel. It works well, is easy to use and has some nice features.

   Log in to Reply

4. Full disclosure, I’m about to recommend a jQuery plugin that I developed. – It’s also not a WordPress plugin (I’m working on it though), but can still be used effectively for what you’re suggesting (in fact the use you’re suggesting was my primary motivation for developing it).

   I use Basic jQuery Slider (http://www.basic-slider.com) for my clients WordPress sites in combination with the OptionTree plugin (http://wordpress.org/extend/plugins/option-tree/) to create featured posts/content slides.

   Basic jQuery Slider allows you to use whatever markup you like in the slides, so is perfect for creating a featured post/content slider with an image, heading, excerpt, etc. To allow the user to manage the content of the slides, I use OptionTree, with a simple select field for each slide which contains all of the pages/posts currently in the site. It’s just up to you to configure the slider in your templates by pulling out the relevant pieces of content from the posts that the user has selected. Alternatively, you could let the user select a category, tag, etc and pull in content for the slider based on that.

   It’s also possible using that combination to create and manage multiple sliders on your site.

   I’m currently working on turning this in to a full featured (and free) WordPress plugin.

   Hope that helps and wasn’t too self-promote-y 🙂

   Log in to Reply