In this tutorial, I’ll show you how to add a sliding content region to your WordPress site. You can download the source code for the tutorial, which contains everything you need to put this little thingy on your site in 5 minutes max.
There are a few basic principle that you must know before jumping into this tutorial. First, javascripts are like car parts: You can’t mix Ford parts and expect them to work on a Honda. The same goes with javascript libraries. Conflicting javascript libraries can cause some javascript-powered features to “choke” or freeze. There are ways to use multiple libraries together, but that is beyond the scope of this tutorial. Second, you must load JQUERY before you load JQUERY plugins, like the ones we use on our sites. Make sure that JQUERY shows before other javascripts in the head of your site.
First
Unzip the download files posted above. Upload slider.css, slider.php, timthumb.php, the /js/ and /cache/ folders into your active theme folder. Copy the contents of the /images/ folder into your themes /images/ folder. Do not overwrite your existing /images/ folder. TimThumb.php requires the GD library, which is available on any host sever with PHP 4.3+ installed. Manually change the /cache/ folder permissions to 777.
Open up header.php in the theme editor. Add these three lines of code somewhere between the <code>__abENT__lt;head__abENT__gt;</code> and <code>__abENT__lt;__abENT__#8260;head__abENT__gt;</code>
<code>__abENT__lt;link rel=__abENT__quot;stylesheet__abENT__quot; href=__abENT__quot;__abENT__lt;?php bloginfo(__abENT__apos;template_directory__abENT__apos;); ?__abENT__gt;__abENT__#8260;slider__abENT__#46;css__abENT__quot; type=__abENT__quot;text__abENT__#8260;css__abENT__quot; media=__abENT__quot;screen__abENT__quot; charset=__abENT__quot;utf-8__abENT__quot;__abENT__gt;<br />
__abENT__lt;script src=__abENT__quot;__abENT__lt;?php bloginfo(__abENT__apos;template_directory__abENT__apos;); ?__abENT__gt;__abENT__#8260;js__abENT__#8260;jquery-1__abENT__#46;3__abENT__#46;2__abENT__#46;min__abENT__#46;js__abENT__quot; type=__abENT__quot;text__abENT__#8260;javascript__abENT__quot; charset=__abENT__quot;utf-8__abENT__quot;__abENT__gt;__abENT__lt;__abENT__#8260;script__abENT__gt;<br />
__abENT__lt;script src=__abENT__quot;__abENT__lt;?php bloginfo(__abENT__apos;template_directory__abENT__apos;); ?__abENT__gt;__abENT__#8260;js__abENT__#8260;slider__abENT__#46;js__abENT__quot; type=__abENT__quot;text__abENT__#8260;javascript__abENT__quot; charset=__abENT__quot;utf-8__abENT__quot;__abENT__gt;__abENT__lt;__abENT__#8260;script__abENT__gt;</code>If you already have JQUERY running on site, do not add it again. If you are unsure, view your source code and look for a line containing “jquery.”
Second
Now that we have loaded the css and javascripts required for running the slider, we can now include the slider.php WordPress template file in your theme files. Open up index.php or home.php and locate spot where you want to include the slider. If you are using our Modularity theme framework, you might insert the slider right above this line of code:
<code>__abENT__lt;?php<br />
$featured = get_option(__abENT__apos;T_featured__abENT__apos;);<br />
if($featured == __abENT__quot;On__abENT__quot;) { include (THEMELIB __abENT__#46; __abENT__apos;__abENT__#8260;apps__abENT__#8260;featured__abENT__#46;php__abENT__apos;); }<br />
?__abENT__gt;</code>Paste this right above it:
<code>__abENT__lt;?php include (__abENT__apos;slider__abENT__#46;php__abENT__apos;) ?__abENT__gt;</code>As you might guess, this tells WordPress to include the slider.php.
Third
Finally, we are going to create a custom write panel to your WordPress post, so that you can choose a thumbnail for each post. Open up your functions.php file and add this code right above the very last ?>.
<code>__abENT__#8260;__abENT__#8260; Custom Write Panel<br />
<br />
$meta_boxes =<br />
array(<br />
__abENT__quot;image__abENT__quot; =__abENT__gt; array(<br />
__abENT__quot;name__abENT__quot; =__abENT__gt; __abENT__quot;image__abENT__quot;,<br />
__abENT__quot;type__abENT__quot; =__abENT__gt; __abENT__quot;text__abENT__quot;,<br />
__abENT__quot;std__abENT__quot; =__abENT__gt; __abENT__quot;__abENT__quot;,<br />
__abENT__quot;title__abENT__quot; =__abENT__gt; __abENT__quot;Image__abENT__quot;,<br />
__abENT__quot;description__abENT__quot; =__abENT__gt; __abENT__quot;Using the __abENT__#92;__abENT__quot;__abENT__lt;em__abENT__gt;Add an Image__abENT__lt;__abENT__#8260;em__abENT__gt;__abENT__#92;__abENT__quot; button, upload an image and paste the URL here__abENT__#46; Images will be resized__abENT__#46; This is the post main image and will automatically be sized__abENT__#46;__abENT__quot;)<br />
);<br />
<br />
function meta_boxes() {<br />
global $post, $meta_boxes;<br />
<br />
echo__abENT__apos;<br />
__abENT__lt;table class=__abENT__quot;widefat__abENT__quot; cellspacing=__abENT__quot;0__abENT__quot; id=__abENT__quot;inactive-plugins-table__abENT__quot;__abENT__gt;<br />
<br />
__abENT__lt;tbody class=__abENT__quot;plugins__abENT__quot;__abENT__gt;__abENT__apos;;<br />
<br />
foreach($meta_boxes as $meta_box) {<br />
$meta_box_value = get_post_meta($post-__abENT__gt;ID, $pre__abENT__#46;__abENT__apos;_value__abENT__apos;, true);<br />
<br />
if($meta_box_value == __abENT__quot;__abENT__quot;)<br />
$meta_box_value = $meta_box[__abENT__apos;std__abENT__apos;];<br />
<br />
echo__abENT__apos;__abENT__lt;tr__abENT__gt;<br />
__abENT__lt;td width=__abENT__quot;70__abENT__quot; align=__abENT__quot;center__abENT__quot;__abENT__gt;__abENT__apos;; <br />
echo__abENT__apos;__abENT__lt;input type=__abENT__quot;hidden__abENT__quot; name=__abENT__quot;__abENT__apos;__abENT__#46;$meta_box[__abENT__apos;name__abENT__apos;]__abENT__#46;__abENT__apos;_noncename__abENT__quot; id=__abENT__quot;__abENT__apos;__abENT__#46;$meta_box[__abENT__apos;name__abENT__apos;]__abENT__#46;__abENT__apos;_noncename__abENT__quot; value=__abENT__quot;__abENT__apos;__abENT__#46;wp_create_nonce( plugin_basename(__FILE__) )__abENT__#46;__abENT__apos;__abENT__quot; __abENT__#8260;__abENT__gt;__abENT__apos;;<br />
echo__abENT__apos;__abENT__lt;h2__abENT__gt;__abENT__apos;__abENT__#46;$meta_box[__abENT__apos;title__abENT__apos;]__abENT__#46;__abENT__apos;__abENT__lt;__abENT__#8260;h2__abENT__gt;__abENT__apos;;<br />
echo__abENT__apos; __abENT__lt;__abENT__#8260;td__abENT__gt;<br />
__abENT__lt;td__abENT__gt;__abENT__apos;;<br />
echo__abENT__apos;__abENT__lt;input type=__abENT__quot;text__abENT__quot; name=__abENT__quot;__abENT__apos;__abENT__#46;$meta_box[__abENT__apos;name__abENT__apos;]__abENT__#46;__abENT__apos;_value__abENT__quot; value=__abENT__quot;__abENT__apos;__abENT__#46;get_post_meta($post-__abENT__gt;ID, $meta_box[__abENT__apos;name__abENT__apos;]__abENT__#46;__abENT__apos;_value__abENT__apos;, true)__abENT__#46;__abENT__apos;__abENT__quot; size=__abENT__quot;70%__abENT__quot; __abENT__#8260;__abENT__gt;__abENT__lt;br __abENT__#8260;__abENT__gt;__abENT__apos;;<br />
echo__abENT__apos;__abENT__lt;p__abENT__gt;__abENT__lt;label for=__abENT__quot;__abENT__apos;__abENT__#46;$meta_box[__abENT__apos;name__abENT__apos;]__abENT__#46;__abENT__apos;_value__abENT__quot;__abENT__gt;__abENT__apos;__abENT__#46;$meta_box[__abENT__apos;description__abENT__apos;]__abENT__#46;__abENT__apos; __abENT__lt;__abENT__#8260;label__abENT__gt;__abENT__lt;__abENT__#8260;p__abENT__gt;__abENT__apos;;<br />
echo__abENT__apos; __abENT__lt;__abENT__#8260;td__abENT__gt;<br />
__abENT__lt;__abENT__#8260;tr__abENT__gt;__abENT__apos;;<br />
}<br />
<br />
echo__abENT__apos;<br />
__abENT__lt;__abENT__#8260;tbody__abENT__gt;<br />
__abENT__lt;__abENT__#8260;table__abENT__gt;__abENT__apos;; <br />
}<br />
<br />
function create_meta_box() {<br />
global $theme_name;<br />
if ( function_exists(__abENT__apos;add_meta_box__abENT__apos;) ) {<br />
add_meta_box( __abENT__apos;new-meta-boxes__abENT__apos;, __abENT__apos;Photo for post__abENT__apos;, __abENT__apos;meta_boxes__abENT__apos;, __abENT__apos;post__abENT__apos;, __abENT__apos;normal__abENT__apos;, __abENT__apos;high__abENT__apos; );<br />
}<br />
}<br />
<br />
function save_postdata( $post_id ) {<br />
global $post, $meta_boxes;<br />
<br />
foreach($meta_boxes as $meta_box) {<br />
__abENT__#8260;__abENT__#8260; Verify<br />
if ( !wp_verify_nonce( $_POST[$meta_box[__abENT__apos;name__abENT__apos;]__abENT__#46;__abENT__apos;_noncename__abENT__apos;], plugin_basename(__FILE__) )) {<br />
return $post_id;<br />
}<br />
<br />
if ( __abENT__apos;page__abENT__apos; == $_POST[__abENT__apos;post_type__abENT__apos;] ) {<br />
if ( !current_user_can( __abENT__apos;edit_page__abENT__apos;, $post_id ))<br />
return $post_id;<br />
} else {<br />
if ( !current_user_can( __abENT__apos;edit_post__abENT__apos;, $post_id ))<br />
return $post_id;<br />
}<br />
<br />
$data = $_POST[$meta_box[__abENT__apos;name__abENT__apos;]__abENT__#46;__abENT__apos;_value__abENT__apos;];<br />
<br />
if(get_post_meta($post_id, $meta_box[__abENT__apos;name__abENT__apos;]__abENT__#46;__abENT__apos;_value__abENT__apos;) == __abENT__quot;__abENT__quot;)<br />
add_post_meta($post_id, $meta_box[__abENT__apos;name__abENT__apos;]__abENT__#46;__abENT__apos;_value__abENT__apos;, $data, true);<br />
elseif($data != get_post_meta($post_id, $pre__abENT__#46;__abENT__apos;_value__abENT__apos;, true))<br />
update_post_meta($post_id, $meta_box[__abENT__apos;name__abENT__apos;]__abENT__#46;__abENT__apos;_value__abENT__apos;, $data);<br />
elseif($data == __abENT__quot;__abENT__quot;)<br />
delete_post_meta($post_id, $meta_box[__abENT__apos;name__abENT__apos;]__abENT__#46;__abENT__apos;_value__abENT__apos;, get_post_meta($post_id, $meta_box[__abENT__apos;name__abENT__apos;]__abENT__#46;__abENT__apos;_value__abENT__apos;, true));<br />
}<br />
}<br />
<br />
<br />
add_action(__abENT__apos;admin_menu__abENT__apos;, __abENT__apos;create_meta_box__abENT__apos;);<br />
add_action(__abENT__apos;save_post__abENT__apos;, __abENT__apos;save_postdata__abENT__apos;);</code>You are done.
If you have made it this far, it’s now time to see your slider in action. Go write a new post in WordPress, paste the URL to your image in to the new image panel, and view your site.
Cheers.
Thanks to CSS Tricks for the jquery trick, TimThumb for thumbnail generation and WordPress for the great publishing system.
Thank you, looks interesting
Thank you, looks interesting
Sorry: another question is:
Is jquery part of wordpress 2.7 or do I need to load the library ? And if so, how to do it?
Thanks again.
Aurelien
JQUERY comes packaged in the WordPress admin (it powers quite a few features in the admin) but it doesn’t necessarily come in your theme. Adding this line between the
<code>__abENT__lt;code__abENT__gt;__abENT__#95;__abENT__#95;abENT__abENT__#95;__abENT__#95;lt;head__abENT__#95;__abENT__#95;abENT__abENT__#95;__abENT__#95;gt;__abENT__lt;__abENT__#8260;code__abENT__gt;</code>and<code>__abENT__lt;code__abENT__gt;__abENT__#95;__abENT__#95;abENT__abENT__#95;__abENT__#95;lt;__abENT__#95;__abENT__#95;abENT__abENT__#95;__abENT__#95;#8260;head__abENT__#95;__abENT__#95;abENT__abENT__#95;__abENT__#95;gt;__abENT__lt;__abENT__#8260;code__abENT__gt;</code>loads JQUERY version 1.3.2:Notice that I’m referencing jquery from the Google API. This can help speed up page load time (many users might have the JQUERY – Google API cached in their browser, so there is no need to reload jquery each time).
Make sure you load JQUERY BEFORE you load any JQUERY-dependent plugins.
Sorry: another question is:
Is jquery part of wordpress 2.7 or do I need to load the library ? And if so, how to do it?
Thanks again.
Aurelien
JQUERY comes packaged in the WordPress admin (it powers quite a few features in the admin) but it doesn’t necessarily come in your theme. Adding this line between the
<head>and</head>loads JQUERY version 1.3.2:Notice that I’m referencing jquery from the Google API. This can help speed up page load time (many users might have the JQUERY – Google API cached in their browser, so there is no need to reload jquery each time).
Make sure you load JQUERY BEFORE you load any JQUERY-dependent plugins.
oups: too fast bloggin.
I added the code at the end of functions.php after the “?>”… Now it works fine.
I have all the posts in the slider.
Is it possible to change the settings so that only 3 main pages appear on the slider?
Pages are not possible because you can’t attach photos to pages.
You’re wrong. We can attach photos to pages with the same way…
Yes, it’s possible. You need to create a new page php file and insert in the top:
Just insert the “slider.php” in each page you want to show the slider.
Then, in you admin page panel select the Template option you want.
oups: too fast bloggin.
I added the code at the end of functions.php after the “?>”… Now it works fine.
I have all the posts in the slider.
Is it possible to change the settings so that only 3 main pages appear on the slider?
Pages are not possible because you can’t attach photos to pages.
You’re wrong. We can attach photos to pages with the same way…
Yes, it’s possible. You need to create a new page php file and insert in the top:
Just insert the “slider.php” in each page you want to show the slider.
Then, in you admin page panel select the Template option you want.
Hey,
Is there a way for this to automatically scroll thru the differnt content boxes on a loop?
Thanks
Automatically? Or with hot keys? You can use your keyboard arrow keys on most browsers to scroll left and right. You can also click inside the main box on the left to scroll left. Same goes for the right side.
Automatically, so it will just scroll thru the boxes by its self until stopped?
Hey,
Is there a way for this to automatically scroll thru the differnt content boxes on a loop?
Thanks
Automatically? Or with hot keys? You can use your keyboard arrow keys on most browsers to scroll left and right. You can also click inside the main box on the left to scroll left. Same goes for the right side.
Automatically, so it will just scroll thru the boxes by its self until stopped?
Not working. I’ve followed all of your steps, etc. I don’t have a current version of WordPress, is that a problem?
Not working. I’ve followed all of your steps, etc. I don’t have a current version of WordPress, is that a problem?
Greetings! I’m very excited about this and I’m trying to install this puppy locally to test it out and tweak it before rolling it out on my own site, but can’t seem to get it working.
I’ve completed all of the steps, but the posts are coming out underneath one another – not side by side – and therefor there’s no sliding love going on. Any ideas? Thanks!
-Patrick
I tried to find the support forums but am unable to access them…
Well, got it figured out. Thanks…
how did you fix that problem patrick ? i think i have the same issue
I have the same problem too. When it first loads, it looks fine but once I click on the left/right arrows to scroll, they will be on top of each other and totally mess up.
How did you fix it?
Greetings! I’m very excited about this and I’m trying to install this puppy locally to test it out and tweak it before rolling it out on my own site, but can’t seem to get it working.
I’ve completed all of the steps, but the posts are coming out underneath one another – not side by side – and therefor there’s no sliding love going on. Any ideas? Thanks!
-Patrick
I tried to find the support forums but am unable to access them…
Well, got it figured out. Thanks…
how did you fix that problem patrick ? i think i have the same issue
I have the same problem too. When it first loads, it looks fine but once I click on the left/right arrows to scroll, they will be on top of each other and totally mess up.
How did you fix it?
Thanks for this great tutorial which i successfully managed to implement into my wordpress blog(2.7.1). Evrythings working fine.
Is there a way around for wpquery to pickup random posts and extract the default images rather than adding image url to each post you want featured.
Next one would be autoscrolling feature,like Lee asked. There’s lot of tutorials around but most of them are incomplete.
Thanks for this great tutorial which i successfully managed to implement into my wordpress blog(2.7.1). Evrythings working fine.
Is there a way around for wpquery to pickup random posts and extract the default images rather than adding image url to each post you want featured.
Next one would be autoscrolling feature,like Lee asked. There’s lot of tutorials around but most of them are incomplete.
hey! I can;t get it to work ! how can i resize the feature content ? lets say, the main content area where i want to display it is about 260 px, how do i resize the feature so it would work with that ? thx for the help
hey! I can;t get it to work ! how can i resize the feature content ? lets say, the main content area where i want to display it is about 260 px, how do i resize the feature so it would work with that ? thx for the help
its look nice and pretty good start for me…
its look nice and pretty good start for me…
Could you please tell me how to display this featured content slider on page?
And how can i resize it?
Could you please tell me how to display this featured content slider on page?
And how can i resize it?
how do you modify this so it only shows posts under a “featured” catagory?
how do you mod this so it initially highlights the latest post, instead of the 3rd post.
thanks
how do you modify this so it only shows posts under a “featured” catagory?
how do you mod this so it initially highlights the latest post, instead of the 3rd post.
thanks
Q: I followed the directions above. When I first inserted the J_Query, I put it below the JS and then the slider worked but my other graphic elements did not. I moved it above and now my other elements work, but my slider doesn’t slide. It only allows one posting at a time. If I add another, It writes over it….
http://www.filmsonartists.com/blog
ignore everything else, the site is a mess :o)
Q: I followed the directions above. When I first inserted the J_Query, I put it below the JS and then the slider worked but my other graphic elements did not. I moved it above and now my other elements work, but my slider doesn’t slide. It only allows one posting at a time. If I add another, It writes over it….
http://www.filmsonartists.com/blog
ignore everything else, the site is a mess :o)
My fellow on Facebook shared this link with me and I’m not dissapointed at all that I came here.
p.s. Year One is already on the Internet and you can watch it for free.
My fellow on Facebook shared this link with me and I’m not dissapointed at all that I came here.
p.s. Year One is already on the Internet and you can watch it for free.
hi
this is so great – just wondering – can I use specific pages instead of the posts?
hi
this is so great – just wondering – can I use specific pages instead of the posts?
this is really great – just wondering – is it possible to swap random post with specific pages???
this is really great – just wondering – is it possible to swap random post with specific pages???
Magnificent!!
Magnificent!!
Thanks, i want to try using this
Thanks, i want to try using this
Any option to set multi slider in a single page?
(Works like charm!)
Any option to set multi slider in a single page?
(Works like charm!)
hi Thad,
I joined GPP a few weeks ago and downloaded your Modularity package. My question is this : Are all these things included in the version i downloaded ? meaning all the slider, JQUERY things? or do i need to follow the inastructions listed above as well? Or did i download the new package that has all of this in it and these instructions written above are only for members who had the older Modularity theme download? I have yet to get a slider to work so it seems like i may have to do this stuff you listed here ? Everything else seems to work pretty good except i am still having trouble with video. I use Squeeze 4.0 and i can’t seem to get the proper .flv settings to make my video look good. it all starts as crisp HD quicktimes and ends up as not-so-great looking .flv files. i have been using the MED_prog and Large_prog compression presets in Squeeze. Can you tell me what dimensions and frame reordering, etc. settings you usually use to compress video for your themes? or can you write a tutorial on the detailed way to get the most out of your video for Modularity and other similar themes? That would be helpful. Thanks !
hi Thad,
I joined GPP a few weeks ago and downloaded your Modularity package. My question is this : Are all these things included in the version i downloaded ? meaning all the slider, JQUERY things? or do i need to follow the inastructions listed above as well? Or did i download the new package that has all of this in it and these instructions written above are only for members who had the older Modularity theme download? I have yet to get a slider to work so it seems like i may have to do this stuff you listed here ? Everything else seems to work pretty good except i am still having trouble with video. I use Squeeze 4.0 and i can’t seem to get the proper .flv settings to make my video look good. it all starts as crisp HD quicktimes and ends up as not-so-great looking .flv files. i have been using the MED_prog and Large_prog compression presets in Squeeze. Can you tell me what dimensions and frame reordering, etc. settings you usually use to compress video for your themes? or can you write a tutorial on the detailed way to get the most out of your video for Modularity and other similar themes? That would be helpful. Thanks !
I like this. Could be a useful tool
I like this. Could be a useful tool
Hello, there… all seems great, but when the slider it shows in IE everything go wild.
Any advice for fixed it up?
Thank you in advance.
The link:
huriata.com/showroom
H.
Hello, there… all seems great, but when the slider it shows in IE everything go wild.
Any advice for fixed it up?
Thank you in advance.
The link:
huriata.com/showroom
H.
Any idea to fix it in IE:
huriata.com/showroom
Thank you in advance,
H.
Any idea to fix it in IE:
huriata.com/showroom
Thank you in advance,
H.
Hi,
how can i change picture and post width within the slider?
Trying to get the width for the slider and posts to 700px, so it shows only one post at the time, but i can’t get the “navigation” to move as much as the post-width are..
very grateful for any kind of help!
best regards
Mikael
Hi,
how can i change picture and post width within the slider?
Trying to get the width for the slider and posts to 700px, so it shows only one post at the time, but i can’t get the “navigation” to move as much as the post-width are..
very grateful for any kind of help!
best regards
Mikael
Having the same issue as Patrick above but without a fix. The photos just go on top of each other filling out the page.
the order of the scripts are very important. the above instructions are very good and i had it working. the issue i run into was with another plugin not playing nice with jquery. thanks for the info.
Having the same issue as Patrick above but without a fix. The photos just go on top of each other filling out the page.
the order of the scripts are very important. the above instructions are very good and i had it working. the issue i run into was with another plugin not playing nice with jquery. thanks for the info.
How do you modify the graphpaper press modularity themes so that the slider, thumbnail post, or slideshow display on the main page can take images from a nextgen gallery post? All my posts contain images inside of nextgen galleries and out of the box, modularity does not read any of them. Thank you.
How do you modify the graphpaper press modularity themes so that the slider, thumbnail post, or slideshow display on the main page can take images from a nextgen gallery post? All my posts contain images inside of nextgen galleries and out of the box, modularity does not read any of them. Thank you.
Wow, I have been looking for something like this all over the place with no luck. Thank you so much, you have made my life a lot easier!
Wow, I have been looking for something like this all over the place with no luck. Thank you so much, you have made my life a lot easier!
I´m getting an error mesage from functions.php
Fatal error: Call to undefined function add_action()
I´m getting an error mesage from functions.php
Fatal error: Call to undefined function add_action()
looks like just what i’ve been looking for, but the demo & download slider.zip links are broken ?
looks like just what i’ve been looking for, but the demo & download slider.zip links are broken ?
I have uploaded to WordPress 2.9.2 and it works perfectly. However, is there anyway to stop the script from enlarging the photos? I have tried to change the H and W sizes, but this has no effect.
I have uploaded to WordPress 2.9.2 and it works perfectly. However, is there anyway to stop the script from enlarging the photos? I have tried to change the H and W sizes, but this has no effect.
really usefull!
really usefull!
I’m wondering about 2 things:
1 – if it’s possible to use the post thumbnail option of wp 2.9+ instead of a custom write panel for image thumbails
2 – if it’s possible to automatically scroll the boxes?
I’m wondering about 2 things:
1 – if it’s possible to use the post thumbnail option of wp 2.9+ instead of a custom write panel for image thumbails
2 – if it’s possible to automatically scroll the boxes?
Thank you for your useful post
a lot …
wordpress.org/plugins/wp-visual-slidebox-builder/
Thats a WordPress Plug in to add Sliding Boxes all visual, WYSIWYG
Is it possible to have the feature image on the home page or the slider, link to a relevant page? (So can it be clickable?)