jquery - JSSOR 画廊：图片库上的标题 w 垂直条？

Question

是否可以在 jssor“图像库 w 垂直条”示例上添加标题？如果可能的话，我想用实际的 HTML 而不是 js 来做，因为我正在使用 Ruby on Rails。

就像是：

<% @images.each do |image|  %>
    <div>
    <img u="image" caption="<%= image['caption'] -%>" src="<%= image['fullsize'] -%>" />
    <img u="thumb" src="<%= image['thumb'] -%>" />
    </div>
<% end -%>

Answer 1

<script>
        ...
        var _CaptionTransitions = [];
        _CaptionTransitions["CLIP|LR"] = {$Duration: 900, $Clip: 3, $Easing: $JssorEasing$.$EaseInOutCubic };
        var options = {
            ...
            $CaptionSliderOptions: {                            //[Optional] Options which specifies how to animate caption
                $Class: $JssorCaptionSlider$,                   //[Required] Class to create instance to animate caption
                $CaptionTransitions: _CaptionTransitions,       //[Required] An array of caption transitions to play caption, see caption transition section at jssor slideshow transition builder
                $PlayInMode: 1,                                 //[Optional] 0 None (no play), 1 Chain (goes after main slide), 3 Chain Flatten (goes after main slide and flatten all caption animations), default value is 1
                $PlayOutMode: 3                                 //[Optional] 0 None (no play), 1 Chain (goes before main slide), 3 Chain Flatten (goes before main slide and flatten all caption animations), default value is 1
            },

            ...
        };
        ...
        var jssor_slider1 = new $JssorSlider$("slider1_container", options);
</script>
<% @images.each do |image|  %>
    <div>
    <img u="image" caption="<%= image['caption'] -%>" src="<%= image['fullsize'] -%>" />
    <img u="thumb" src="<%= image['thumb'] -%>" />
    <div u="caption" t="CLIP|LR"  style="position:absolute; left:20px; top: 30px; width:300px; height:30px;"> 
            Jssor Slider, touch swipe
    </div>
</div>
<% end -%>