我不认为StackExchange是为了推荐插件。然而，我碰巧以前为客户构建过这个。它使用jQuery的“JCarousel”插件，您可以在Oelers Makelaardij.

舀起minified version, 它包含所有插件，如自动滚动、控件等。

大多数CSS是provided with the plugin. 将其添加到您的风格中。css并根据您的需要进行更改。

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);
        }
    });

}); 

您看到的最后一个函数是我的自定义代码。它循环浏览滑块中的所有幻灯片，查看图像的alt 属性，并提取其中的文本。然后注入span 元素之前包含此文本img 要素使用CSS样式，我将此文本覆盖在图像上。

.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>

这是构建幻灯片的基本HTML结构，但如果要使用WordPress的WYSIWYG编辑器构建幻灯片，可以使用以下代码：

<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>

现在，您可以在帖子中构建无序列表，插入图像缩略图并添加文本。通过额外的CSS样式，您可以定位所有元素，比如Oelers Makelaardij（工作示例答案开头的链接）。