FlexSlider ：在右侧垂直获取标题

Question

我正在使用酷炫的 Felxslider 在共享点安装上显示幻灯片。它工作得很好，但我还有两个问题:

1- 如何显示标题（你懂的，小透明背景title/description 图片) 不在图片底部，而是在右侧?

如果可能，不要将鼠标悬停在图片上。

2- 我有 N 张图片给谁，但是滑块总是显示 N+N 张图片，第一个额外的是图片的克隆，但最后一个总是只是空白的。例如，我有 3 张图片要显示，但滑块生成 6 张幻灯片：4 号和 5 号是 1 号和 2 号的克隆，而 6 号是完全空白的。无论我有多少张图片，它都会显示这些额外的图片（如果我有 2 张图片要显示，它会显示 4 张）。

你知道如何摆脱所有这些克隆吗？

非常感谢您的回答，祝您有愉快的一天！

Answer 1

为了让标题显示在右侧，我添加了一些 css 规则和特定的 HTML 标题格式。

这是右侧字幕显示的 jfiddle：http://jsfiddle.net/tyuth1sr/23/

在您网站的自定义样式表中使用以下 css，然后对标题使用 HTML 格式：

CSS

/*
 * flexslider slide styling 
 */

.slides {
    overflow: hidden !important;
}

.slides div .flex-caption {
    overflow: scroll !important;
}


/*
 * flexslider caption styling 
 */

.flex-caption {
    position: absolute;
    text-align: left;
    font-size: 11px;
    background:rgba(255, 255, 255, 0.7);
    z-index: 100;
    padding: 20px 10px 35px 30px;
    width: 287px;
    padding-top: 100%;
    bottom: 0px;
    color: #000;
}

.right {
    right: 0;
    margin-bottom: 0px;
}

.show-caption {
    position: absolute;
    top: 48%;
    right: 240px;
    z-index: 99;
    opacity: 0.7;
    filter: alpha(opacity=70); /* For IE8 and earlier */
    pointer-events: none;
}

并像这样格式化您的 flexslider 字幕： HTML

                <ul class="slides" id="slideshow" ondragstart="return false;">
                    <li>
                    <img src="https://iluvmafuckinglife.files.wordpress.com/2012/04/256989-a-sphere-sculpture-made-from-easter-eggs-is-on-display-on-the-day-of-i.jpg" />
                    <div class="flex-caption right">
                        <div class="caption-content">
                            <p><span class="hcaption">Caption 1</span></p>
                            <br /><br />
                            <p class="hcap">Caption 1 text goes here.</p>
                        </div>
                    </div>
                    </li>
                    <li>
                    <img src="http://s3-ec.buzzfed.com/static/enhanced/web05/2012/2/8/11/enhanced-buzz-wide-29760-1328717305-32.jpg" />
                    <div class="flex-caption right">
                        <div class="caption-content">
                            <p><span class="hcaption">Caption 2</span></p>
                            <br /><br />
                            <p class="hcap">Caption 2 text goes here.</p>
                        </div>
                    </div>
                    </li>

请注意，您可以通过删除 "right: 0px" 的 .right css 位置规范并添加 "left: 0px"、[= 使标题显示在 flexslider 幻灯片的任何一侧27=] 或 "bottom: 0px;" 取决于您希望它出现的位置。您还必须调整文本 formatting/background 填充 CSS 以使其在其他位置之一正确显示。

FlexSlider ：在右侧垂直获取标题

FlexSlider : get the caption vertically on right side

javascript

css

flexslider

sharepoint-2013