Best Wordpress Slider Plugin for HTML and Images

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

Related Posts: