Best Wordpress Slider Plugin for HTML and Images

Question

I want a simple to use slider for the home page of the website I have played around with a bunch of plugins and nothing was really suiting my needs or easy to deal with. I would rather not spend the time to build my own.

Here are the requirements I need

1. Allows More than one slider with different image sizes(sized to background image)
2. Must be able to handle html and images so it can be linkable to posts

Basically I want the slider to take all the posts marked in a certain category say "featured" then display the title and featured image on the home page.

Any Suggestions. I can get the info I need already through the query function.

If I must build my own this is the format I would like the code to be in

<div id="feat-slider">
 <ul >
   <li id="feat-slide-id">
     <a href="permalink"><span class="feat-title">Title</span></a>
     <span class="feat-image">Featured Image</span>
   </li>
   ......
   ......
 </ul>
 <ul class="feat-nav">
   <li id="feat-slide-id">1</li>
   .......
 </ul>
 </div>

If No plugin can make multiple versions of something like this can any provide some javascript to create a slider out of this

Thank you

Answer 1

Here is what I did just in case anyone wants to copy it noticed a lot of people looking

set a category of your choice and featured image will be the slide for that title will be displayed and the whole thing is permalinked

here is the HTML/PHP to generate it

  <div id="slider">
          <ul id="featslider">
            <?php 
                $portquery = new WP_Query();
                $portquery->query(array('cat'=> 3, 'posts_per_page' => 4));

                while ($portquery->have_posts()) : $portquery->the_post(); 
                    echo "<li class='featslide' id='feat-".$slidecount."'>";
                    echo " <a href='".get_permalink($post->ID)."'>";

                    echo '<span class="slide-title sosmed">&nbsp;&nbsp;'.the_title('','',false).'&nbsp;&nbsp;&nbsp;&nbsp;</span>';
            ?>
                    <?php if (has_post_thumbnail( $post->ID ) ): ?>
                        <?php $image = wp_get_attachment_image_src( get_post_thumbnail_id( $post->ID ), 'single-post-thumbnail' ); ?>
                        <?php 
                            echo "<img src='".$image[0]."' />"; 
                        ?>
                    <?php endif; 

                    echo "</a></li>";
                    ?>

            <?php endwhile; ?>
          </ul>
        </div>
        <div id="featslide-nav" class="slidenav">

        </div>
    </div>

CSS you will probably need to modify this according to your sizes

  #slider{
    height:348px;
    width:800px;
    overflow:scroll;
    overflow-x:hidden;
    position:relative;z-index:5
  }
  #featslider{
list-style-type:none;
margin:0;
z-index:0;
  }
  .featslide{margin-top:-22px;}
  #featslide-nav{
z-index:100;
position:absolute;
margin-top:-24px;margin-left:700px;
 }
  .slide-title{
z-index:10;
color:#000;
padding:6px;
min-width:250px;
text-align:center;
background:#fff;
position:relative;top:30px;
font-size:22px;
 }
 .slidenav a{
text-decoration:none;
color:#fff;
background:#000;
padding:5px;
margin:2px;
cursor:pointer;
   }

Then the jQuery

   //SLIDER CONTROLS
     $("#slider").css("overflow", "hidden");
     $("ul#featslider").cycle({
       fx: 'fade',
       speed:    3000, 
       timeout:  6000,
       pager:"#featslide-nav"
   });

based off of this blog post about making an html slide from jquery cycle http://line25.com/tutorials/build-a-simple-image-slideshow-with-jquery-cycle