Sidebar Slideshow widget with text [closed]

I don’t think this StackExchange is meant to recommend plugins. However, I happen to have built this for a client before. It uses jQuery’s “jCaroussel” plugin, and you can see it in action on Oelers Makelaardij.

Scoop up the minified version, it contains all plugins like Autoscrolling, Controls, etc.

CSS

Most of the CSS is provided with the plugin. Add it to your style.css and change it to your needs.

JavaScript

$(document).ready(function(){

    $('#slider').jcarousel({ // initiate the slider on this element
        'animation':    { 'duration': 800, 'easing': 'swing' },
        'wrap':         'circular',
        'vertical':     true
    });

    $('#slider').jcarouselAutoscroll({ autostart: true });
    $('.jcarousel-prev').jcarouselControl({ target: '-=1' });
    $('.jcarousel-next').jcarouselControl({ target: '+=1' });

    $('#slider li img').each(function(){
        if($(this).attr('alt') != '') {
            var $caption = $(this).attr('alt');
            $caption = '<span class="caption">' + $caption + '</span>';
            $(this).before($caption);
        }
    });

}); 

The last function you see there is my custom code. It loops through all the slides in the slider, looks at the image’s alt attribute, and extract the text therein. Then it injects a span element containing this text before the img element. With CSS styling I overlaid this text on the image.

.jcarousel li .caption {
    position: absolute;
    bottom: 0;
    left: 0;
    display: block;
    width: 70px;
    height: 1.5em;
    line-height: 1.5em;
    font-size: 0.9em;
    font-weight: bold;
    color: #f1f1f1;
    text-align: center;
    background: #c31d1d;
    background: rgba(195,29,29,0.7);
}

PHP / HTML

<a class="jcarousel-prev" href="#">Previous</a>
<div id="slider" class="jcarousel">
    <ul>
        <li>
            <img alt="Overlay" src="" width="" height="" />My text
        </li>
        <li>
            <img alt="Overlay" src="" width="" height="" />My text
        </li>
    </ul>
</div>
<a class="jcarousel-next" href="#">Next</a>

This is the basic HTML structure to contruct a slideshow, but if you want to build it using WordPress’ WYSIWYG editor, you can use the following code instead:

<div id="slider" class="jcarousel">
<?php
    $my_postid = 35; // change this to the ID of the post that contains the list of slides in an Unordered Bullet List
    $content_post = get_post($my_postid);
    $content = $content_post->post_content;
    $content = apply_filters('the_content', $content);
    $content = str_replace(']]>', ']]&gt;', $content);
    echo $content;
?>

</div>

Now you can build an unordered list in a post, insert image thumbnails and add text. With additional CSS styling you can position all your elements, like on Oelers Makelaardij (link at beginning of answer for working example).