Creating Featured Slider in Wordpress Theme using JQuery s3Slider

By ivan in Tutorial | 55 Comments

20 April 2009


Featured Slider is considered as one of the hottest elements on a website, the trend of using the slider effects continued each year. JQuery which has become  Wordpress  prominent javascript framework shows many love to sliding effect and this tutorial will guide you through one of them; the JQuery s3Slider.

View the HTML demo in here to see what we’re trying to create.

What You Need

JQuery. Get the latest JQuery download and place it inside your wordpress theme, you might create a new folder for it as well.

s3Slider.js. You can download the script in here and place it on the same folder as above.

Step 1: Modify Your Theme header.php file

I would assumed that your theme didnt have JQuery linked inside the header file, so you will need to link both files between the HEAD tag like these;

<script type=”text/javascript” src=”<?php bloginfo(‘template_directory’); ?>/js/jquery.js”></script>
<script type=”text/javascript” src=”<?php bloginfo(‘template_directory’); ?>/js/s3Slider.js”></script>

Activate the s3Slider by placing this script after both lines;

<script type=”text/javascript”>
$(document).ready(function() {
$(‘#slider’).s3Slider({
timeOut: 3000
});
});
</script>

you can modify the fade out speed by changing the timeout variable.

Step 2: Set up your Featured Slider Section

Try to locate where do you want to place the featured slider section, it could be in your header.php or other files, then start building the layer:

<div id=”slider”>

<ul id=”sliderContent”>
<li class=”sliderImage”>  <img class=”featimg” src=”” alt=” />
<span class=”top”>Text to appear/ caption<span></li>
</ul>

</div>

This is the ground code of the html tag for using the s3Slider.

Now let’s apply it on wordpress theme.

<div id=”slider”>

<ul id=”sliderContent”>
<?php
$my_query = new WP_Query(‘category_name=featured&showposts=3′);
while ($my_query->have_posts()) : $my_query->the_post();
?>
<li class=”sliderImage”>  <img class=”featimg” src=”<?php echo get_post_meta($post->ID, “thumb”, $single = true); ?>” alt=”<?php the_title(); ?>”  />
<span class=”top”><?php the_excerpt(); ?><span></li>
<?php endwhile; ?> </ul>

</div>

As you can see we have place wordpress magic inside,

$my_query = new WP_Query(‘category_name=featured&showposts=3′);

This line will retrieve 3 posts from category named featured.

<img class=”featimg” src=”<?php echo get_post_meta($post->ID, “thumb”, $single = true); ?>” alt=”<?php the_title(); ?>”  />

This line will get the image from your posts, you need to add custom field in your posting named ‘thumb’.

<span class=”top”><?php the_excerpt(); ?><span></li>

You can also use text from your post excerpt to appear on the featured slider.

Step 3: Add CSS styling for the slider

This styling is necessary to make your slider works.

#slider {
width: 150px;
height: 150px;
position: relative;
overflow: hidden;
}

.sliderImage span {
position: absolute;
width: 150px;
background-color: #000;
filter: alpha(opacity=70);
-moz-opacity: 0.7;
-khtml-opacity: 0.7;
opacity: 0.7;
color: #fff;
display: none;
}

All the properties on slider tag are important, you will also need to make sure all the images you’re using is the same width & height with the css definition. the .sliderimage span property is used for slider caption/text.

Step 4: Extra-Using Timthumb for image  automatic scale

It might take you some extra time to make sure all the images you upload for the featured slider are having the same scale especially if your featured slider are regularly updated. Using automatic image rescaling is the option.

You could use the famous timthumb script build by Darren Hoyt. To make this magic happen you need to

  1. Download the timthumb script here.
  2. create a new folder inside your theme name it scripts and place timthumb.php inside, within the folder create another folder named cache.
  3. make the cache folder writable by changing the permission into 777 (chmod 777)
  4. in some web server it might also necessary to make the scripts and timthumb.php folder into 755.

Step 5: Extra-Apply the timthumb script for your images

modify this line:

<img align=”right” class=”featimg” src=”<?php echo get_post_meta($post->ID, “thumb”, $single = true); ?>” alt=”<?php the_title(); ?>”  />

into

<img  class=”featimg” src=”<?php bloginfo(‘template_directory’); ?>/scripts/timthumb.php?src=<?php echo get_post_meta($post->ID, “thumb”, $single = true); ?>&h=150&w=150&zc=1″ alt=”<?php the_title(); ?>”  />

the script will make automatic thumbnail for your images with 150×150 size (modify it to fit your need).

and that’s it you will have a smooth featured slider for your website.

Tags: , , ,

Top

55 Responses to “Creating Featured Slider in Wordpress Theme using JQuery s3Slider”

  1. I’ll try this, thanks!

  2. Hello,

    I was wondering if you could help add next and previous buttons to this tool on wordpress?

  3. Coloradocolin May 22, 2009 at 11:56 pm

    Just curious, I set this up on my site, but the last slide isnt playing. Any ideas?

  4. Coloradocolin May 23, 2009 at 12:02 am

    Solved it. You need to add:

    .clear {
    clear: both;
    }

    to your style sheet and then add: before you close your list, then your last slide will play.

  5. Coloradocolin May 23, 2009 at 12:03 am

    Oops, the code didnt display. Here it is again:

  6. @Coloradocolin
    yes, we need to add those on css file.

    thanks a lot

  7. are you sure this script is 100% right?

    $(document).ready(function() {
    $(’#slider’).s3Slider({
    timeOut: 3000
    });
    });

    for one the quotation marks are not standard characters so I changed those but this is still giving me an error in IE.

    here’s the location I’m trying to set it up … it’s the 700×250 image milesbonny.com.s63937.gridserver.com

    Please help

  8. It’s seem to be hard to create featured content slider.
    I can’t find S3slider anywhere.

  9. for me, the header would show, but wouldn’t slide. i was unsuccessful at fixing it!

  10. or me, the header would show, but wouldn’t slide. i was unsuccessful at fixing it!

    p.s. if you could, would you remove that previous comment? didn’t mean to put my name.

  11. Thank your for that tips.
    Could you show me how to add the button 1, 2, 3,… to that slide content?

  12. Can I use directly to the wordpress that already use plugin with jquery ?
    Can you show demo directly to wordpress ?

  13. no images are coming in slide what do we have to make separate directory to call the images

  14. Hi there,

    Trying to set up the code into wordpress for flash at the top in the header. Getting confused as to where to put the code in the files already there and when you create new ones and how they all link together and where.

    My images arent showing up.

    Any help appropriated

  15. I haven’t implemented this yet, so I’m just taking a blind stab at helping anyone having trouble seeing the images–

    For your post, you need to create a new meta-data field called “thumb”. The field needs to be populated with a URL. You COULD just have a directory with images, but more likely you’ll use Wordpress’s uploader to upload an image to the post. But you don’t need to insert it into your post (if you don’t want to), it’ll just be an image that’s considered part of the post. In the gallery, “Show” the photo, and then copy the URL. Close the uploader, and paste this URL into the “thumb” meta-data field.

    Now when the PHP iterates, it will look for a meta-data field in your post called “thumb”, and extract the URL you pasted. This becomes the image URL.

    My question:

    Like others above, I’m looking for next/prev arrows, as well as the slider to stop auto-sliding once one of those navigation links is clicked. Featured Slider v2 would be great!

  16. Lascelles Clarke August 28, 2009 at 11:43 pm

    Please say how to implement Featured Slider in Joomla 1.5.

    Thanks

  17. Thanks for the amazing tutorial , can I add this slider in the same manner to the BORNEO Joomla theme? or will it need more tweaking?

  18. I get a “Parse error: parse error, unexpected ‘=’ in” with ‘$my_query = new WP_Query(’category_name=featured&showposts=3′);’

  19. I’ve got the same parse error as Pat.

  20. Thanks for this, worked a treat, spent a few minutes wondering why only the first span came up, and there is a small problem with the code example, the span for the excerpt isn’t closed, 2 opening spans, just in case anyone gets the same problem :)

  21. hello all, i used s3slider on a html page and i could see my pictures scroll but when i save the page as .php the images dont display what could be happening.

    why is the php page not displaying my images.

  22. Hi,

    Nice script, all though some errors.

    in the php’s ” and ’ are used, this is not correct, should be ” and ‘.

    On the s2slider’s page is the right code. This is my code, it works on IE to.

    have_posts()) : $my_query->the_post();
    ?>
    <a href=""><img class="featimg" src="ID, "thumb", $single = true); ?>" alt="" />

    Style:


    #s3slider {
    width: 536px; /* important to be same as image width */
    height: 300px; /* important to be same as image height */
    position: relative; /* important */
    overflow: hidden; /* important */
    margin-bottom: 10px;
    }

    #s3sliderContent {
    width: 400px; /* important to be same as image width or wider */
    position: absolute; /* important */
    top: 0; /* important */
    margin-left: 0; /* important */
    height: 300px;
    }

    #s3sliderContent a:link, #s3sliderContent a:active, #s3sliderContent a:visited {
    text-decoration : none;
    }

    #s3sliderContent a:hover {
    text-decoration : underline;
    }

    .s3sliderImage {
    float: left; /* important */
    position: relative; /* important */
    display: none; /* important */
    height: 300px;
    }

    .s3sliderImage span {
    position: absolute; /* important */
    left: 0;
    font: 11px 'Lucida Grande',Arial,Helvetica,sans-serif;
    padding: 10px 13px;
    width: 510px;
    background-color: #000;
    filter: alpha(opacity=80); /* here you can set the opacity of box with text */
    -moz-opacity: 0.7; /* here you can set the opacity of box with text */
    -khtml-opacity: 0.7; /* here you can set the opacity of box with text */
    opacity: 0.7; /* here you can set the opacity of box with text */
    color: #fff;
    display: none; /* important */
    bottom: 0;

    /*
    if you put
    top: 0; -> the box with text will be shown at the top of the image
    if you put
    bottom: 0; -> the box with text will be shown at the bottom of the image
    */
    }

    .clear {
    clear: both;
    }

    Hope it helps.

    Paul

  23. sorry, the php did not post correctly, here again:

    have_posts()) : $my_query->the_post();
    ?>
    <a href=”"><img class=”featimg” src=”ID, “thumb”, $single = true); ?>” alt=”" />

  24. sorry Ivan…

    ill try a blockquote…

    have_posts()) : $my_query->the_post();
    ?>
    <a href=”"><img class=”featimg” src=”ID, “thumb”, $single = true); ?>” alt=”" />

    hope this works, was my last try. otherwise inspect my source

  25. Looks like no one can figure out that pasting code here DOESN’T WORK. I need help with why the last image won’t show up, the person who posted a fix got their code cut off!!!

  26. is there any simple for this example ?
    ı didnt found

  27. Nice tutorial but if you can show it with demo live i think more better

  28. I had a problem with the caption not showing up after the first picture and realized that the code for the caption should be

    also if you want the caption on the right or left you can create a class as such and add this to the css

    .right {
    right: 0;
    bottom: 0;
    width: 160px !important;
    height: 435px;
    }

    I got a version of the plug in working on my demo site
    keithkeslerdesign.com/blog

  29. sorry the code didn’t show up. what you need to do is close the span element with a backslash instead of leave it open like is shown in the tutorial.

    instead of

  30. very nice tutorial…i tried it out so far but i only have one image showing.No sliding.I’m working on my local server so you cant take a look on my site.I correctly changed the directory to the .js files, i copied and pasted the other codes as shown,added the content field on every post.Could anyone please tell me what i’m doing wrong and why the plugin isnt sliding?Thanks!!


  31. <script type="text/javascript" src="/jquery/jquery.js">
    <script type="text/javascript" src=”/jquery/s3Slider.js">

  32. well i tried to post the linking of the js.files in the header right above…didnt work.does anyone have a clue where the problem is?

  33. solved it.the directory path to the js.files was wrong

  34. This is crap. Doesn’t work. I’m sick of amateur tutorial – waste of time..

  35. This really is a terrible tutorial..and the author hasn’t even followed up on any of the issues. Complete waste of time.

  36. nice tutorial, thanks,,

  37. Nice tutorial but if you can show it with demo live i think more better

  38. Will this also retrieve posts that belong to multiple categories along with featured like featured, sports, etc? or posts only belonging to featured category?

Trackbacks/Pingbacks

  1. [...] Creating Featured Slider in Wordpress Theme using JQuery s3Slider [...]

  2. [...] Creating Featured Slider in Wordpress Theme using JQuery s3Slider [...]

  3. [...] Creating Featured Slider in Wordpress Theme using JQuery s3Slider [...]

  4. [...] Creating Featured Slider in Wordpress Theme using JQuery s3Slider [...]

  5. [...] Creating Featured Slider in Wordpress Theme using JQuery s3Slider [...]

  6. [...] Creating Featured Slider in Wordpress Theme using JQuery s3Slider | Tobacamp Development [...]

  7. [...] Creating Featured Slider in Wordpress Theme using JQuery s3Slider | Tobacamp Development css sliders in wordpress (tags: webdesign web css jquery wordpress) [...]

  8. [...] Creating Featured Slider in Wordpress Theme using JQuery s3Slider | Tobacamp Development css sliders in wordpress (tags: webdesign web css jquery wordpress) [...]

  9. [...] Theme using JQuery s3Slider | Official Website | [...]

  10. [...] tobacamp Creating Featured Slider in Wordpress Theme using JQuery s3Slider [...]

Leave a Reply