Here's a quick tutorial, adding a Nivo Slider to your forum. (This are already prepared-codes, all you need to do is to place and edit the pictures)

Forum Version: All versions!
Demo: Click Me!

1. Put this in your Homepage Message (ACP > Display > Homepage > Generalities)

Code:

<link rel="stylesheet" href="http://static.tumblr.com/hhedat8/8cbmksz3o/nivo-slider.css" type="text/css" media="screen" />
<link rel="stylesheet" href="http://static.tumblr.com/hhedat8/NnQmksygd/bar.css" type="text/css" media="screen" />
<link rel="stylesheet" href="http://static.tumblr.com/hhedat8/J4Bmksyye/default.css" type="text/css" media="screen" />

<center> <div id="wrapper"><div class="slider-wrapper theme-default"><div id="slider" class="nivoSlider">

<img src="http://648290826.r.cdn77.net/wp-content/uploads/2013/02/slider1.jpg" title="This displays the caption 1" alt=""/>
<img src="http://648290826.r.cdn77.net/wp-content/uploads/2013/02/slider4.jpg" alt="" />
<img src="http://648290826.r.cdn77.net/wp-content/uploads/2013/02/slider2.jpg" title="This displays the caption 2" />
<img src="http://648290826.r.cdn77.net/wp-content/uploads/2013/02/slider3.jpg" />

</div>
</div>
</div>
</center>

<script src="http://static.tumblr.com/hhedat8/NqOmksx73/jquery.nivo.slider.js" type="text/javascript"></script>
    <script type="text/javascript">
    jQuery(window).load(function() {
        jQuery('#slider').nivoSlider();
    });
</script>

2. Now all you need to do is to change the image. Just replace the picture image inside the image 'src' and it should work. If you want to change the caption, just change the text inside the 'title'. Or if you want to add caption on other image, just add this on the image tag.

Code:

title="This displays the caption"

Enjoy! :):

Awesome!

Thanks for sharing!

Thanks, and, welcome! :P:

How can I add links on the images?

Add an a tag on the img tag. It should be something like this:

Code:

<a href="linkhere"><img src="http://i48.tinypic.com/35lw9yv.jpg" data-thumb="images/walle.jpg" alt="" data-transition="slideInLeft" /></a>

:):

Mark wrote:Add an a tag on the img tag. It should be something like this:

Code:

<a href="linkhere"><img src="http://i48.tinypic.com/35lw9yv.jpg" data-thumb="images/walle.jpg" alt="" data-transition="slideInLeft" /></a>

:):

Thanks a lot.

I have a problem after adding this. It's working but showing big blank space. Can I re-size it? Here is a screenshot

Hello!

Sorry for late reply, do you still encounter this problem? :):